svgsprite / web-animation-player

App to play with modern web motion graphics based on the Lottie technology.

Web animation player

Test your animation files created in After Effects or run a demo example included to the app.

Features

1. Switching between two rendering methods (Canvas or SVG).
2. Changing animation speed.
3. Viewing animated content on different backgrounds.
4. "Wireframe mode". Look for the button in the top right area of the app and try to use "mouse hover" effect to switch between the display modes. This feature and speed control will help you catch some animation mistakes and study other animator's files.
5. "Playback control". Hover your mouse over the animation and click or drag the progress bar.
6. "Clean view". Move your mouse outside the browser window to hide all user interface elements.

Everything works without uploading data to any servers.
Only private usage in your browser.

Usage

# Clone the repository
git clone https://github.com/svgsprite/web-animation-player.git
cd web-animation-player

# Install dependencies
npm install

# Run the app on the localhost in development mode
npm start

# Or make a static build
npm run build

Online version: https://svgsprite.com/tools/lottie-player/

What's next?

Feel free to request new features.
This project is open to new contributors.

👍