JemimaK
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
Ripple effect with scaling of items on a list (e.g. a timeline)
in GSAP
Posted
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 eachitem
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 with0.3 * i
for each of theto
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 theyoyo
it goes weird as well. This is because therepeat:1
andyoyo
work together to mean the animation occurs once to move the item to theto
state, and again (due torepeat: 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