Jump to content
Search Community

TimeLineMax Issue / Question

lostatoll test
Moderator Tag

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. 



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}));

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. 




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:





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