ScrollTrigger in combination with Stagger: Animate letters one by one

[Cas van Grunsven]

Hi!

I am trying to create a stagger effect with scrolltrigger. In the codepen you see that all words are wrapped inside a div as well as all separate letters. I have created a ScrollTrigger with a start and an end. In this ScrollTrigger, each letter should gradually get an opacity from 0.1 to 1 (as on https://www.studiogusto.com/)

 

At the moment, all letters are animation together, but they should be animating in sequence. Can someone help me out?

 

See the Pen PoyEmeY by casvangrunsven (@casvangrunsven) on CodePen

[Cas van Grunsven]

Already fixed, check this topic:

 

[Rodrigo]

Hi @Cas van Grunsven and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock!

 

It's great to hear that you were able to solve your issue. Just in case I forked your codepen (thanks for creating a minimal and simple demo, we love those around here 🥳)

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

 

Hopefully this helps. Let us know if you have any other question.

Happy Tweening!