Delay Page Load for Seamless Animation Transition

Design help Animations & Interactions
1

when click view project from intro hero slider the new page load over the slider but the video stop and re start from the same point.
i try to inspect the code but … i’m a designer jesus my mind work in a different way.
In webflow i can simulate this effect by insert the same same element in project detal page but it isn’t fluid like this.
i can try with ajax ?

Here is my public share link: LINK
(how to access public share link)

2

You can use javascript to delay the page transition so it’s smooth.

<script>
  $('a.pagetransition').click(function (e) {
    e.preventDefault();                   // prevent default anchor behavior
    var goTo = this.getAttribute("href"); // store anchor href

    setTimeout(function(){
         window.location = goTo;
    },1500);       
});
</script>

You would set this in the /body section of the custom code in your sites settings. Then change the millisecond delay to match however long your animations take before refreshing to the new page or going back a page.

Hopefully this helps!
-Noah

1 Like
3

Thx @Noah-R yes i do this trick and now i’m trying to replicate the “multi-layer-level” effect. i share you na oreview when is more complete.
Sorry for maccheroni english
folko

4

That’s ok. And perfect! Let me know, I’d love to see it!

-Noah