Carsten Posted July 26, 2021 Share Posted July 26, 2021 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 More sharing options...
Cassie Posted July 26, 2021 Share Posted July 26, 2021 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? 1 Link to comment Share on other sites More sharing options...
mikel Posted July 26, 2021 Share Posted July 26, 2021 Hey @Carsten, Welcome to the GreenSock Forum. As cassie mentioned, a minimal CodePen would be very helpful. If urgent, here the locksmith service See the Pen a8ec0c2b83f8fdfab896877b9b81a2d5?editors=0110 by mikeK (@mikeK) on CodePen Happy locking ... Mikel 1 Link to comment Share on other sites More sharing options...
mikel Posted July 26, 2021 Share Posted July 26, 2021 Hey @Carsten, Just for fun ... See the Pen 9f6aa8fbc6ba0a84ff00b8f28fb4e7ed?editors=0010 by mikeK (@mikeK) on CodePen I hope it helps. Mikel Link to comment Share on other sites More sharing options...
Carsten Posted July 26, 2021 Author Share Posted July 26, 2021 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 More sharing options...
mikel Posted July 26, 2021 Share Posted July 26, 2021 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 1 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 26, 2021 Share Posted July 26, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
Carsten Posted July 26, 2021 Author Share Posted July 26, 2021 Thank you both for the help. I'm trying to figure out the differences as you wrote. If I don't get anywhere, I'll try again to create a pen. Thanks and have a nice day! 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 26, 2021 Share Posted July 26, 2021 Good luck, I hope you figure it out. It sounds mega frustrating. 1 1 Link to comment Share on other sites More sharing options...
mikel Posted July 26, 2021 Share Posted July 26, 2021 Hey @Carsten, If you combine all the relevant elements in one SVG, you usually have better opportunities to keep everything under control. See the Pen 3462e15a2d1aad8b9bb354814b05c716?editors=1010 by mikeK (@mikeK) on CodePen Good luck ... Mikel 2 1 Link to comment Share on other sites More sharing options...
Carsten Posted July 26, 2021 Author Share Posted July 26, 2021 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now