solved random radius on staggerTo yoyo

[jonForum]

Hey any tips or suggest to perform a kind of reel infinite random motions?
I find my approach too redundant.

 

Example on text matrix?
I get a random behavior, but alway same from looping !

 

 

this is currently the code

    startMotion(){
        const List = this.child.Master.children; //words
        //!motions words
        if('option motions words'){
            gsap.staggerFromTo(List, 0.5, {alpha:0},{alpha:1, ease: Power1.easeIn}, 0.4);
            gsap.staggerTo(List, 4, {
                x:()=>`+=${Math.randomFrom(4,-8)}`,
                y:()=>`+=${Math.randomFrom(7,-10)}`, 
                ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2);
        };
    };

What i would like it a way to compute a random range from a radius ? but alway random after loop cycle.
Do gsap have a native easy feature to perform this?
suggest welcome
 

 

 

[OSUblake]

In gsap 3, you can do this for random.

gsap.staggerTo(List, 4, {
  x: "random(4,-8)",
  y: "random(7,-10)",
  ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2);

 

There are also random utils.

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

I like to animate x and y independent of each other.

See the Pen 594dc89e6a43b2fc21a38f2052470614 by osublake (@osublake) on CodePen.

 

 

 

@GreenSock This syntax taken from the docs isn't working. I have to enter a snap increment for it to work.

 

var random = gsap.utils.random(-10, 50, true);

 

[jonForum]

Hey @OSUblake thanks you so much for this example and your time, your awesome.
this help a lot

[ZachSaucier]

In GSAP 3 it's best to not use the old staggerTo methods. All tweens have the ability to stagger! This is the same thing that Blake posted in all-GSAP 3 recommended ways:

gsap.to(List, {
  duration: 4, 
  x: "random(4,-8)",
  y: "random(7,-10)",
  ease: "power1.inOut", 
  repeat: -1, 
  yoyo: true,
  stagger: 0.2
});

 

[GreenSock]

On 12/8/2019 at 11:54 PM, OSUblake said:

@GreenSock This syntax taken from the docs isn't working. I have to enter a snap increment for it to work.

 

Good catch. Should be resolved in the next release: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

[OSUblake]

I forgot about computed property names. Here's another version of my animation using a single function.

 

See the Pen a0eeae71974a4d17afdc41a7147576ee by osublake (@osublake) on CodePen.