Lark Posted November 28, 2021 Share Posted November 28, 2021 Hello my friends, I would like to run a simple "fade in" tween (like in the CodePen) on a series of boxes. My code is exactly as appears in the CodePen, but this obviously runs sequentially. I would like to have the boxes appear in random order every time. I also tried a loop I saw elsewhere on the forums, with running from 0 to the number of elements, but this still runs sequentially unless I randomize the numbers myself, (i.e. literally make an array of 0 to n but in randomorder , then loop over that). How should I go about doing this? See the Pen wvrwyop by LarkRanger (@LarkRanger) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted November 28, 2021 Solution Share Posted November 28, 2021 Please give this a whirl. gsap.fromTo( ".box", { opacity: 0, scale: 1.2 }, { opacity: 1, scale: 1, duration: 0.1, stagger: { each: 0.2, from: "random" } } ); Happy tweening. 4 Link to comment Share on other sites More sharing options...
PointC Posted November 28, 2021 Share Posted November 28, 2021 PS I'd be remiss if I didn't also mention one of the GSAP helper functions. Your demo above works well with a random stagger, but if you need to loop through an array and randomly pluck elements until it's empty, give this a try. https://greensock.com/docs/v3/HelperFunctions#random-array Happy tweening. 2 Link to comment Share on other sites More sharing options...
Lark Posted November 29, 2021 Author Share Posted November 29, 2021 Thank you so much, this was perfect! I couldn't find there parameters in the docs, perhaps I missed them. Link to comment Share on other sites More sharing options...
PointC Posted November 29, 2021 Share Posted November 29, 2021 Happy to help. 7 hours ago, Lark said: I couldn't find there parameters in the docs, perhaps I missed them. Yep - it's in the stagger docs down in the grid of special properties. The interactive demo also has an option for it. https://greensock.com/docs/v3/Staggers Happy tweening. 1 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