Mo.js Burst Animation with GSAP

[andythomo]

Hello, 

 

I am try to create some UI micro interactions for my buttons on a react app I am currently developing. I have seen Mo.js and I noticed that it had a easy way to add burst animations using a burst object. I have never really tackled any complex animation with GSAP,  so I was hoping someone may offer an opinion on a way to tackle these types of animations (ideally with GSAP 3)?

 

Thanks 

 

A

See the Pen 6caf96461207a5caa9226fbd2631569d by sol0mka (@sol0mka) on CodePen

[ZachSaucier]

Hey andythomo and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member.

 

This sort of thing is pretty easily created with GSAP, though GSAP isn't as focused on pre-made effects (there's nothing like gsap.burst, etc.). However, GSAP gives you way more freedom in that you can create any sort of effect that you want. You can even make it reusable (like mojs's Burst) by using gsap.effects. Depending on your needs, you could make it as configurable or as hard coded as you'd like.

 

Do you have any specific questions related to creating this sort of effect?

[andythomo]

Hi Zach, 

 

Thanks for the reply. I guess the thing that is puzzling me slightly is in the codepen I have linked you can create multiple burst elements round the button by updating the count. In GSAP would I have to create multiple SVG's and change the position of each element, or, is there a way to loop through them and programmatically update  their position based of the button.   

 

See the Pen dpKPYg by gowriprasanthvm (@gowriprasanthvm) on CodePen

 

 

[ZachSaucier]

8 minutes ago, andythomo said:

I guess the thing that is puzzling me slightly is in the codepen I have linked you can create multiple burst elements round the button by updating the count. 

Those are just abstractions that Mo has built in, there's nothing magical about them  You could create your own function that creates a dynamic amount of lines or stars or whatever. 

 

10 minutes ago, andythomo said:

is there a way to loop through them and programmatically update  their position based of the button.   

You can do this in JS without issue. Mo just does some of that work for you. Again, GSAP doesn't have anything like that built in but it can easily be created, tailored to your needs.