tweenmax How to twinkle stars in a random manner?

[DavidRizzo 2 Likes (Newbie)]

Hey everybody!

 

I've wanted to make this effect where I'm twinkling two stars, but as you can see in my embedded Codepen at the time of writing, I could only have them animate once at a time. 

 

I want to know if it's possible to have both of these objects animate in a manner which is a split second after each other, e.g. first star fades in and out and then the second star fades in and out, and repeat. Thanks.

See the Pen oeMreo by DavidRizzo (@DavidRizzo) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi @DavidRizzo

 

To randomize an animation, you can make a function to generate an animation with random values. When the animation completes, call that function again. Rinse and repeat.

 

I wasn't sure about the exact behavior you wanted, but check this out. The timeline automatically removes animations after they are done playing. When there are no more animations on the timeline, it will call the twinkleStars function again.

 

See the Pen rzZmYR?editors=0010 by osublake (@osublake) on CodePen

 

And here's a good thread about creating random values.

 

 

 

[DavidRizzo 2 Likes (Newbie)]

Hello @OSUblake, thanks for the reply and example. Much appreciated.

 

I see you added a class for each image, and used the query selector to call the class as a variable and connect it to a for loop. Fascinating. I'll definitely need to read more of how these Math.floor and random values work. Still need to brush up on those aspects in JS.

 

It's definitely close to what I had in mind, so thanks once again!