Jump to content

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 have a TweenMax with a variable for the target. This target is the current element.


var currentElement = $("#div1");


The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change.


currentElement = $("#div2");




Target never changes on timeline repeat of the nested tween, even after redefining the variable.


I know that invalidate() works with changes in vars parameter, but it does not work with the target.




Is there any way to achieve the intended effect?


Any help much appreciated.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Thanks for using GSAP JS.


In short, no the target (object being tweened) of a tween is not dynamic. You could try tweening an empty element and then you could append your new element inside the original target but that could get a little hairy.


If you simply want to apply the same animation parameters to multiple objects and have them play in sequence (or overlapping), stagger() is great for that: http://www.greensock.com/jump-start-js/#stagger (TimelineLite and TimelineMax also have stagger() methods)


I suspect you have a more elaborate sequence going on. 


It sounds like you should be building new TimelineMaxes or clearing an existing one and re-populating it on each repeat. Being able to re-reuse the same timeline but dynamically switch around targets of various tweens is not something that can easily be supported.


If you can make a very small test case of the animation you need on codepen or jsfiddle we would love to help you find the best way to handle it.

  • Like 3
Link to comment
Share on other sites

Thank you for your reply, Carl.


A little more on what I'm trying to do:  I am cycling through several elements where sequentially one element fades out and the following element fades in. This cycle needs to be a continuous loop.


When I get some additional time, I will put together a test case in jsfiddle and share it.

Link to comment
Share on other sites

See the Pen agJkA by GreenSock (@GreenSock) on CodePen


Carl, thank you for the examples.  I like this one, but is there an easy way to make it seamless using the example code you provided here. With this one, the last box has to fade out completely before the animation starts again, whereas all boxes after the first overlap fades. This would be great if the repeat (first box) would would overlap the last one's fade so the looping is seamless.

Link to comment
Share on other sites

Since the timeline's playhead can only be at one position at a time, the end animation can't overlap with a beginning animation. Alas, there is room for some trickery.


After you create all the tweens in the timeline, place an additional tween at the end of the timeline that fades in the first item while the last item is fading out. When that animation is done you then jump back to the beginning of the timeline where the first item is fully faded in. 



var tl = new TimelineMax();

TweenLite.set(".box", {opacity:0});

$(".box").each(function(index, element){
  var position = (index == 0) ? 0 : "-=0.5";
 tl.add(TweenMax.to(element, 1, {opacity:1, repeat:1, repeatDelay:1, yoyo:true, ease:Linear.easeNone}), position);
//animate first box to opacity:1
tl.to($(".box").eq(0), 1, {opacity:1}, "-=0.5")
//jump to 1 second into timeline
.call(tl.seek, [1], tl)


See the Pen etsqA by GreenSock (@GreenSock) on CodePen

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