Ripple effect with scaling of items on a list (e.g. a timeline)

[JemimaK]

Hi, I've been trying to learn GSAP and I am struggling to work out how to approach some animation. I've been through the beginner tutorials and quite a few of the Creative Coding Club courses (about half of the material beyond the free course), and have been looking in the forums. 

 

I have a dateline, which is an HTML list. I want to use ScrollTrigger to create a sort of ripple effect as the scroll occurs, with the highlighted date large, and the dates either side larger than the others, but smaller than the main one. I also want to target the date inside the highlighted timeline to make it bold. 

 

I have achieved close to this, but can't work out how to target the date element. 

 

I also have a feeling that I'm approaching this in a really complicated way - based on what I have seen, I have the instinct I'm missing something obvious, but I just can't see it. Am I? If so, how should I be approaching this? 

 

Many thanks in advance, and CodePen attached. 

See the Pen vYagLNJ by bojates (@bojates) on CodePen

[Rodrigo]

Hi @JemimaK and welcome to the GreenSock forums!

 

Indeed you might be overcomplicating this a little bit  

 

Maybe this approach is closer to what you're after (it's definitely simpler also):

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

 

I added a few extra styles to isolate the list. Also you'll see this commented-out line in the codepen:

// const itemsTl = gsap.timeline({ paused: true, repeat: -1, yoyo: true });

The reason for that is attached to a recommendation. Always create your animations first and then add or create a ScrollTrigger instance. Once the animation is doing exactly what you want, plug ScrollTrigger into the mix, otherwise ScrollTrigger adds an extra layer of work when your animation is not event working yet. Handle one thing at a time.

 

Hopefully this helps you getting started. Let us know if you have more questions.

 

Happy Tweening!

[JemimaK]

 

Many thanks for this. I had tried to make it without the scrolling element, but really struggled to understand how to. Your commented out line is really useful for understanding that a bit better. I had been confused when I tried to do that because all the items ended up in the to state, and so I couldn't see how that would work when I then added in scrolling. 

 

Can I please check I'm understanding how it's working? The to for each item is doing the work of scaling it, but the clever bit that I completely didn't think of is to do with the timing, which is being set with 0.3 * i for each of the to commands. (As I understand, these values are absolute, and a similar timing could be reached by putting "< 0.3" in here.) This is causing an overlap in the animations. 

 

Then, adding the scroll in, the default duration relates to the value of overlap that we're using. If the default duration was 0.3, we'd get no overlap and no ripple effect, and if the default duration was, e.g., 1 we'd get overlap into more items. I've tested this and this is what occurs. 

 

The repeat: 1 is also crucial. If I take that out, the items don't fade away. And if I take out the yoyo it goes weird as well. This is because the repeat:1 and yoyo work together to mean the animation occurs once to move the item to the to state, and again (due to repeat: 1) to move it back to the original state (yoyo tells it to do a reversal, rather than repeat from the start again). 

 

I've also managed to target the individual span inside each line by using gsap.utils.selector, and worked out how to leave the last item in its animated state at the end of the scroll, which gives a more natural effect for what I'm after (commented out in my new CodePen, but there if anyone else wants it). 

 

Thanks for your help! 

 

See the Pen GRBmpLq by bojates (@bojates) on CodePen

 

[Rodrigo]

4 hours ago, JemimaK said:

Can I please check I'm understanding how it's working? The to for each item is doing the work of scaling it, but the clever bit that I completely didn't think of is to do with the timing, which is being set with 0.3 * i for each of the to commands. (As I understand, these values are absolute, and a similar timing could be reached by putting "< 0.3" in here.) This is causing an overlap in the animations. 

Yeah, the overlapping has to be half of the duration of each item's animation, like that you'll always get the feeling that only three elements (previous, current and next) are being animated as you scroll.  Keep in mind that in the case of ScrollTrigger based animations the duration is pretty much useless, unless you have a scenario like this where you need some specific overlap between animations. Take a look at this video and hopefully you'll get the gist of it:

Let us know if you have more questions.

 

Happy Tweening!