Streaming live at 10am (PST)

Page transition multiple classes

Hi all,

Really struggling with the page transition effect using custom code from this video tutorial:

I am trying to do a simple fade from one page to another.

I’ve setup the animation and I think it’s not working because I have classes like this…

42

38

What if you are selecting multiple classes? How does it work?

Share link:
https://preview.webflow.com/preview/designer-ryan?utm_medium=preview_link&utm_source=dashboard&utm_content=designer-ryan&preview=cf36de9db01166856193dbd11a09753a&mode=preview

If you scroll down and click on the last thumbnail titled ‘Bowers & Wilkins’, I’ve set it up on there.

Any help would be amazing!


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

Hey @ryan585

Try removing the “a” before “.link” in your script, so it looks like this:

<script>
$('.link').click(function (e) {
    e.preventDefault();         
    var goTo = this.getAttribute("href");
    setTimeout(function(){
         window.location = goTo;
    },1000);       
});
</script> 

Also, would recommend placing your script in your site Footer code rather than Head.

Best

1 Like

Yesss! That works. Thank you :slight_smile:

So what’s the best way to apply it to all thumbnails, nav items, close buttons… as they all have different classes?

Any tips?

1 Like

Most welcome :slight_smile:

You can just add a comma between each class, like this:

<script>
$('.link,.nav-link').click(function (e) {
    e.preventDefault();         
    var goTo = this.getAttribute("href");
    setTimeout(function(){
         window.location = goTo;
    },1000);       
});
</script>
1 Like

Fantastic - i’ll give it a go shortly!

Thanks again.

1 Like

Sorry, me again.

I’m having trouble using the page transitions on navigation.

So from the work page to about, the work body fades out and the about page fades in - simple.

But from the about page back to the work page, it’s struggling because the nav link is setup to fade out the work page and not the about page.

How do I fix this? Is it because I am using nav as a component?

Hi mate sorry to pester did you have any tips on the nav links?