Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonForum

random radius on staggerTo yoyo

Recommended Posts

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 !

 

uHCq9Apk_o.gif

 

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 :)
 

 

 

Share this post


Link to post
Share on other sites

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);

 

  • Like 4

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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
});

 

  • Like 1
  • Thanks 1

Share this post


Link to post
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.

×