Jump to content

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

How to twinkle stars in a random manner?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.




  • Like 4
Link to comment
Share on other sites

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! :)

  • Like 2
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.