Trouble with page transitions

Design help Animations & Interactions
1

Im not sure why this transition isnt working properly. I read the article on how to do it and followed step by step. When i hit play to test the interaction it works just fine but when i actually try to view it nothing happens. any advice will be much apprectaited

share link;
https://preview.webflow.com/preview/shadys?utm_source=shadys&preview=2e5ef28d506395683faa342ee6ef0d04

url;
http://shadys.webflow.io/

2

Hi @humanandcompany,

You are defining 2 times your initial states.

  • Define you initial state only for the page load interaction (meaning the top and bottom div should be visible and 0vh in transform as initial state when the page is loaded)
  • Then they animate to 50vh and -50vh
  • Then when a link is clicked they go back to 0vh
  • Then on the next page initial states are the same and therefore make a seamless transition

Here are a few screenshots to illustrate

28
28478Ă—740 12.7 KB
08
08480Ă—894 22 KB
47
47474Ă—1242 41.7 KB
56
56478Ă—1522 56.4 KB

I hope it makes sense

Max

2 Likes
3

so what i need to do is delete those initial states for my “page trans out” interaction?

4

In short yes :slight_smile: :sweat_smile:
Why I’m trying so hard…

5

lol no your fine, coding is hard to explain over text sometimes. But i got it to work. I knew it was simple and thank you a million. It makes sense now

6

Glad you made it work :slight_smile:

Please mark as solved to let people searching for answers find it easier.

1 Like
7

hey so it seems i cant repeat this, i feel im going crazy here. i tried to repeat it for this site.
https://preview.webflow.com/preview/coolz?utm_source=coolz&preview=9e44dc1551aba5f467851f0646e64cdf

and this is the url
http://coolz.webflow.io/

thanks again if youre able to help with this

8

I can’t see why in the designer as for now.

Do you have some code in your project setting custom code?
If yes can you share it here as we can only access custom code of individual pages.

When you click a link the url doesn’t change so it’s most probably coming from something prevent the default behaviour of the link.

Cheers

9

yes, heres the custom code here

10%20AM
10%20AM1606Ă—730 30.5 KB

i think your right about the browser, just cant understand why it worked the first time in that case

10

Yes this is one possible version of code.

Can you double check or share yours as often it is just a missing semicolon or similar typo.

Cheers

1 Like
11

will do, thanks. I just didnt get how it worked before and not again.