Jump to content
Search Community

Animate Delay Then Animate Again

michaelsboost test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I was playing with the TimelineLite Visualizer demo and ended up having a thought. 

Is it possible to animate the #green square by the x coordinate delay for 1 second and then rotate it showing on the timeline?

 

Example screenshot (edited to show example result)

image.png

 

Ideally the animation would go back like this except not only does the green animation not go back but it's not even visual on the timeline .

 

tl.to("#green",  1, {x:750}, 0)
  .to("#green",  1, {x:0}, 2)

 

See the Pen 50c3998d322a4d9ef779a635b1df0d35 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I learned how to control it using the position parameter. Just not showing the other animation come back....

 

Insert exactly 3 seconds from the start of the timelinetl.to(".class", {x: 100}, 3)

 

My problem is showing that animation come back.

Ideally like this......

 

var tl = new TimelineLite({paused: true})
tl.to("#green",  1, {x:750}, 0)
  .to("#green",  1, {x:0}, 2)
  .to("#blue",   2, {x:750, rotation:360}, 1)
  .to("#orange", 2, {x:750, rotation:360}, 2);

 

  • Like 1
Link to comment
Share on other sites

  • Solution
45 minutes ago, michaelsboost said:

My problem is showing that animation come back.

 

That demo is really old, and is not meant to be an accurate representation of a timeline. It was for a video just to explain some concepts. Most of the stuff in there is hard coded. Just comment out the all the JS all you will see.

 

 

  • Like 6
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...