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

Stats

By: https://motion.dev

View on Chrome Web Store

Users: 8,000+

Rating: 4.33 (6)

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

Stats date:

Chrome-Stats Rank

# 11506 ▼ 109

Other rankings

#116 in Developer Tools ▲ 1 #10 in animation keyword 15

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.

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.

User reviews

Great

酸菜小鱼, 2024-03-31

The "Motion" tab doesn't even appear anywhere in DevTools.

Christopher Barlow, 2024-02-24

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.

Ferran Buireu, 2022-10-30

View all user reviews

Safety

Risk impact

Motion DevTools is risky to use as it requires a number of sensitive permissions that can potentially harm your browser and steal your data. Exercise caution when installing this extension. Review carefully before installing. We recommend that you only install Motion DevTools if you trust the publisher.