Jump to content


ScrollTrigger scrubbing not working as expected

Recommended Posts

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

Link to comment
Share on other sites

I noticed a few problems:

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

    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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.