Jump to content
GreenSock

court

continue tweening while other tweens

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

In this example: 

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

I need the red and blue to continue repeating without having to wait for the yellow to end, any recommendations?

thanks all

Link to comment
Share on other sites

Hi Court,

 

In this case you'll have to switch all your tweens to TweenMax instances, and instead of repeating the parent timeline you'll have to repeat the nested instances, like this:

function group() {
  var tl = new TimelineLite();
  var time = 2.5;
  var redBox = DocById("redBox");
  var blueBox = DocById("blueBox");
  var yellowBox = DocById("yellowBox");


  tl.add(TweenMax.to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  tl.add(TweenMax.to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  
  tl.add(TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),1);
}

Another possibility is to create two timelines, a parent one one that contains the red and blue squares' animations and an individual tween instances for the yellow one:

function group() {
  var parentTl = new TimelineLite(),
      time = 2.5,
      redBox = DocById("redBox"),
      blueBox = DocById("blueBox"),
      nestedTl = new TimelineMax({repeat:-1}),
      yellowBox = DocById("yellowBox"),
      yellowTween = TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 });

nestedTl
  .to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0)
  .to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0);

//add the timeline and the tween as an array
//by default when adding an array to a timeline
//all the array's elements are added to the end of the timeline
//in this case at zero seconds.
parentTl.add([nestedTl, yellowTween]);
}

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi Court,

 

In this case you'll have to switch all your tweens to TweenMax instances, and instead of repeating the parent timeline you'll have to repeat the nested instances, like this:

function group() {
  var tl = new TimelineLite();
  var time = 2.5;
  var redBox = DocById("redBox");
  var blueBox = DocById("blueBox");
  var yellowBox = DocById("yellowBox");


  tl.add(TweenMax.to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  tl.add(TweenMax.to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  
  tl.add(TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),1);
}

Another possibility is to create two timelines, a parent one one that contains the red and blue squares' animations and an individual tween instances for the yellow one:

function group() {
  var parentTl = new TimelineLite(),
      time = 2.5,
      redBox = DocById("redBox"),
      blueBox = DocById("blueBox"),
      nestedTl = new TimelineMax({repeat:-1}),
      yellowBox = DocById("yellowBox"),
      yellowTween = TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 });

nestedTl
  .to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0)
  .to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0);

//add the timeline and the tween as an array
//by default when adding an array to a timeline
//all the array's elements are added to the end of the timeline
//in this case at zero seconds.
parentTl.add([nestedTl, yellowTween]);
}

Rodrigo.

Do you have to declare the tl as new TimelineLite(); or can I still use new TimelineMax

 

ty

EDIT: was able to get it to work, just had some syntax issue, thanks!

Link to comment
Share on other sites

No, there's no need to use TimelineLite. The only benefit is that, since TimelineLite doesn't have some methods is a little bit faster in terms of code execution, but unless you're creating thousands of instances you wont notice the difference.

 

Carl and Jack have recommended as a best practice to use the Lite instances unless some of the methods present in the Max ones are required. In my samples you'll always find TweenMax.Min.js loaded, but that's me being lazy, but in production code I always use TweenLite, CSSPlugin and other plugin if necessary.

 

You could also strip from TweenMax.js whatever you don't need and then compress it, just be careful with what you remove.

 

Rodrigo.

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