Timeline management advice

[Josh Dillon]

Hi all,

 

I've been working with GSAP for a little while now, but mostly create fairly simple demos on codepen for animating radio buttons or custom navigation elements. Recently I've been trying to create more complex animations and I'm looking for advice on a good approach to handling timeline management. Here is WIP of a custom radio button that has timeline for each element's animation:

 

Currently only the hover state animations are implemented so I could see this getting out of hand as I add more timelines for other states. Any advice on how to handle this? Is it considered good practice to separate timelines like this?

 

 

Edit: It looks like links to pens using the new codepen 2.0 editor 404, links to classic pens are working

See the Pen WbRLNRX by jdillon (@jdillon) on CodePen.

[Rodrigo]

Hi,

 

I don't see anything that screams problems in your setup. There's always room for improvement but keep in mind that you're not trying to achieve something simple. Complex tasks normally require some complex solution.

 

I would use our Random Utility function instead of this:

randomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

Keep in mind that you can create a reusable function outside the class with the values you're using. In your class you're using the same values 0.02 and 0.04, so creating a reusable function outside the class is just one function for all the class instances instead of a function per class instance:

https://gsap.com/docs/v3/GSAP/UtilityMethods/random()

 

Also be more aware of naming conventions. This for example is a bit confusing IMHO:

const timeline = (options = {}) =>
  gsap.timeline({
    paused: true,
    ...options
  });

So that is a method that creates and returns a GSAP Timeline, but the name of the method: timeline makes sense only to you, when I saw this timeline() I had to look in order to see what that method was. Perhaps createTimeline is a better name because it explains exactly what is doing.

 

Is important keep in mind that a Timeline is a container of many things: Tweens, callbacks, labels and other Timelines, so if you plan on keep adding more timelines you could create a master Timeline. Then using the position parameter you can add your Timelines to it and just play/pause that single master Timeline.

 

Finally I don't see anywhere in your code something changing the TimeScale of a Timeline, so I don't see the use of this:

timelines.scanlineMotion.timeScale(1).play();
timelines.scanlineFlicker.timeScale(1).play();
timelines.scanlineDisplacement.timeScale(1).play();

Unless of course at some point you plan on changing the TimeScale of the Timelines and in that case a master Timeline is even a better idea.

 

Hopefully this helps

Happy Tweening! 💚

[Josh Dillon]

Hi Rodrigo,

 

These are all good suggestions, thank you for taking the time to read through the JS and provide your thoughts 🙂.