Jump to content
Search Community

Stepping timeline and running/stopping a "free" yoyo?

Peach2tm test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Am I doing this correct - or is there a better way?

 

I have this Timeline which is stepped by clicking ">".

 

The following is what i would like to have happen:

  1. Click ">" to start TL: Box 1 moves up and starts yoyo'ing
  2. Timeline pauses but Box 1 keeps yoyo'ing
  3. Click ">" to start TL again: Box 2 moves up and the yoyo stops
  4. Timeline pauses
  5. Click ">" to start TL: Box 3 moves up and Box 1 starts yoyo'ing
  6. Timeline pauses but Box 1 keeps yoyo'ing

 

I've put the start and stop yoyo on a separate TL. Is this how you would do it?

 

 

 

See the Pen KKmddQR by anders-wibroe (@anders-wibroe) on CodePen

Link to comment
Share on other sites

@Cassie

 

Thx for your replies. Great input!

 

One thing I can't figure out is why y: (or translateY for that matter) works the way it works in this example:

See the Pen ExmvjjZ by anders-wibroe (@anders-wibroe) on CodePen

 

I'll admit, I'm pretty new to css transforms, but it seems that setting y: is relative to the elements original position and not it's current. As you can see in the example the box moves from y=200 to y=100 and then starts yoyoing between y=100 and y=300 as the yoyo's y:-100 seems to be from the elements starting position.

 

Is there anyway to make the yoyo's y:-100 based on the elements current position - or should i simply use top: and then calculate the offset?

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.
×
×
  • Create New...