Multiple Instances of GSAP on Webpage

[MemeMaker]

I want to instantiate multiple instances of a GSAP player (as in the attached codepen) work on a single web page, but without loading multiple scripts for each player. I'm struggling to conceptualize what I need to do.

Should I rewrite this function as a constructor? If so, are there GSAP examples of this?

Is this where reactive frameworks shine? I just want to make something simple with bootstrap if possible. 

See the Pen LJRyXG by bugszomfg (@bugszomfg) on CodePen

[Dipscom]

Hey MemeMaker,

 

Yes it is possible to have multiple things being animated with GSAP. And yes, you got it right, you would want to create a constructor function that would take some params.

 

Here's a Pen I made ages ago where one function creates different "views" - It's a bit complex but don't let it detain you, just go ahead and try creating the constructor function yourself, we can help you if you get stuck in the way.

 

See the Pen PmywQb by dipscom (@dipscom) on CodePen

 

[MemeMaker]

Thank you. Game on! 

I'm just trying to get better at JS and GSAP so I can help my wife out with her art/animations. No real time frame. I like to wakeup each day with a small problem to solve. I get logic, but my current JS strategy is like playing golf with just a sandwedge. Sure, you can finish the game, but it will be slow, nonsensical, and excruciating.  All of this ES6 stuff with arrow functions breaks my brain.

[Dipscom]

4 minutes ago, MemeMaker said:

All of this ES6 stuff with arrow functions breaks my brain.

 

Yep, it does. It hurts until one day, it doesn't. I was struggling with arrow functions myself for a long while. Now I get them. So, now I am struggling with async/await. There's no end to the pain.

 

Let us play this golf with a sandwedge, as we go along we'll pick bits and bobs, make a club. Before you realise it, you'll be swinging for birdies.

 

[MemeMaker]

Took me about 20 minutes to figure it out when I had time. It's dead simple. Of course writing things from the beginning for a constructor is best. I have a bad habit of making everything an ID when I'm donking around on the frontend. Now I've learned about nth child selectors and other things for scaling. The following is by no means good code, but I accomplished the basic goal of just instantiating new players. I changed everything to classes and passed though a hardcoded ID.

I know it gets more complex, but I get it now. I can get rid of the hardcoding with jQuery and/or getters for a database of the sprite sheets so I'm not manually pasting URLs all day etc...
 

See the Pen LJedbW by bugszomfg (@bugszomfg) on CodePen