Welcome to my evolving playground for exploring the world of web animations! Here, you'll find a single page web application that isn't built on the back of a frameworks or any libraries. This project will house a growing collection of my own web animations and tools for creating our own. This project reflects my journey in mastering animation technologies and crafting interactive experiences with web development.
The web application will allow for the manual control of sample animations using graphical elements, making it especially helpful for understanding and fine tuning the parameters they're built on. I plan to continually expand the application's abilities to create, edit, and even graphically generate animations, hopefully allowing it to become an cornerstone educational resource and a comprehensive animation generation tool. I look forward to making this capable of handling a diverse set of libraries and offering a multitude of graphical interface controls, making it a valueable tool for beginners and more experienced developers, alike.
Key Features:
- Diverse Sample Animation Gallery: From subtle transitions to expressive character movements, the sample gallery showcases a range of styles and problem-solving approaches, all editable.
- Built-in Code Editor with Content Rendering Dive deeper into the animations with intuitive controls for playback, rewind, skipping, and speed adjustment. Loop individual animations or entire sequences.
- Playback Controls: Dive deeper into the editable sample animations with intuitive controls for playback and other adjustments. This feature will not be available for animations created by the user on this site, as of now.
- Export Code to Your Favorite Online Editor: Showcase your creations with single-click exporting to your favorite online code editor (CodePen, Code Sandbox). Or save it as a GitHub Gist.
Technologies Used:
- Vanilla JavaScript: This project focuses on core JavaScript fundamentals for basic interactivity, demonstrating proficiency without relying on external libraries or frameworks for building a single page web application. What is the point in this when using a tool like React could expedite my proect? There really isn't one... except I wanted a challenge.
- CSS: Many demo animations come to life through creative and efficient CSS styling techniques and the use of animation keyframes.
- Web Animations API: Both the web app's internal animations and the controls for the editable sample animations are implemented using the Web Animations API.
This project is constantly evolving as I expand my coding skills and knowledge. It may eventually transform into a more comprehensive animation generation app, including a variety of animation configurators with code generation and graphical interfaces, along with a wider range of animation libraries compatibility.
Until this application is operational and the website hosted, simplified versions of my individual animations and snippets will be kept on CodePen. Instructional articles and other written content will be found on my Dev.to account. Some more complicated versions of my CodePen Animation may be found on GitHub Gists.
* My Dev.to account is currently empty. I will be migrating old articles from Medium, soon. I also have a couple of articles in the works that should be published soon.
** I haven't had the chance to upload the larger versions of the couple of animations that have them, yet. I apreciate your patience as I navigate this project and try to find time to maintain periphory content.