Share Posted June 2, 2020 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 Link to comment Share on other sites More sharing options...
Share Posted June 2, 2020 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? 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 2, 2020 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 Link to comment Share on other sites More sharing options...
Share Posted June 2, 2020 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now