Jump to content
Search Community

Scroll Trigger Animation works only after reloading the page

Carsten test
Moderator Tag

Recommended Posts

Hello all,

 

I have a problem with an animation on the website (deleted).  

 

The key on the page should move down to the lock. When the key gets to the lock, a closed lock fades out and an open one fades in.

Unfortunately, despite the jQuery(document).ready function, this effect only works after the web page has been refreshed.  

 

On the first load the effect starts much too early, so that it is not visible.

 

I hope someone can help me here. I'm a bit at a loss right now.

 

Greetings

Carsten

Link to comment
Share on other sites

Hi Carsten, could you possible create a minimal demo of this issue in codepen?

I know if takes time to put together a demo but it will greatly increase your chance of getting help - It's very difficult for us to debug live sites.

You don't need to recreate the whole page - just the lock animation.

Alternately have you tried adding markers:true to your scrollTrigger and checking where the start and end points are?

  • Like 1
Link to comment
Share on other sites

Hello and thank you for the quick feedback,

 

I had tried to create a pen for this problem, however the error appears only on the live site with Wordpress and DIVI (Theme). 

 

What I see in the meantime is that the page is bigger after the reload than when it was first loaded.

This causes the animation to display correctly after the reload. 

 

However, I have not been able to figure out what elements it is and how to prevent it.

 

If anyone has any ideas about this, it would help me a lot. 

 

However, the error is of course not in GSAP in particular.

 

Greetings

Carsten

Link to comment
Share on other sites

Hey @Carsten,

 

Again, it is helpful to build the reduced case in a CodePen. That helps you to assess the setting, especially when it comes to responsive, flexible constellations.
And we have a better chance of helping you.

 

Happy exploring ...

Mikel

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi Carsten,

Sound like you would probably benefit from working out what's making the page 'bigger' after the reload.
This is definitely not a GSAP related issue but maybe you have some dynamic content being added in that's affecting the layout and throwing off the markers.

 

My advice would be -

Try and narrow down what is happening differently between first load and reload. This sounds very odd. Is it caching or dynamic content of some sort?

Add markers so you can see if the layout is changing between the first and second reload.

Ask for help with the DIVI/Wordpress community.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@Cassie
you're right, it really is a bit frustrating. But thanks for the help.😉

 

@Mikel
thanks for all the examples. Great support! I will test if I can get further with it.

What irritates me and what I never had before is that it just works 100% after the reload. The size of the page changes after a certain point with the scroll animation and I don't quite understand why. 

 

Greetings and thank you
Carsten

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...