Names in Array Float Up Then Unload Off Screen

[PapaDeBeau]

Hi, Sorry for my simplicity in this question. I have been a paying member for YEARS now and I very rarely ask questions.  Anyway thanks for your patience.

 

Here is my goal. I want to load a list of hundreds of Names from a Database, maybe even over 1K or 2K.  Then I load them into jQuery Array. I want to have like maybe 10 or 20 names float from the bottom to the top. In short this is like a Memorial Wall of people who have passed away. We want to honor their life with music etc... 

I have code working but when its coded very poorly. When I get many names it CHUGS and STUTTERS  because it's creating huge amounts of DIVS and animating them all. This is bad I know.

I would like to, maybe, animate only 10 to 20 and then once off screen I would UNLOAD OR HIDE the div to free up resources. I would also like to maybe add a candle the is animated by the name as well. This would also take up huge resources if it was many names loaded.

  What is the best way to loop though hundreds maybe even thousands of names and not have to load them in all in one go.

 

Also, I would like the names to float up at various speeds as an option and would like them to be in random x positions as they go up. ANOTHER issue with my code is that sometimes the names are so long they go off the right side of the screen. They are not contained. 

 

I am guessing this is fairly simple, but gosh I just don't know how to do it. I Thank you in advance for helping me overcome this.

 

I put my example on CodePen with reloaded STATES as the names, but eventually those NAMES will be real names loaded from a Database. 

 

var W = $(window).width();
  var H = $(window).height();

  for (i = 0; i < Names.length; i++) {
    $(".P").append('<div class="C" >' + Names[i] + "</div>");
    var tl = gsap.timeline({ delay: 1 });
    var Mary = $(".C").width();
    gsap.fromTo(
      ".C",
      { y: H + 100, x: "random(0, " + W / 2 + ")", opacity: 0 },
      { y: -333, opacity: 1, duration: 14, stagger: 0.8 }
    );
  }

I didn't put the NAMES vars in this code above but I did in the working example in CodePen.
Thanks for your help.

The code is here: 

See the Pen LYBEjdb by PapaDeBeau (@PapaDeBeau) on CodePen

[Cassie]

Heya! It's juddering because you had your stagger tween set up inside a loop! Super easy mistake to make, but for every single name you were adding a tween that was staggering all the available items. Brutal!

 

Here's a refactored version, you shouldn't need to kill elements at the end, but you can if you want, I added that snippet too.

See the Pen vYaEaqG?editors=0010 by GreenSock (@GreenSock) on CodePen