Jump to content
GreenSock

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

Run a Tween on classes but in random order

Go to solution Solved by PointC,

Recommended Posts

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

  • Solution

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.

:)


 

  • Like 4
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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

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.

:)

  • Thanks 1
Link to comment
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.
×