Motion DevTools icon

Motion DevTools

Extension Actions

How to install Open in Chrome Web Store
CRX ID
mnbliiaiiflhmnndmoidhddombbmgcdk
Status
  • Extension status: Featured
  • Extension status: In-App Purchases
Description from extension meta

Inspect, edit and export animations made with CSS and Motion One.

Image from store
Motion DevTools
Description from store

Motion DevTools is a browser extension to inspect, edit and export animations made with CSS and Motion One.

🔍 Inspect: Press record and interact. Detected CSS and Motion One animations will be plotted on a classic timeline interface. Use the playback controls to scrub through and replay your animation from any point.

✍️ Edit: Add, move and remove keyframes. Edit values and easing with custom controls, and your edits will be reflected on the page in real-time.

🚢 Export: Perfected your animation? Hit the export button to instantly generate code. Export any animation into CSS transitions, CSS animations or Motion One.

Latest reviews

O Menino Misterioso
Perfect
Ahmad Issam
INSANE THANK YOU SO MUCH MOTION ONE TEAM !!!
酸菜小鱼
Great
Christopher Barlow
The "Motion" tab doesn't even appear anywhere in DevTools.
Ferran Buireu
Se integra muy bien con las DevTools del navegador y detecta las animaciones automáticamente. Espero que tarde o temprano estas utilidades se integren nativamente en el inspector pero por ahora, de lujo.
Hani Hassan
Nothing happen? Youtube video is seems fake.
LN
J' adore !!!