Jump to content
Search Community

Change tween duration on the fly

damienmajer test
Moderator Tag

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

Hey,

 

When animating an unknown number of elements like so:

var timeline = new TimelineMax({repeat:-1}),
items = document.querySelectorAll('.item'),
startDuration = 20;


for(var i = 0; i < items.length; i++) {
  var myDelay = (i * 0.5);  
  animate(items[i], myDelay);  
}


function animate(item, delay) {
  var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 });
  timeline.add(a, delay);
}
 
What is the best way to modify the duration/speed of an individual tween?
 
Thanks
Link to comment
Share on other sites

Hi damienmajer :)

 

Welcome to the GreenSock forum.

 

I'm assuming you mean as part of the tween creation function so all the tweens aren't the same duration? If that's the case, I'd probably use a random number generator and use a min/max value:

function randomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

You could also create an array of durations if you want tight control and randomly pick one of those for each tween. 

 

Does that help?

 

Happy tweening.

:)

Link to comment
Share on other sites

Ha! I wondered if that's what you meant, but I wasn't quite sure. I had a 50/50 shot and I guessed wrong. :)

 

If you want to change one/any of those tweens you created, you can certainly do that. I think just adjusting the timeScale() would be the easiest way. I dropped your code into a quick demo with some boxes to show you how to do it:

 

See the Pen oZoBpj by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Great demo, Craig!

 

And in your example could I instead select box 3 via a class or data attribute? 

 

 

Take a look at TweenMax.getTweensOf()  if you pass in a selector like ".box3" it will return an array of all the tweens that use it as a target.

You could potentially need to loop through that array and change the timeScale() or duration() of multiple tweens.

  • Like 3
Link to comment
Share on other sites

In my demo I used item.anim as a name for the tweens so we could find them in the array and do something with the timeScale(). I was assuming they were identical so that would be the easiest way to get to them. But, as Carl mentioned, if all the items have some unique characteristic like a class, ID or data attribute, you can easily grab them via the getTweensOf() method. 

 

Here's a fork of my demo that also grabs the red and purple boxes via getTweensOf().

 

See the Pen BWmRYo by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

getTweensOf() returns an array of tweens :) Looks like you're trying to call restart() on the array object itself (bad). 

 

You could either loop through the elements of the array and call restart() on each one, or maybe drop them all into a timeline and just play. 

var tl = new TimelineLite();
tl.add(TweenMax.getTweensOf(path));

Does that help?

  • Like 1
Link to comment
Share on other sites

Assuming you just want to snap them back to their starting point quickly before changing the timeScale(), any of these should work too:

var p = TweenMax.getTweensOf(path);

TweenMax.set(p, {restart:true}) 
TweenMax.set(p, {progress:0}) 
TweenMax.set(p, {time:0}) 

Happy tweening.

:)

Link to comment
Share on other sites

  • 6 months later...

getTweensOf() returns an array. Your code sets p to an array with one item. You can set the progress of the first tween to 0 and pause it to reset it.

 

$('button').on('click', function(){
    var p = TweenMax.getTweensOf( $('.orbit1 .path') );
    p[0].progress(0).pause();
});

 

If you intend to control each orbiting ball on its own, I would recommend not putting them all in a timeline as the point of a timeline is to have everything perfectly synchronized. If you start telling the playheads of each child tweene to jump all over the place while the parent timeline is still progressing forward you will probably get undesired results.

 

  • 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.
×
×
  • Create New...