NeroThroN Posted December 28, 2021 Share Posted December 28, 2021 Hello world ! I'm pretty new inside the gsap environment. I discover the plugin scrolltrigger few days ago and found an issue that i can't get around. When I have multiple animations on the same element. One of this animation is based on scroll, if the page is already a little bit scrolled, when the scrolltrigger played, the animation jump to the progresss instead of animate to the progress. What can I do to get around this problem and give a smooth experience to users, event those that didn't wait the end of appear animation ? To reproduce this I have created a codepen. Before the end of the appear timeline, scroll a little bit on the content to see the top of the second section Now that the animation is finished, scroll a little bit inside the page using the scrollbar (just to trigger the scrolltrigger) Observe the content suddenly pop up above Thanks all ! See the Pen zYEpJVV by nerothron (@nerothron) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 28, 2021 Share Posted December 28, 2021 Hey there @NeroThroN, You have some conflicting tweens here. If I were you I would either take a look at some different overwrite modes or Wrap the content in a container div and animate that div on scroll instead of the same elements you're animating in the entrance animation Hope this helps! 1 Link to comment Share on other sites More sharing options...
Solution NeroThroN Posted December 28, 2021 Author Solution Share Posted December 28, 2021 Thanks @Cassie for your quick response Quote Wrap the content in a container div and animate that div on scroll instead of the same elements you're animating in the entrance animation Something like this ? <div id="wrapper-title"><h1>Hello World!</h1></div> Where in the appear animation I target "#wrapper-title" and in the scroll the "#wrapper-title > h1" ? See the Pen qBPpLNv by nerothron (@nerothron) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 28, 2021 Share Posted December 28, 2021 Yep, you understood correctly! ✨ 2 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