Jump to content
Search Community

new random duration not affecting animation

antialias 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

Thanks for the demo.

 

When you create a tween it records a duration. When you update your timing value, the tween has no idea that is happening. It already has its duration.

Our video about invalidate() illustrates how pre-recorded values do not get updated when you change the values of variables that were initially used to create the tween. https://greensock.com/docs/TweenMax/invalidate

 

 

You can change the duration of a tween using the duration() method (if you have a reference to the tween: myTween.duration(6)) but since your tween is in a timeline, changing the duration of the tween for ".red" is NOT going to then move the position of the second tween in the timeline (".blue").

 

In this case I would suggest creating a new timeline when you need to change the duration. This can be handled with a function that you call whenever the duration should change

 

See the Pen eKWRLY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

for more info on functions that create and return timelines please read: https://css-tricks.com/writing-smarter-animation-code/

 

  • Like 4
Link to comment
Share on other sites

If you're just trying to randomly select a new x position from an array and tween there, I think this would be a much cleaner approach: 

 

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

(there's no need to keep a reference to the old tween, invalidate() it, and restart() it). 

 

But if you really need to reuse the same tween instance for some other reason, you could do this: 

 

See the Pen 15d9a2fd9cd939a2951d4c9cb7b0ab3a by GreenSock (@GreenSock) on CodePen

 

Does that help?

 

  • Like 3
Link to comment
Share on other sites

Thanks Jack! I should explain that I hope to use GSAP as the hub for a generative audiovisual piece that will run in the browser. GSAP would handle the tweening/easing between parameters in the audio machine (panning, pitch, and position within a sample, via howler.js) and scaling, rotations, texture fades for 3D objects via three.js.
It seems like putting the generative sequences in a timeline or multiple timelines is the way to go, and parts of this concept do work using GSAP, so that is hopeful.

As the generative piece runs it needs to pass randomly-chosen values into the timeline to create variation in the audio/visual parameters, and that's where I'm stuck. 

In lieu of creating a codepen here is a snippet of code that works to choose a playback speed(pitch) from an array, load it into the timeline, and play audio at the selected pitch:

==============

var rates1 = [3.0, 1.2, 2];
        
var index1 = 0;

var tl1 = new TimelineMax();

tl1.to(sounder, 2 , {rate:(rates1[index1])})  // this does get the howler object 'sounder' playing at 3x pitch, index 0 from the array

=============

 

What doesn't work is to have the timeline pick and load a new value from the array onRepeat:

var tl1 = new TimelineMax( {paused:false, repeat:-1, onRepeat:function (){ 
    index1 = (Math.floor((Math.random()*rates1.length)));
   });

=============

I have tried to get the timeline to invalidate/restart to trigger the array selection but no luck.

Any pointers appreciated!

Link to comment
Share on other sites

Hm, it looks like you're only updating a variable but that won't somehow change what was previously evaluated/declared in your tween vars object. That's unrelated to GSAP - it's just how JavaScript works. 

 

If you need it to be dynamic, you could use function-based values like this: 

 

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I leveraged a timeline just because it mimics what you said you're trying to do in your "real" project. 

  • Like 2
Link to comment
Share on other sites

Thanks Jack— I'm able to use this technique to choose playback speeds from an array and play them in the timeline. Progress!

I'd also like to get durations dynamically chosen in a similar manner if possible. Here's a code snippet of my attempt that doesn't work:

 

var xpos = [100, 200, 300, 400];
var index = 0;
 var durations = [3, 1, 2, 4, 5];
var indexdur = 3 ;

var tl = new TimelineMax({repeat:-1, onRepeat:function() {
  tl.invalidate();
}})

tl.to(".green", function() {
  indexdur = Math.floor( Math.random() * durations.length );

  return durations[indexdur];
}, {x:function() {
  index = Math.floor( Math.random() * xpos.length );
  console.log("index: " + index + ", x: " + xpos[index]);
  return xpos[index];
}});

Link to comment
Share on other sites

durations aren't function-based like that. If you have a reference to the tween, you can use its duration() method to change the duration.

 

However, if you have a timeline with 2 tweens

 

tl.to("a", 1, {x:200});

tl.to("b", 1, {x:200});

 

the 2 tweens will naturally play in direct succession.

 

If you change the duration of the first tween to be 2 seconds long (after the timeline is built), the second tween is NOT going to be moved to a startTime() of 2.

 

If you want to dynamically change durations and end values for the properties you are tweening, your best bet is to re-construct the timelines, as mentioned earlier we recommend you just use a function to that heavy lifting for you. 

 

 

 

 

 

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