Jump to content
GreenSock

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

Is possible add multiple tweens using TweenLite

Recommended Posts

Hi, 

 

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

Hi, 

 

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

Hi,

 

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:

 

http://greensock.com/sequence-video

 

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:

 

http://greensock.com/position-parameter

 

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