Jump to content
Search Community

ScrollTrigger: Animate two timelines one after another

zainy test
Moderator Tag

Recommended Posts

I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated.


I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other.


I'd like the text container to not overlap and reveal the lines of text as they are visible on the viewport. Any idea what I could be doing wrong? Any help is much appreciated, Thank you!

See the Pen zYqzNqp?editors=1010 by zainny (@zainny) on CodePen

Link to comment
Share on other sites

If I understand your goal correctly, the problem is that you set position: absolute on the element you're pinning, so when ScrollTrigger adds extra padding to the bottom of it, that has no effect on the elements after it in the document flow. In other words, position: absolute takes it out of the document flow, thus its padding has no effect on things under it. 


Change to position: relative and the problem is solved (right?):

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


Also, you don't need toggleActions at all if you've got a scrub value. A ScrollTrigger's progress is either controlled by scrubbing OR toggleActions (it logically couldn't be both). It doesn't hurt anything to have those defined in there - I just wanted to point out that it's not doing anything. 


And you could make your code more concise by using a simple stagger:

tl.from(boxEls[0], {
  opacity: 0
}).from(boxEls[1], {
  opacity: 0
}).from(boxEls[2], {
  opacity: 0

tl.from(boxEls, {
  opacity: 0,
  stagger: 0.5

And you don't need this because ScrollTrigger automatically does it anyway:

window.addEventListener('resize', function() {
  anim.reset(); // and you're just calling ScrollTrigger.refresh() here (not needed)

Does that clear things up?


Happy tweening & scrolling!

  • Like 2
Link to comment
Share on other sites

Thank you @GreenSock! That cleared a lot of things. I did try combining the tweens with a staggerFrom but that didn't work. Thank you for showing me the right way.

I have a question if you don't mind answering. Is it possible to change the pinning element after a certain amount of tweens have animated in a timeline?

Link to comment
Share on other sites

On 8/30/2020 at 12:55 AM, zainy said:

Is it possible to change the pinning element after a certain amount of tweens have animated in a timeline?

I don't understand the question. Can you please elaborate? What exactly do you want to change about the pinning element? Are you saying you want to pin a different element after some tweens complete? If so, sure, just use a different ScrollTrigger. You can have as many ScrollTriggers on a page as you want. 


It is typically NOT a good idea to have nested ScrollTriggers inside of a timeline that has a ScrollTrigger. That's explained in the docs (bottom of the main ScrollTrigger page). There are much cleaner ways to accomplish things like that. 

  • 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.
  • Create New...