ScrollTrigger scrubbing not working as expected

[Brodiero 2 Likes (Newbie)]

I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion.

 

It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things.

 

What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy   

 

Thanks for any pointers on my mistakes, it is apparently a great education...

See the Pen zYrKowd by brodiero (@brodiero) on CodePen

[GreenSock 18,256 Likes (Superhero)]

I noticed a few problems:

1. You were nesting ScrollTriggers inside tweens in a timeline. Here's an excerpt from the docs regarding that: 

   Quote

   Can I have multiple nested ScrollTriggers in various child tweens in a timeline?
   Technically you could but it usually doesn't make sense. An animation's playhead is controlled by its parent timeline's playhead so as it sweeps over the children it updates their playheads accordingly. However, when you assign an animation to a ScrollTrigger, it gets paused and the ScrollTrigger instance controls its playhead. It wouldn't be good to have multiple things trying to control the same animation's playhead. It's typically best to either have one ScrollTrigger control the entire timeline or use independent tween, each with their own ScrollTrigger.

    

2. You had an initial animation that was trying to control the SAME property of the same object as another ScrollTrigger-based tween (going in opposite directions). By default, ScrollTrigger will initialize the tween/timeline right away to maximize performance during scroll and to ensure values are locked & loaded, but in your case you don't want that because at the time you're creating the tween/ScrollTrigger, the radius value is 0 (your other tween is animating it up). So just set immediateRender: false on your tween to force it to wait until the user scrolls to lock in the values. 

Here's a fork: 

See the Pen 4dbcc9744942cf789c690a03b6e99776?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

 

One logic issue in the way you're doing things is...what happens if the user starts scrolling before your intro animation is done? Your ScrollTrigger tween will force the radius back down, and the initial values that are recorded will be whatever the radius is at that time, thus things won't ever be able to go back past that value if the user scrolls back up. It's not a ScrollTrigger/GSAP issue - it's a logic thing. There are various strategies you can implement, but you've gotta decide how you want it to behave. 

 

Happy tweening!

[Brodiero 2 Likes (Newbie)]

Thank you Zach, I really appreciate you taking the time to explain things,  it helps enormously. 

Your code side-by-side helps me understand better although I'm clearly trying to run before I can walk here....

 

Logic/issues - I am aware of it - I can see the resize no longer works also but at the moment i'm trying to not do everything at once as I will get lost even deeper, and these are more like mockups to see what works before getting it ship-shape, again running before I can walk!