Jump to content

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

Object tweens simultaneously / chain events

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

Hi everyone,


I am new to using GSAP, but have used (the timeline) in Flash heavily. I've read the documentation and tried to follow it.


For my first project using GSAP, I built a small banner ad to test some of the functionalities. It can be seen here: 


As for now, I have some questions about my code:



1. (How) can I chain the .set into one large string (so that they are all set at once)?

   For example: 
TweenLite.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0});

Is this even possible?




2. I would like to move the #box, #shadow, #pack and #line simultaneously to the left, but in the code provided the animations start when the one before is finished... How can I fix this? Is it possible to be chained as well?

        tl.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});

3. If you have any other remarks, tips, optimisations or observations about my code, don't hesitate to give me a heads up!



Thanks in advance for all your (kind) help!

See the Pen bEBxBB by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi syntaxReflex  :),


Welcome to the forums.


You can chain those sets() as part of a Timeline, but I don't think you can do it the way you have it there. I'm sure I'll be corrected if I'm wrong. This will work though:

tl = new TimelineMax();
tl.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0});

You can also set multiple targets if you're setting the same properties by putting the targets into an array like this:

TweenLite.set([target1,target2], {autoAlpha:0});

Part 2 of your question - labels are your friend. For a complete understanding of labels and the position parameter, check out Carl's video:



Hopefully this helps a bit. Happy tweening. :)

  • Like 3
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Thanks for providing the demo. Very helpful.


The secret to gaining control of your timing in your timeline is in the position parameter.


Please watch / read: https://greensock.com/sequence-video and http://greensock.com/position-parameter 


In your case just use a label. I chose to name it "end". 

.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}, "end")
.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}, "end")
.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}, "end")
.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}, "end")
TweenLite.set() can not be chained. There is no shortcut to what you are doing. (edit: as PointC pointed out, using set() in the timeline will allow chaining)
As you will see in the revised CodePen above, the TimelineLite methods of to(), from(), staggerFrom() etc can be chained. 
  • Like 2
Link to comment
Share on other sites

PointC wins!   :-P

  • Like 4
Link to comment
Share on other sites

Thanks Carl and PointC for your great help. I will have a closer look at your code and the videos you posted.

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.