Adding Page Transition

Design help Animations & Interactions
1

Hey Guys,

I’m trying to apply transitions through my website but for some reason, the speed of the transition won’t work.

I have been following this video tutorial:

I have created the first transition from the homepage, selecting the Work Project as a trigger to the Work page… I can see the transition happening but the speed is wrong.

I have also added the custom code into the < /body > tag…

Maybe you know Nelson? @PixelGeek

Here is my public share link: https://preview.webflow.com/preview/valeria-g?utm_medium=preview_link&utm_source=designer&utm_content=valeria-g&preview=aa631bba2c69a33eea33fbf6ebf709cb&mode=preview

1 Like
2

Hey @Valeria_Galati

What you mean by the speed is wrong?

You can’t see the transition animation till the end?

Okey, I think I see your problem @Valeria_Galati

You need to change or add classes to the script. The classes are going to tell the browser which elements will wait for the default browser behaviour in order to show your out of page animation. Make sure you are changing the class names in the script where you see .element-class-here

  <script>
      $('.element-class-here, .another-element-class').click(function (e) {
        e.preventDefault();                   // prevent default anchor behavior
        var goTo = this.getAttribute("href"); // store anchor href

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

Piter :webflow_heart:

3

Hi Piter,

Thanks for your quick response.

Yes the problem is that the transition on the homepage when you click on the . trigger won’t finish to load the transition but it moves to the next page…

I’m not too sure which ones are the element classes to change?

I have added

` < script >
$(‘.overlay, .work’).click(function (e) {
e.preventDefault(); // prevent default anchor behavior
var goTo = this.getAttribute(“href”); // store anchor href

    setTimeout(function(){
         window.location = goTo;
    },1000);       
});

< /script >`

I want the overlay transition to finish before moving to the work page is this correct?
Is still not working…

Here is my public share link: https://preview.webflow.com/preview/valeria-g?utm_medium=preview_link&utm_source=designer&utm_content=valeria-g&preview=b958c77e305aad0095bb1535c379afe8&mode=preview

1 Like
4

So, you have a button for works. You need to take the class of the link and paste it where you see .element-class-here

If you are using different buttons with different class names and you want those buttons to trigger the same out interaction, you need to set the same delay for them pasting their classes in the script.

Hoping this makes things clear :webflow_heart:

5

Okay, I have changed the class name to: .link-work which is the class name i’m using for the first link on the homepage but still not working??

Can you maybe have a look and see if I’m doing something wrong?

Thanks,
Val

1 Like
6

You need to share your read only link again. It’s not working right now

7

Hey,

I think I have finally managed to fix it changing the code and the time animation.

Thanks for your help again!

Val