WYSIWYG CSS animation editor for Firefox and Chrome. Works on any HTML webpage using a single JS file (not counting dependencies).
I used JQuery in this code, because I just like JQuery. You could easily convert the project to not use JQuery, though. I may provide a non-JQuery version in the future.
Just include the syr-css-animator.js file in any webpage after the jquery library and run SyrCSSAnimator.init(); and you should be good to go!
Create CSS animations in an intuitive way: visually. Rotate and move div objects on the screen using the anchors. Edit scale and opacity for each frame of animation via on-screen controls. Also control duration and frame count! Preview animations separately or together. Export to CSS code. (Note: Currently only exports current selection.) Export All option. Ability to delete animations from the list. Rename animations in the editor instead of after you export the code. Make the scale anchors scale the object instead of move it. Add anchors to lock the movement direction. Allow the animation UI to be docked to the top instead of the bottom and vice versa.
Add more frames to limit. (Max of 8 frames for now.)
Reset button to clear all animations and start over. (For now, just refresh the page.)
Ability to choose what markup can be selected. For now, only divs are supported.
Copy button to allow a frame to be copied to another frame. Useful if you want to make an animation seamlessly loop or end in the same place it started.
Remove JQuery dependency. This is a long term goal. I code faster with JQuery, so I started with that. I'll convert everything to a non-JQuery, plain JS format once the application feels mostly complete.
More ideas are welcome!
This is simply a hobbyist project. If you like my work, feel free to contribute your own work to the project or simply buy me a taco!
You can also follow me on Twitch and chat with me on Bluesky!
The project is under the MIT license. See LICENSE file.
That means you can fork the project and make something of your own and even sell it if you want, but it also means you're guaranteed no support. I have no obligations to help in any situation, and you're using this tool at your own risk. Granted, it's not a very dangerous piece of software... and you can see the source code, so go investigate the code and try the demo!