jonForum Posted December 9, 2019 Share Posted December 9, 2019 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 Link to comment Share on other sites More sharing options...
OSUblake Posted December 9, 2019 Share Posted December 9, 2019 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); 4 Link to comment Share on other sites More sharing options...
jonForum Posted December 9, 2019 Author Share Posted December 9, 2019 Hey @OSUblake thanks you so much for this example and your time, your awesome. this help a lot 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 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 }); 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2019 Share Posted December 11, 2019 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 2 Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now