You’ll need to replace the classes with yours in the script above and replace “1200” to the duration in milliseconds of your animation.
I would also advise to set the pageTransitionOut interaction to “when page starts loading” in order to keep the page loading even if one ressource fails to load. Example: If an embed fails to load (youtube embed, map embed etc…) the final user will get stuck to the end keyframe of the animation.
I already have. You don’t have access to it cause it’s in the project settings. I replaced the classes as well… My main issue is that things are getting triggered where they’re not supposed to.
Transition Out should happen when someone clicks on a link or something.
Also when designing I had trouble with the webflow.io publised site ( page transition would stay stuck if Apple users used previous page button of their browser ) but when I published on the final domain everything worked. That was weird.
yeah I’m trying to achieve something similar to what you did but much simpler. I brought the menu-btn directly into the body, it’s still not working, it did before I added the trans-out interaction. I don’t know if there’s a bug or something I know that the Js code has to select all of the links that take you to other pages but first I only tried it with just one. All of the links seem to be disabled. Funny enough the trans-out effect works on mobile but then it triggers the menu to slide down at the same time. I don’t know what bug this is.
I like your page transition, although I think you also have some bug cause it’s kind of slow and clunky, but it might just be due to my slow internet or something.
Thanks for looking at my project!