This is a basic animation inspector made for developers to inspect Lottie animations and try to replicate them without using bodymovin or other JS animation libraries.
- Place your lottie json files in the
/publicfolder - Either change the file name to
data.jsonor changesrc/components/Player/index.jsat line 23 to your lottie file's name. - Run
yarn starton this project's root folder. - The animation should autoplay.
After those steps, you can:
- Pause the animation;
- Go to a certain frame and check what percentage of the animation that corresponds to (useful for
@keyframes); - See it's duration in seconds;
- Advance the animation frame by frame by focusing the number input field and using the up/down arrow keys;
- Use the
Playgroundcomponent to create html and css to emulate the animation. What you build will be rendered on top of the lotti animation.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This project was bootstrapped with Create React App, but has been ejected later