SVG Foreach random order

[Juc1 4 Likes (Newbie)]

Hi all,

 

My SVG flower classes animate in the order given by the HTML = pink, blue, red, purple - can anyone please tell me how I could say - animate in a random order each time the page is loaded eg blue first, next time red first etc

See the Pen QWGJNbx by Juc1 (@Juc1) on CodePen

[tailbreezy 214 Likes (Specialist)]

Hello,

 

You can use one of gsap utilities.

 

let flower = gsap.utils.toArray(".flower");
let shuffled = gsap.utils.shuffle(flower)
...

   shuffled.forEach(item => {
       let stempath = item.querySelector(".stem");
  ...

 

[Juc1 4 Likes (Newbie)]

@tailbreezy perfect thank you 👌

 

Just adding the link to the docs https://greensock.com/docs/v3/GSAP/UtilityMethods/shuffle()