wiggle / vibrate effect using gsap.utils.random

[eden]

Hi

 

I was wondering if i could create an infinite wiggle effect using gasp.utils.random, but the problem is that upon repeat the random durection dosnt refresh.

I gues it worked only on load. Is there any chance we can force it to generate new direction upon timelne repeat or using parameter repeat:-1 ?

 

 

    .to(myTextField, {duration: .2, x: "+="+gsap.utils.random(-30, 30, true)(), y: "+="+gsap.utils.random(-30, 30, true)(), repeat:1, yoyo:true, ease: "rough"})

[geedix]

Hi Eden,

Yes, by default the timeline will repeat using the random values it finds on its first play, unless you add repeatRefresh=true.
I think this will keep your rough ease looking random on each repeat, too. 

See the Pen zYXBNvL by geedix (@geedix) on CodePen

[eden]

Hi geedix 

Thanks for reply.

Confirming that repeatRefresh: true parameter does work ! Thanks !.

 

 

 

 Can add an interesting case about it. I remember trying this parameter before, but didn't work back than. 

 

Turns out that this works: 

.to(txt1, { duration: 0.2,  x: gsap.utils.random(-30, 30, true),  y: gsap.utils.random(-30, 30, true), ease: "rough"});

 

But a relative position does not. (no new randoms values upon repeat even with refresh parameter)

.to(txt1, { duration: 0.2,  x: "+="+gsap.utils.random(-30, 30, true)(), y: "+="+gsap.utils.random(-30, 30, true)(), ease: "rough"});

 

Could this be a bug?.

[GreenSock]

No, that's not a bug because in your non-working example, you're executing the random function ONCE and baking that into the string which is what's used in the tween. Think of it like this: 

// bad
x: "+=10.2142" // the result of "+=" + gsap.utils.random(...)

// good
x: () => gsap.utils.random(...) // the randomizing function gets called every refresh

It's just a logic/JavaScript thing, unrelated to GSAP.