Jump to content


Is possible add multiple tweens using TweenLite

Go to solution Solved by Diaco,

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 am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/


Here I see the play, pause reverse all the stuffs for tweenlite. 


So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). 


Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite.


When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. 


So, kindly help me, whether am doing the right thing or not.

See the Pen NPzmRJ by realdreamer (@realdreamer) on CodePen

Link to comment
Share on other sites

Hi realdreamer  :)


You should to use TimelineLite / Max to sequencing Tweens or define delay or onComplete or ( a complex function with onUpdate ) in Tweens Vars .

Link to comment
Share on other sites



Thank You for your quick response. 


Incase, if I am setting an delay for multiple tweens, Can I combine all these tweens in a single tweens object?. Like below.. 


var test;
test = TweenLite.from('h2', 1, { x: 150, opacity: 0 });
test.add(TweenLite.to('.box1', 1, { rotationY: '180deg', opacity: 1, x: '-30', delay: 2 }));
Link to comment
Share on other sites



In order to add to Diaco's advice, I'd suggest you to take a look at this blog post and the video Carl made:




For the type of work you're describing a Timeline instance is perfect and it'll simplify your work greatly. Presume that you have a complete sequence but you want to change the duration of the first animation, then you'll have to manually adjust the delay of every other instance after the one you're changing, see what I mean?. Timelines instances will do that for you automatically and you also have the position parameter to adjust things the way you feel is better:




Take a look at those and also keep in mind that the extra KB of loading TimelineLite in your page would be quite small (3 KB minified and GZIP), so even in a device that will load pretty fast.

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