Help to improve performance

[peacepostman 11 Likes (Newbie)]

Hello !

 

I am trying to optimize a small plugin I've made for our website but i think i'm stuck and i was asking myself that maybe someone here have an idea to optimize things a bit.

 

I really think that the main problem is animating the left property, it's always a bad pratice in css, but i didn't success in setting an initial x value for each particules (Shame !)

 

Maybe the SVG effect is not helping the GPU performance also.

 

Best regards !

 

PS: CustomEase is in the codepen, i'm deeply sorry to include it but you dont provide any CDN, i can edit and remove it immediately but the codepen wont work anymore.  

 

See the Pen GGeZwO by peacepostman (@peacepostman) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi,

 

We CodePen-safe versions of all our plugins and *special* eases. You can learn more about that here: https://greensock.com/try-plugins and see a demo that makes it easy to copy and paste the urls of the tools you need.

 

The url for CustomEase is https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js

 

I didn't notice any performance issues in your demo, but yes its generally recommended that you animate x instead of left.

Not sure why that was difficult. I think it would be best to take a few steps back and try to solve that. 

 

Perhaps you can make a much simpler demo that illustrates why you couldn't set the x of a single particle.

 

 

[peacepostman 11 Likes (Newbie)]

Hello, thanks for the link, the codepen is updated, i've had totally missed the fromTo function from the library, i'm having a try with this one.

 

Thanks !