Motion One adheres to Semantic Versioning.
scrollfunction for tracking scroll events and powering scroll-driven animations.
cancelbehaviour in Safari. Issue (sponsors only)
- Removing default
inViewas this silently fails in iOS Safari 14-15.
- In supported browsers,
documentas the default value for
rootMarginworks within iframes.
inViewfunction for detecting when elements enter and leave the viewport.
viewoptions prop to Motion One for Vue and Solid.
- Gracefully failing when no elements are found. Issue (sponsors only)
- Fixed incorrect handling of
easingstring vs array in polyfill. Issue (sponsors only)
- Added support for timeline labels. These allow you to to reference parts of the timeline using a name rather than a timestamp.
- Adding support for
- Fixing reflection of playback controls so unsupported props aren't executed as functions.
motion. Issue (sponsors only)
- Fixing types for
timelinesegment options. Issue (sponsors only)
- Converting all transform values into numbers before forwarding to animation polyfill. Issue (sponsors only)
initial="false"typechecking in Motion One for Vue.
- Fixing forced read of initial keyframe when Motion DevTools is recording if keyframe is explicitly defined.
staggercalculations with easings.
- Added support for Motion Developer Tools.
- Fixed velocity calculations of critically and overdamped animations.
- Fixed velocity transfer of interrupted generated animations. Issue (sponsors only)
- Custom animations by passing function to
- Fixing types for
Presence. Issue (sponsors only)
- Fixing "default slot" warning in Vue
Presencecomponent. Issue (sponsors only)
- Motion One for Vue: A fully declarative version of Motion One for Vue 3!
styleutility for getting/setting styles and CSS variables on DOM elements.
- Spring and glide in timeline:
timelinenow supports animations with
- Fixing animation interruption for independent transform animations in Safari and Firefox. Issue (sponsors only)
- Fixing a bug in
- Glide: Animate transforms with realistic glide that can be used to mimic momentum scroll.
- Fixing a bug where sometimes velocity wasn't being correctly passed to the next animation.
durationis always passed correctly to the independent transform polyfill.
- Springs: Animate transforms with realistic spring simulations.
- Fill both for timelines: Extends
fill: "both"effect from
- Fill both: Previously, if an animation had a delay and an initially-defined first keyframe (
opacity: [0, 1]) the animation would start from its rendered style to that first keyframe. Now, the initial keyframe gets stretched to the very start of the whole animation by setting
fill: "both". Issue (sponsors only)
- Scrub to end: Setting
durationwas removing the animation effect. This has been fixed by setting
fill: "forwards"on the WAAPI animation. This won't affect memory consumption as animations are flattened into styles and removed on finish. Issue (sponsors only)
- Removed Popmotion dependency: Reduced the number of dependencies by moving Popmotion utilities inside Motion One. Filesize remains unaffected in most environments but will be lower in Skypack and other distributors that don't support tree-shaking.
- Duration: The duration of timelines is usually automatically calculated from its defined animations. It can now be read from the new read-only
durationprop on animation controls.
- Performance: Before Motion One starts a new animation, it stops the old one. Stopping an animation commits its styles, which can cause a style recalculation. Now, when an animation finishes, we delete the reference to the old animation. Additionally, we check the animation status isn't
"finished"before committing styles within
stop. This prevents unnecessary style recalculations.
- Fixed formatting of changelog for website publication.
- Catching promise in
timelineto prevent errors whenever a sub-animation is cancelled.
- Removed links to repo from Readme.
- First publish
Have you seen Motion DevTools?
It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!