nonoumasy Posted January 3, 2021 Share Posted January 3, 2021 Hello, I've been thinking of creating an MERN app that will let users create Battle Maps that recreate historical/fictional battles. User can add SVG elements like polygon(rectangles), text, etc on a map, position it, and then create a keyframe for it. User can keep adding and once finished, the User can save and share this Battle Map. Other Users can either hit a play button and the map will animate and they can also step thru each keyframe. I created a rough mock to show the general idea. My question is how would you do this with GSAP. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 4, 2021 Share Posted January 4, 2021 Hey nonoumasy and welcome to the GreenSock forums. How to build this sort of thing depends on exactly what you're needing it to do. For the actual movement of the pieces, you could use GSAP's Draggable to enable users to move pieces around. You could also use GSAP's upcoming Flip plugin (for Shockingly Green or greater Club GreenSock members) to record positions when the user clicks a button to save the state. Then you could use GSAP's tweening functionality to animate between the states. Creating a UI that visualizes the generated GSAP timeline is a bit more complex, especially if you want it to be editable directly by the user. Overall what you're trying to do is definitely possible with GSAP but it will take a lot of development time to create. If you have a specific question feel free to ask. Happy tweening! Link to comment Share on other sites More sharing options...
nonoumasy Posted January 4, 2021 Author Share Posted January 4, 2021 Thanks Zach. Your answer is very helpful. It confirmed that it's possible to do this. Also, good to know which modules to use. I agree the UI is pretty complex. I think I won't have anything complex like an actual timeline, ala AE but keep it as simple as text. I just wanted to know if there was a way to store a keyframe for each SVG element and save that. It seems with this Flip plugin, it's possible. That was the missing piece I think for me. Then I would just have a play button in presentation mode(vs editor mode) to playback the battle animation. Cheers N 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