Streaming live at 10am (PST)

Trouble with page transitions


#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

I hope it makes sense

Max


#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.


#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

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


#11

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