Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Zahir Rafiq

In whatever order

Recommended Posts

Hi forum,

I'm almost there with this project, it works fine when you click in the order from green, red and blue, but the problem is when you click in a different colour sequence , such as blue, red and green the animation does not function correctly. 


Essentially all I want is  for the  user to navigate through the animations in whatever order. 


I really appreciated your help last time.



See the Pen VwYxYgL by AlphaArt (@AlphaArt) on CodePen

Link to post
Share on other sites

Hi @Zahir Rafiq


The problem is in each of your click events, you're only accounting for one other color's timeline to have been played when either of the two other colors' timeline could have a progress greater than 0. For example, your green click event only looks to see if the red timeline has a progress value ... it doesn't check if blue does.


Have a look at this codepen to see how I've addressed that. Now ... this works well for a few colors. If we were allowing for this on something like 10 colors ... of course this way would quickly get out of control and we would want to abstract that away somehow.


See the Pen MWYGXaq?editors=0010 by sgorneau (@sgorneau) on CodePen


Happy tweening!




  • Like 4
Link to post
Share on other sites

Hey @Zahir Rafiq,


Another concept.


See the Pen abzGjJJ by mikeK (@mikeK) on CodePen


The first run (Rerun codePen) is sometimes not as expected. I do not know why.


Happy tweening ...




  • Like 1
Link to post
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.