Export

Contents

  1. Open
  2. Formats
  3. Limitations

Once you're happy with an animation, the export panel can be used to convert your animations back into CSS or Motion One code.

Open

The export panel can be opened using the "Export" button in the left-panel.

Export button

Formats

By default, an animation is exported in the format in which it was originally written. Any animation can be exported into any supported format, but some formats (like CSS transitions) are more limited than others.

Motion One

Motion One animations are exported into the animate function format.

Export options for Motion One for Vue and Solid will be added in the near-future. In the meantime, animate's animation options can be directly copy/pasted into the transition prop.

CSS

Individual transforms

Motion One supports animating transforms individually, like:

animate(element, { x: 100 }, { duration: 1 })
animate(element, { scale: 0.5 }, { duration: 0.5 })

When converting these animations into CSS, the export panel will convert individual transforms into CSS variables.

For browsers to animate CSS variables, they must be registered via the CSS Properties and Values API.

Motion DevTools will generate this code for you. However, the CSS Properties and Values API is still unsupported in Firefox and Safari. Until support arrives for these browsers, animations for individual transforms will be instant.

CSS transition limitations

CSS transitions are unique from CSS animations and Motion One in that they only support single keyframe animations, and no repeat options.

Limitations

This feature is in beta. Expect reductions to the verbosity of the generated code, and other improvements, over time.

Code quality

The export panel will always produce functioning code. However, due to the many ways you could author your animations it most likely won't match the original format.

Therefore, it's better to use the export panel to copy/paste sections of your animations, like keyframes, animation settings, or specific CSS rules.

Element names

Unless specified via an element's id or data-motion-id attributes, element names are automatically generated by Motion DevTools. We make it clear in the generated code when we're using such a name by marking it with GENERATED ID.

These should be replaced with your original selector when you paste animations back into your codebase.

Initial keyframe

Currently, the initial keyframe is explicitly exported as the value measured when the animation originally played.

Often when we write code, this keyframe will be defined implicitly, either by animating to a single value:

animate(element, { opacity: 1 })
.element {
  opacity: 1;
  transition: opacity 100ms linear;
}

Or in Motion One, providing wildcard null as the initial keyframe:

animate(element, { x: [null, 50, 0] })

These implicit keyframes will be preserved in a future update.