Tween from initial load animation to ScrollTrigger state

[dmo12]

I'm working on a project where I have multiple sections, each with an initial load in animation based on a normal timeline triggered by a ScrollTrigger, and a second ScrollTrigger-based timeline that animates the elements out of the section as the user scrolls down.

 

Based on the CodePen demo, the default behaviour seems to be that if the user scrolls within the ScrollTrigger's start and end range before the initial timeline is complete, once they scroll again, the element position, opacity, etc. will be instantly set to the playhead of the ScrollTrigger timeline. Is there a way to tween that, so the transition between the loadTl and scrollTl is smooth?

See the Pen KKreQQV by dannymout (@dannymout) on CodePen

[Rodrigo]

Hi,

 

When debugging or trying to find an issue, always use markers in your ScrollTrigger instances.

 

Maybe you're trying to do something like this:

See the Pen ZEmRqgJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[dmo12]

Perfect, this is exactly what I was trying to achieve. So you're tweening to the end of the loadTl when the scrollTl is triggered, and then using immediateRender to avoid those properties from getting set before it starts.

 

Appreciate your quick response, and I'll use markers going forward.