ScrollTrigger timeline does not work as expected

[azadsarxanli]

Hi! Have a good day! 
I know, there is a timeline property. But I'm just confused. My animation must be such:
the red circle's (".parent") rotation must be minus 90 degrees, and the first box's (".box1") className must be such: "box box1 active".

I' ve done it with toggleClassproperty, but it removes the className after animation end. But my purpose is, when rotation -90 done, then first box's className must be so: "box box1 active". After another scroll, the red circle's rotation must be minus - 180 degrees, then first box's className must be so: "box box1" and the second box's className must be: "box box2 active". and when another scroll Happens the red circle's rotation must be minus  270 degrees, box2 className must be: "box box2", and so...

But in my example, boxes dont follow the order.

See the Pen LYeQJog by azadsarxanli (@azadsarxanli) on CodePen

[azadsarxanli]

I've done it with hard-code  
My another question is: what is the efficient way to do this?

See the Pen VwyQEVL by azadsarxanli (@azadsarxanli) on CodePen

Edited April 6, 2022 by azadsarxanli
grammer

[OSUblake]

Here's another approach.

 

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

 

If you need more control over the classes or want to do an animation, look at the demo I posted in this thread.

 

 

 

[azadsarxanli]

edit: Fixed! 

 

 

Thank you! It works very well! I've another question: as you see, if client scrolls too fast, then he can't see the animation as expected, cuz everything happens too fast. What is the solution for this problem? What should I read for this or.

 

 

Edited April 7, 2022 by azadsarxanli
fixed

[Cassie]

Heya, you'll need to adjust the distance and spacing of the triggers so that the animation is spread over a longer scroll distance

 

Check out this answer...