Cannot get random y values to work

[Thomas James Thorstensson 21 Likes (Newbie)]

Hello fellow Green sockers!

 

Sorry for not providing a CodePen, up against it today.😅

 

I'm trying to get this to randomize;

.fromTo(".exclam", { y: 5 }, { duration: .2, y: gsap.utils.random(-5, 20), yoyo: true, repeat: 20}, "<")

But it is not working! It seems to stop at same value each time. I been away from the green a while and must be missing something obvious.

 

I've set repeatRefresh to true like so

  const tL = gsap.timeline({ repeatRefresh: true, defaults: { ease: "Circ.out", duration: 1 } });

Any help and I owe you a beer here in Barcelona, 🍺

 

Thanks, Thomas

[mvaneijgen 1,709 Likes (Superhero)]

Use a function based value 

 y: () => gsap.utils.random(-5, 20),

And if it is a timeline that gets invoked multiple times you can call `tL.restart().invalidate()` to invalidate the previous values. 

 

A minimal demo is always better,  then we can also test our own solutions and show you a working working code. All you need it a single div with the class .exclam, which could not cost more then 5 minutes to setup. But hope it helps and happy tweening! 

 

[Thomas James Thorstensson 21 Likes (Newbie)]

3 hours ago, mvaneijgen said:

Use a function based value 

 y: () => gsap.utils.random(-5, 20),

And if it is a timeline that gets invoked multiple times you can call `tL.restart().invalidate()` to invalidate the previous values. 

 

A minimal demo is always better,  then we can also test our own solutions and show you a working working code. All you need it a single div with the class .exclam, which could not cost more then 5 minutes to setup. But hope it helps and happy tweening! 

 

Thanks! As that did not change anything I will provide a demo tomorrow morning! But thanks for taking your time with the arrow call!

[GreenSock 18,567 Likes (Superhero)]

You don't have any "repeat" on your timeline, so repeatRefresh: true won't do anything there. In other words, that's not the thing that's repeating - your child tween is what's repeating, so that's where you need to set repeatRefresh: true. 

 

Also, you can tell the gsap.utils.random() to return a function by passing true as the 3rd parameter so there's no need to wrap it in a function (though that's totally fine). Here's a demo where I increased the random value and made it use x instead of y for ease of visualization:

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

 

Also, it's "circ.out", not "Circ.out".

[Thomas James Thorstensson 21 Likes (Newbie)]

14 hours ago, GreenSock said:

You don't have any "repeat" on your timeline, so repeatRefresh: true won't do anything there. In other words, that's not the thing that's repeating - your child tween is what's repeating, so that's where you need to set repeatRefresh: true. 

 

Also, you can tell the gsap.utils.random() to return a function by passing true as the 3rd parameter so there's no need to wrap it in a function (though that's totally fine). Here's a demo where I increased the random value and made it use x instead of y for ease of visualization:

 

 

 

Also, it's "circ.out", not "Circ.out".

 

---

 

Thanks Jack that fixed that! +1 Barcelona beer owed !

 

Thomas