Jump to content
GreenSock

bntratox

Can you help me to understand GSAP scroll positioned animation?

Go to solution Solved by akapowl,

Recommended Posts

Hello,

Im trying to learn GSAP, right now I am able to move objects with gsap.to and scrolltrigger.

But I didn't understand how can I animate things based on scroll amount.

For example: 

 

This is my codepen and a simple example. When a sections top hits the top of the screen it just animates immediately.

What I want is, I want to animate not to happen immediately but based on scroll amount.

For example I set xPercent to move 30% when top hits top, but I want the object move 15% when I scroll a little bit, and when I keep scrolling it moves %20 %25 %30 etc... and so on.

 

 

How can I do that?

Thank you.

See the Pen yLqeNpW by mertcanuslu (@mertcanuslu) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hello @bntratox, scrub is what you are looking for instead of toggleActions

 

From the docs:

 

Quote
  • ScrollTriggers can perform [...] actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or link it directly to the scrollbar so that it acts like a scrubber (scrub: true).

 

Quote
scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following
  • Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
  • Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

 

 

So when you set scrub to true on a ScrollTrigger, it will stretch out the entire linked animation between the ScrollTrigger's start and end, and thus advance the progress of the linked animation with the scroll-position in between those points on the page.

 

This section here explains in a bit more detail how that interacts with durations of tweens, which will be helpful to know when you e.g. want to wok with timelines:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

Some little sidenotes:

  • markers belong inside the ScrollTrigger object, not on the tween
     
  • For ScrollTriggers there is no stagger setting - this would belong on your tweens - but since you are using a forEach loop, stagger actually wouldn't make much sense anyway because you will always be targetting a single element
  • When using booleans (true/false) as 'values', they do not go in quotation marks, and...
  • ... stagger does not accept booleans to begin with. You'll find more information on how to use stagger here:

    https://greensock.com/docs/v3/Staggers

 

See the Pen wvxMKKZ by akapowl (@akapowl) on CodePen

 

 

 

As you can see, with scrub the animation will only advance in one direction though. So if you want to reverse it later on while scrolling in the same direction, you have different options. 

 

In your case, a repeat on the tween with yoyo and repeatDelay could work:

 

See the Pen abjdvdW by akapowl (@akapowl) on CodePen

 

 

 

Alternatively you could set up one more scroll-triggered tween to 'reverse' things later on with the start and end of the ScrollTriggers set as needed - in this case you would also need to set immediateRender to false on the latter ScrollTrigger though, because otherwise you'd run into some slight logic issues.

 

See the Pen poZgjyJ by akapowl (@akapowl) on CodePen

 

 

 

Or last, but very much not least, use a timeline and position your tweens on there appropriately by e.g. making use of the position parameter.

 

See the Pen WNKrQGe by akapowl (@akapowl) on CodePen

 

 

 

I hope this will clear things up a bit - altough it's a lot to take in. Especially the use of scrub with timelines, the concept of how drations work with scrubbed ScrollTriggers and the use of the position parameter on top of it, can be sort of hard to wrap around. But once you get the hang of it, you'll feel your animation superpowers go to over 9000! It just needs some getting used to - and a bit of practice. Happy scrolling!

 

One thing I missed:

By default, gsap will set an ease of 'power1.out' to every tween, so if you want any scrubbed tween's progress to advance absolutely in sync with the scroll-progress, you will need to specifically set ease: 'none' on that tween.

 

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

1 minute ago, akapowl said:

 

Hello @bntratox, scrub is what you are looking for instead of toggleActions

 

From the docs:

 

 

 

 

 

So when you set scrub to true on a ScrollTrigger, it will stretch out the entire linked animation between the ScrollTrigger's start and end, and thus advance the progress of the linked animation with the scroll-position in between those points on the page.

 

This section here explains in a bit more detail how that interacts with durations of tweens, which will be helpful to know when you e.g. want to wok with timelines:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

Some little sidenotes:

  • markers belong inside the ScrollTrigger object, not on the tween
     
  • For ScrollTriggers there is no stagger setting - this would belong on your tweens - but since you are using a forEach loop, stagger actually wouldn't make much sense anyway because you will always be targetting a single element
  • When using booleans (true/false) as 'values', they do not go in quotation marks, and...
  • ... stagger does not accept booleans to begin with. You'll find more information on how to use stagger here:

    https://greensock.com/docs/v3/Staggers

 

 

 

 

 

 

As you can see, with scrub the animation will only advance in one direction though. So if you want to reverse it later on while scrolling in the same direction, you have different options. 

 

In your case, a repeat on the tween with yoyo and repeatDelay could work:

 

 

 

 

 

 

Alternatively you could set up one more scroll-triggered tween to 'reverse' things later on with the start and end of the ScrollTriggers set as needed - in this case you would also need to set immediateRender to false on the latter ScrollTrigger though, because otherwise you'd run into some slight logic issues.

 

 

 

 

 

 

Or last, but very much not least, use a timeline and position your tweens on there appropriately by e.g. making use of the position parameter.

 

 

 

 

 

 

I hope this will clear things up a bit - altough it's a lot to take in. Especially the use of scrub with timelines, the concept of how drations work with scrubbed ScrollTriggers and the use of the position parameter on top of it, can be sort of hard to wrap around. But once you get the hang of it, you'll feel your animation superpowers go to over 9000! It just needs some getting used to - and a bit of practice. Happy scrolling!

 

Thank you so much for this detailed and explaining comment, I will keep in mind everything here. 👌

  • Like 3
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.
×