stagger effect like magic scroll?

[artstyle]

hey guys. i want to make an effect like in scrollmagic preview

i think i can use stagger for that but i cant make the letters go back to white. they all going to red only forward.

how can i make them go back to white? i want to highlight only 1 letter at once

[Richard1604]

Hello and welcome to the club.

Try reversing your timeline so that it plays backwards or even use the yoyo option.

It depends on the context but you might also use scrub if your animation is using scroll trigger.

perhaps you could post a codepen example of your animation so that we can see what you are doing.

 

 

[artstyle]

See the Pen poypLJq by aptypkaa (@aptypkaa) on CodePen

i want only one letter to change the font-size

[akapowl]

 

Hey @artstyle

 

 

On 9/7/2020 at 12:57 AM, artstyle said:

i want only one letter to change the font-size

 

You could add an extra class to the letter's div and only animate elements with that specific class

 

<div class="test animate">S</div>

 

section4tl2
  .to(".animate",{fontSize: "70px", color: "red", stagger: 1})
;

 

 

See the Pen 13d5ef34d7cab0f67814e35c967fe098 by akapowl (@akapowl) on CodePen

 

[artstyle]

@akapowl

i want each letter change font and then change back to normal on scroll and only 1 letter at once

[akapowl]

 

You do not mean staggered like this

 

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

 

but instead one complete animation after the other, like that

 

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

 

 

Did I understand you correctly this time @artstyle?

 

For the second case, I think, you'd have to use GSAP's utils.toArray functionality and create a 'grow and shrink' timeline for each letter on it's own, add each of these timelines to a larger timeline with an offset equal to the index of each element, and then use that timeline as the animation for your ScrollTrigger.

 

Does that make sense?

 

[artstyle]

the thing with subtimelines is something close to what i want but i thought there is an easier way to do this...

the point is i have a list of headings which i want to highlight at scroll(only 1 heading at time)...
i cant show you my example bcause its on local server but i think you understand

[akapowl]

 

Maybe something like this 

 

See the Pen 21b32f0bd91e3795a831604fe95f27f4 by akapowl (@akapowl) on CodePen

 

I got rid of the subTimelines and added an extra ScrollTrigger for each of the elements instead.

 

The Trigger outside of the utils.toArray only just pins the section now and the animations are handled individually inside of the several ScrollTriggers created for the headlines. That's because I thought for your scenario, you might want to get rid of the scrub.

 

 

I also set things up, so you can only change the totalDuration at the top of the script and everything below that, adjusts accordingly - makes it easier for you to play around with the desired total-duration.

 

 

 

Is this closer to what you need @artstyle?

 

 

[artstyle]

@akapowl

thanks mate thats very close to what i need. but it looks a bit complicated. i thought there is an easier way to do such animation