Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lostatoll

TimeLineMax Issue / Question

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm probably missing something big, but I thought I could take my tweens and just put them in a timelinemax. 

 

regular:

weenMax.to(".primary-tl", .3, {top:"-=14px", left:"-=14px", ease: Quad.easeIn});
        TweenMax.to(".primary-br", .3, {bottom:"-=14px", right:"-=14px", ease:Quad.easeIn});
        TweenMax.to(".primary-tl", 1.8, {top:"-=200px", left:"-=1200px", rotation:"-50deg", ease: Quad.easeOut, delay:.3});
        TweenMax.to(".primary-br", 1.8, {bottom:"-=200px", right:"-=1200px", rotation:"-50deg", ease:Quad.easeOut, delay:.3, onComplete:closeGates});
gates.add(TweenMax.to(".primary-tl", .3, {top:"-=14px", left:"-=14px", ease: Quad.easeIn}));
        gates.add(TweenMax.to(".primary-br", .3, {bottom:"-=14px", right:"-=14px", ease:Quad.easeIn}, -.3));
        gates.add(TweenMax.to(".primary-tl", 1.8, {top:"-=200px", left:"-=1200px", rotation:"-50deg", ease: Quad.easeOut}));
        gates.add(TweenMax.to(".primary-br", 1.8, {bottom:"-=200px", right:"-=1200px", rotation:"-50deg", ease:Quad.easeOut}));
        
        gates.play();

Now i haven't done the timing yet, it's not about lining that up. The problem is they run fine and smooth regular, but as soon as i put them in a timeline they dont' animate at all.. they just jump to the final positions. 

 

help?

 

Link to comment
Share on other sites

nevermind, i am a fool and didn't have it paused at creation. sorry for the wasted post. 

 

gates = new TimelineMax({paused: true});

Link to comment
Share on other sites

No problem. Glad you figured it out.

 

Just a tip: You only need to use add() when you want to add a TweenMax, label, callback, or timeline to a timeline.

 

It appears none of your tweens repeat so you can use TimelineLite's to() method:

 

 

gates.to(".primary-tl", .3, {top:"-=14px", left:"-=14px", ease: Quad.easeIn})
.to(".primary-br", .3, {bottom:"-=14px", right:"-=14px", ease:Quad.easeIn}, -.3)
.to(".primary-tl", 1.8, {top:"-=200px", left:"-=1200px", rotation:"-50deg", ease: Quad.easeOut})
.to(".primary-br", 1.8, {bottom:"-=200px", right:"-=1200px", rotation:"-50deg", ease:Quad.easeOut});

notice that each .to() method is chained together.

 

I think you will really enjoy and learn a lot from this new video:

http://www.greensock.com/sequence-video/

 

 

 

Link to comment
Share on other sites

Just to clarify, the to() method creates a TweenLite.to() tween for you behind the scenes.

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