Jump to content


Twinkling Stars

Moderator Tag

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

Hi guys,

I am trying to do the following in plain JS and am failing miserably:


0_ Dynamically create x amount of stars of an existing dom element

1_ Fill an area with randomly positioned stars (dots at this point)

2_ Then animate the alpha in and out at random times


Issue: The console log is not printing the generated random numbers for the index 


Thanks for your help!

See the Pen 31632d94b995ed3af8c5f917a69228c8 by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

Hi @dada78


Here's a demo that should help you out. Let me know if you need help understanding anything in there.


See the Pen PJJxJr by osublake (@osublake) on CodePen


  • Like 6
Link to comment
Share on other sites

Very nice Blake. :)


What's the advantage in creating the empty fragment and appending the stars to it and then the fragment to 'main'? My first instinct would have been to use .cloneNode() and append the stars directly into the 'main' element. 


I'm here to learn Professor Bowen.

  • Like 3
Link to comment
Share on other sites

Great question.


Appending a star directly to the main element will trigger a reflow. There are 300 stars, so appending them one at a time could trigger 300 reflows. That does not include any additional reflows or repaints that might be caused by changing the initial style for each star. By appending all the stars to a document fragment, modifying them on there, and then adding it to the main element will trigger only 1 reflow and repaint.


For that demo, the performance impact probably won't be noticeable because it only happens when the page loads, you can't scroll, see, or interact with anything else on the screen, and the star images are very lightweight.


Here's where I first learned about using fragments.



I was dealing with the same problems as the author. My SVG app ran like crap because of all <use> elements I was constantly adding and removing from the DOM. Moral of the story. Use document fragments whenever possible, and don't use <use> elements... like ever. I have officially renamed them <don't use> elements.


  • Like 6
Link to comment
Share on other sites

ahhh... makes complete sense. Thanks for the lesson. That slideshow is pretty educational. I've got that one bookmarked now.


Goodbye <use>. Hello createDocumentFragment().


  • Like 2
Link to comment
Share on other sites

Thanks @OSUblake,

I tried to make your example work with my initial codepen and forked the update here:

See the Pen 0e5f98812d7d45aa074880b569f39303 by dada78 (@dada78) on CodePen


However I feel like I am not fully understanding this line here, as it throws the following console error: Uncaught TypeError: Cannot read property 'cloneNode' of undefined


var index = random(textures.length)|0;
  var star = textures[index].cloneNode(true);


This is how I understand it: length returns the number of DOM elements in the textures variable or 0 and randomizes those. 

var star  holds the randomized array of the textures variable and clones each of the elements in the index and then appends it to the fragment we've created.


Is the issue happening because I only have one DOM element not various different ones like you?


Thanks for taking the time to explain.







Link to comment
Share on other sites

Hi @dada78


Correct. It's throwing the error because you only have 1 star.


I was lazy and did something else that might be confusing. The weird "|" pipe character in this code is just a quick way to floor a positive number.

// This...
var ease1 = eases[random(numAnimations)|0];

// ... is the same as this
var ease1 = eases[Math.floor(random(numAnimations))];


I changed them so they wouldn't confuse you.


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


  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@OSUblake you rock! Thanks so much! Continuing to learn something new one day at a time :-)

  • Like 1
Link to comment
Share on other sites



And you probably don't need to create 50 different animations or eases like I did. I used a RoughEase in that demo, but I totally forgot about CustomWiggle. You can create a similar effect using a random wiggle type.


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



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