Stars swirling animation

[Evgeniia]

Hey everyone! 

I have an animation of swirling stars around the button.

JS code creates each star with its own CSS animation. The issue of this code is that it adds new and new stylesheets in head code and it decreases perfomance speed. 

So I'm trying to recreate the same animation with GSAP library to avoid this adding new stylesheets into head code, but I don't get how is right to do. 

Could you help me, please?

 

See the Pen ZEPxRgm by EvgeniiaShirshikova (@EvgeniiaShirshikova) on CodePen

 

See the Pen jOJzKdZ by EvgeniiaShirshikova (@EvgeniiaShirshikova) on CodePen

[GreenSock]

Cool effect! Yeah, this is all very doable with GSAP but it's beyond the scope of help we can provide in these forums for free. The main issue I see is that your original CSS-based one uses a non-standard order-of-operation on the transforms. One of the very convenient things about GSAP is that it delivers a very consistent, predictable order of operation on each transform component. 

 

I see a few options to get the effect you want: 

1. Just use a generic object that contains the properties you need to animate (x, y, rotation, scale). Animate those and then use a simple onUpdate to set the element.style.transform with those updated values. This lets you use the exact same order of operation as in your original CSS demo. 
2. Or wrap each of your elements in a container. Animate the rotation of the container, and counter-rotate the nested element in the opposite direction so that it looks like it remains oriented properly, but you get the orbit effect. For the offset, just alter the "x" of the nested element. And scale the inner element too. So you're basically reproducing the order of operation via the nesting.

I hope that helps!

[Evgeniia]

4 minutes ago, GreenSock said:

Cool effect! Yeah, this is all very doable with GSAP but it's beyond the scope of help we can provide in these forums for free. The main issue I see is that your original CSS-based one uses a non-standard order-of-operation on the transforms. One of the very convenient things about GSAP is that it delivers a very consistent, predictable order of operation on each transform component. 

 

I see a few options to get the effect you want: 

1. Just use a generic object that contains the properties you need to animate (x, y, rotation, scale). Animate those and then use a simple onUpdate to set the element.style.transform with those updated values. This lets you use the exact same order of operation as in your original CSS demo. 
2. Or wrap each of your elements in a container. Animate the rotation of the container, and counter-rotate the nested element in the opposite direction so that it looks like it remains oriented properly, but you get the orbit effect. For the offset, just alter the "x" of the nested element. And scale the inner element too. So you're basically reproducing the order of operation via the nesting.

I hope that helps!

Thank you for your time!