Motion DevTools

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

What is Motion DevTools?

Motion DevTools is an advanced browser extension for Chrome. It empowers users to inspect, interact, modify, and replay animations created using CSS and Motion One. The plugin also allows you to make real-time changes to your animation, using an intuitive interface to add or remove keyframes, modify values, and adjust easing. It also supports exporting your finalized animations into CSS transitions, CSS animations, or Motion One.

Download

Extension stats

By: https://motion.dev

View on Chrome Web Store

Users: 7,000+

Rating: 4.50 (8)

Version: 2.0.0 (Last updated: 2023-06-08)

Creation date: 2022-03-21

Risk impact: High risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

storage
webNavigation

Host permissions:

file:///*
http://*/*
https://*/*

Size: 806.91K

Email: ma*****@motion.dev

URLs: Website

Ranking

# 12670 ▼ 38

Other rankings

#157 in Developer Tools ▲ 3 #11 in animation keyword 12 ▼ 1

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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.