[ScrollTrigger jump to animation]

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

[ScrollTrigger jump to animation]

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.

1. Before the end of the appear timeline, scroll a little bit on the content to see the top of the second section
2. Now that the animation is finished, scroll a little bit inside the page using the scrollbar (just to trigger the scrolltrigger)
3. Observe the content suddenly pop up above

 

Thanks all !

See the Pen zYEpJVV by nerothron (@nerothron) on CodePen