Best practices for using multiple timelines?

[symphonyjtm]

Hello,

 

I am trying to create a one page website with animation. But I am not sure if what I am doing is correct.

 

 

When user scrolling trigger different section, three ellipses will have different animation. (Animate three ellipses at the same time)

 

However, as I continue to create more sections, apply more scrolltrigger timelines and apply more animations to the ellipses,

the ellipse animation shows little bit lagging or delayed to execute animation somethimes. (or when the user scrolls too fast)

 

Is there any other practices to improve the performance?

e.g. how to combine the scrolltrigger timelines?

 

Thanks for help!

 

See the Pen abrVReo by symphonyjtm (@symphonyjtm) on CodePen.

[symphonyjtm]

I would appreciate it if someone can give me some hints or samples. Thank you ?

[GreenSock]

You don't need to create a whole new timeline for each one when they share the same trigger/start/end. Just put them into a common timeline and use the position parameter to position them all at the beginning of the timeline, like: 

 

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

[symphonyjtm]

22 hours ago, GreenSock said:

You don't need to create a whole new timeline for each one when they share the same trigger/start/end. Just put them into a common timeline and use the position parameter to position them all at the beginning of the timeline, like: 

 

 

 

Thank you!