Jump to content
GreenSock

azadsarxanli

ScrollTrigger timeline does not work as expected

Recommended Posts

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

Link to comment
Share on other sites

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

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

Edited by azadsarxanli
grammer
Link to comment
Share on other sites

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.

 

 

 

  • Like 3
Link to comment
Share on other sites

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 by azadsarxanli
fixed
Link to comment
Share on other sites

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...
 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×