Jump to content
Search Community

Struggling with random duration

wuergeengel test
Moderator Tag

Recommended Posts

Hi, I am new to Greensock and I really love it so far!

 

Today I was struggling with setting a random duration on a tween or timeline object. I created a helper function that returned a random value for the duration. In the tween properties I called the function on the duration property. However, the random value only was set once and the function was never called afterwards, although the animation was infinite by setting repeat: -1.

 

I found the property repeatRefresh, but the docs say: 

Quote

duration and delay do NOT refresh.

 

What am I doing wrong and how can I set dynamic values for duration or delay for each new repetition of my animation? Thanks for some hints in advance!

Link to comment
Share on other sites

@wuergeengel welcome ! I too love Greensock 💚🧦

 

If you ever have issues I would try to put together a codepen and ask your question with it attached at the bottom. This helps the others help you better.

 

So I was curiously about this my self just had not had a chance to tinker with it.  After almost nuking my browser twice in crazy loops I think I maybe narrowed it down a little bit but have to stop here for now. I am hoping one the pro's jumps in with a better solution, cause I don't think this is the way. 

 

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

  • Like 3
Link to comment
Share on other sites

Yep, @mikel is using the approach I typically do for something like this. There are actually a bunch of ways to accomplish this. The gist is: 

function animate() {
  gsap.to(".class", {
    ...
    duration: gsap.utils.random(0.5, 3), // random number between 0.5 and 3
    onComplete: animate // this is what does the infinite loop
  });
}
animate(); // kick it off

In the upcoming release of 3.4.0, you'll be able to do this instead: 

gsap.to(".class", {
  ...
  duration: gsap.utils.random(0.5, 3),
  repeat: -1,
  onRepeat: function() {
    this.duration( gsap.utils.random(0.5, 3) ); 
  }
});

(not that it's any better - just an alternative)

 

By the way, @b1Mind, I hope you don't mind me pointing out a few things with your code...

  1. You almost never need to wrap your CSS-related values in a css:{} object. GSAP is smart enough to figure that stuff out these days and it tends to make your code less readable. 
  2. Timelines can't have a duration set via the vars. They just conform to however long their children are. Think of timelines like wrappers around tweens. So if you shove a 10-second tween into a fresh timeline, that timeline will have a duration of 10 seconds. Add another 5-second tween to the end, and it's now 15 seconds. If you set the duration via the setter method like timeline.duration(5), that merely alters the timeScale accordingly. 
  3. You don't need to do something like Math.floor(Math.random() * 100) - you can tap into GSAP's utility method like gsap.utils.random(0, 100, 1)
  4. To get a random color, you could tap into GSAP's inline random capability (it'll search inside strings for "random(...)" and swap in values), like: color: "rgb(random(0,255,1), random(0,255,1), random(0,255,1))"

Happy tweening!

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

@GreenSock No ofc not,  I welcome it!

 

 

So I kinda understood that already about Timelines. Not sure what I was doing there, at one point I had it as a .from and a .to with different durs and lastColor... hence the timeline vs a tween. 😵🥴 lol.  --edit: I am still really grasping when to use the different tween types better. Now I realize I don't need the .from at all because gsap always tweens the current style of the element (which was changed by gsap already from the last tween in the "loop"). (whats odd is that what is making the function run? just noticed I had deleted the invoke ... so some how its calling the onRepeat, without the duration in the timeline it breaks... heh)

 

There is def some Greeny ways I need to pick up on ;)

 

Forked my pen going to go crazy later with you and Mikels examples. I will update this post with a new pen after I play some cause that looks like fun. 👍

 

Seriously makes life simple... and after the 3.4.0 update look like its even easier .... just too cool 😎

 

See the Pen JjGLbjK by b1m1nd (@b1m1nd) on CodePen

  • Like 3
Link to comment
Share on other sites

Hey, y'all! Thanks for your warm welcome! I am impressed how responsive and nice this community is – I really appreciate all of this!

Sorry, for the missing Codepen. I use a complex SVG in a Vue component and had to figure out how to recreate it there.

@GreenSock Thanks for your minimal example – this really helped me out and now it works (I extracted just one element from the big SVG): 

See the Pen f9416f989595d4284e7b6f5c99dc526d by wuergeengel (@wuergeengel) on CodePen

 

Quote

In the upcoming release of 3.4.0, you'll be able to do this instead (…)

When will you release 3.4.0 – is there already a date?

Cheers!

Link to comment
Share on other sites

5 minutes ago, wuergeengel said:

When will you release 3.4.0 – is there already a date?

It will likely be released some time this week or soon after.

 

4 minutes ago, wuergeengel said:

I use a high-performance Macbook Pro. And still, the bee seems a bit "jittery" – am I doing something wrong or could I improve something?

I don't see jitter on my Macbook Pro. However, you could improve the performance still. Check out this article for performance tips related to SVG. Since you're not animating any elements inside of the SVG I'd use a regular img element. Avoiding the use of clip-path might help as well.

  • Like 3
Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

It will likely be released some time this week or soon after.

 

I don't see jitter on my Macbook Pro. However, you could improve the performance still. Check out this article for performance tips related to SVG. Since you're not animating any elements inside of the SVG I'd use a regular img element. Avoiding the use of clip-path might help as well.

I have to use a regular SVG element, my example is just an extraction, I have a lot of <g> elements that I will animate. I will also animate the wings of the bee, for example.

The clip-path thing – I got this SVG from a designer. Is there a tool to improve this? I just know https://jakearchibald.github.io/svgomg/ and didn't manage to find this option there.

Link to comment
Share on other sites

14 minutes ago, wuergeengel said:

The clip-path thing – I got this SVG from a designer. Is there a tool to improve this? I just know https://jakearchibald.github.io/svgomg/ and didn't manage to find this option there.

Moving away from clip paths usually requires that the SVG be edited in a vector editor to remove the need of the clip paths. 

 

Like I said, I don't see jitter. The clip paths likely only has a small effect on the total performance. If there is only jitter in the full page then it's likely something else that's being animated (like a filter or gradients - see the performance article I linked to for more info).

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...
On 7/7/2020 at 2:58 PM, wuergeengel said:

I will also animate the wings of the bee, for example.

 

Hhmmm - I remember a fly.
Here a little revised and updated to GSAP3.0.

 

See the Pen rNxddjz by mikeK (@mikeK) on CodePen

 

Hey @GreenSock: Can you combine repeatRefresh and onRepeat / function?

 

See the Pen MWKNLVX?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy weekend ...

Mikel

Link to comment
Share on other sites

On 8/2/2020 at 5:56 AM, mikel said:

Hey @GreenSock: Can you combine repeatRefresh and onRepeat / function?

 

That's pretty tricky because imagine what would happen with where the playhead is lined up on the parent timeline - when you alter the duration, it changes the entire totalDuration. A simple example: a 1-second tween that repeats 5 times (so let's say it goes from a time of 0 to 5 on the parent timeline)...at the first repeat, the parent timeline's playhead is at 1 second, but if you change the duration to 0.4, suddenly that tween shrinks to take up 0-2 seconds on the parent timeline. If the parent timeline's playhead is located at 1 second, now that lines up with halfway through the second iteration! That's why you're seeing the jumping. 

 

I just spent several hours tweaking the core, though, to make this sort of thing possible as long as you set smoothChildTiming: true on the timeline(s). In your example, you'd need to set that on both the master timeline and the sub-timeline. 

 

Here's a fork of your demo: 

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

 

Good? 

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