As developers, we have noticed a lack of intuitive tools to develop CSS Animations. We decided to build a dev tools extension because we liked how chrome dev tools allows you to easily edit the CSS of an application. We also liked how cssgradient.io easily lets you export css code. There was also a super cool video on bezier curves mathematics we watched so we wanted to include an animation bezier curve editor like you would see in programs like Adobe After Effects and Animate.
What it does
Harnessing the power of the chrome-devtools protocol, the math of Bezier curves, and the fluidity of React.js, we have animade it easy for developers to generate CSS animations and attach these animations to css selectors within their current browser window!
How we built it
After figuring out what we wanted to build we jumped into sketching out our product on Figma. As soon as a basic Figma was finished with all the features we wanted to implement, we split into two groups, two people on the front end, and two on the back end.
The back end group started working on injecting css code, communicating between our React App and the main window to debug via chrome-devtools-protocol, and passing data around our react application.
The front end group spent the next couple hours figuring the bits and bobs of the design of the extension on Figma. They then began assembling the various components based on the mock up. About 4 hours before
About 12 hours before the deadline we began working on a data structure to handle all the state of our app, and typing it. We really didn’t know what we were doing so this proved to be pretty difficult.
Challenges we ran into
A google search for debugging issues with chrome dev tools leads to a bunch of questions on how to use them, as opposed to how to actually create them! The documentation was also incomplete in some cases which led to not the most pleasant developer experience.
We originally wanted to create a simple minimum viable product but after a couple hours of hacking we ended up trying to implement almost everything. This and having split into two separate groups, merging everything together in the last couple hours of the hackathon proved to be a struggle, and we were unable to fully merge everything together.
We were unable to properly display a lot of the features that we created due to issues merging together all 3 of the different branches that we were working on, like dropdowns for CSS selectors, a stepper to view your animation at different intervals,
Accomplishments that we're proud of
Bezier Editor - we originally didn’t want to include this in our final product but after the bezier video we just had to include it despite having serious doubts if we could get it to work. Injecting CSS- We also were surprised how simple it was to inject css into a website. By utilizing the native Chrome DevTools Protocol, we were able to both inject/remove CSS into a website at will pretty painlessly, and harnessed
What we learned
This was our first time writing a chrome extension, and we’re happy with what we’ve accomplished. For a lot of us, this was our first 36hr hackathon, our first time using TypeScript, our first time using advanced React Hooks, and Material UI! We really jumped into the deep-end with this project and think that we’ve made a product that can truly be useful for developers everywhere.
What's next for Animade Easy
We plan to completely flesh out our enums and make every single CSS animation animatable, and also flesh out the types of all of our objects to make it easy for other developers to add onto our extension.
Built With Typescript React Chrome Dev Tools Extension Material UI Figma
Link: ! animade-easy