Streaming live at 10am (PST)

Interactions acting weird

Hey webflow masters,

I’m building a site with page transtions and a custom menu but for some reason they all act crazy and page triggers affect click triggers and nothing seems to be in order even though everything seemed to work before. Here’s my read only preview https://preview.webflow.com/preview/duck-22565b?utm_medium=preview_link&utm_source=designer&utm_content=duck-22565b&preview=988e6801ce915c40650108ce7010d59c&mode=preview

I appreciate the help <3

Hi,

Ran did a great tut about that https://youtu.be/0RJg1gV5zfQ?t=639

You need to delay the page load with this piece of code into the footer custom code in your site’s settings:

<script> $('.trigger1 ', '.trigger2 ', '.next', '.previous').click(function(e) { e.preventDefault(); var linkUrl = $(this).attr('href'); setTimeout(function(url) { window.location = url; }, 1200, linkUrl); }); </script>

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.

Cheers,

Pierre-Jean

hey Pierre-Jean,

I already have. You don’t have access to it cause it’s in the project settings. I replaced the classes as well… :confused: 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.

but thank you for the answer man! :slight_smile:

btw right now when I click on a link, the menu is showing. Idk why webflow thinks that random links are assigned to it …

Hi @DanApro,

This is really hard to troubleshoot without a published version…

First I noticed that your menu-btn needs to be inside the body instead of the section to work properly.

Then, you need to put the trans-out interaction on every clickable item that triggers a page change.

Here’s the page transition on a recent website I made, are we talking bout the same kind of effect?

aluprojets.fr

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.

Cheers,

Hey Pierre-Jean,

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!

Cheers