.reverse()

package.json

@@ -8,6 +8,7 @@
       "packages/*"
     ]
   },
+  "funding": "https://motion.dev/tools/pricing",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
@@ -38,4 +39,4 @@
     "typescript": "^4.6.3"
   },
   "packageManager": "[email protected]"
-}
+}

packages/animation/src/Animation.ts

@@ -73,6 +73,7 @@ export class Animation implements Omit<AnimationControls, "stop" | "duration"> {
 
       // Rebase on delay
       t = Math.max(t - delay, 0)
+
       /**
        * If this animation has finished, set the current time
        * to the total duration.

packages/dom/src/animate/__tests__/animate.test.ts

@@ -50,6 +50,41 @@ describe("animate", () => {
     })
   })
 
+  test.only("Applies initial keyframe if a reverse animation finishes", async () => {
+    const div = document.createElement("div")
+    const animation = animate(
+      div,
+      { opacity: [0.2, 0.5] },
+      { duration, direction: "reverse" }
+    )
+    await animation.finished.then(() => {
+      expect(div).toHaveStyle("opacity: 0.2")
+    })
+  })
+
+  test("Applies initial keyframe if a reverse animation finishes having been manually reversed", async () => {
+    const div = document.createElement("div")
+    const animation = animate(div, { opacity: [0.2, 0.5] }, { duration: 0.2 })
+
+    animation.reverse()
+
+    await animation.finished.then(() => {
+      expect(div).toHaveStyle("opacity: 0.2")
+    })
+  })
+
+  test("Applies initial keyframe if animation finishes on a repeat reverse", async () => {
+    const div = document.createElement("div")
+    const animation = animate(
+      div,
+      { opacity: [0.2, 0.5] },
+      { duration, repeat: 1, direction: "alternate-reverse" }
+    )
+    await animation.finished.then(() => {
+      expect(div).toHaveStyle("opacity: 0.2")
+    })
+  })
+
   test("Applies transform template", async () => {
     const div = document.createElement("div")
     const animation = animate(div, { x: 1 }, { duration })

packages/dom/src/animate/animate-style.ts

@@ -175,13 +175,9 @@ export function animateStyle(
         })
       }
 
-      const target = keyframes[keyframes.length - 1]
       animation.finished
         .then(() => {
-          // Apply styles to target
-          style.set(element, name, target)
-
-          // Ensure fill modes don't persist
+          animation.commitStyles()
           animation.cancel()
         })
         .catch(noop)

packages/motion/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 Motion One adheres to [Semantic Versioning](http://semver.org/).
 
+## [10.10.1] [Unreleased]
+
+### Fixed
+
+- Animations finishing in reverse apply their initial styles instead of their final styles by cancelling the animation. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/51)
+- When `Animation` polyfill is reversed, animation no longer finishes instantly. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/50)
+
 ## [10.10.0] [2022-05-28]
 
 ### Added

packages/motion/package.json

@@ -7,6 +7,7 @@
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "types/index.d.ts",
+  "funding": "https://motion.dev/tools/pricing",
   "keywords": [
     "animation",
     "motion",

playgrounds/vue/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from "nuxt3"
+import { defineNuxtConfig } from 'nuxt'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({

playgrounds/vue/package.json

@@ -6,7 +6,7 @@
     "dev": "nuxi dev"
   },
   "devDependencies": {
-    "nuxt3": "latest"
+    "nuxt": "npm:nuxt3@latest"
   },
   "dependencies": {
     "@motionone/vue": "^10.10.0",

playgrounds/vue/pages/examples/reverse.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    ref="root"
+    style="
+      width: 100px;
+      border-radius: 20px;
+      background-color: #ff1231;
+      height: 100px;
+    "
+  ></div>
+  <button @click="toggle">Toggle</button>
+</template>
+
+<script lang="ts">
+import { animate } from "motion"
+
+export default {
+  setup: () => {
+    const root = ref<HTMLElement | null>(null)
+
+    let animation
+
+    function toggle() {
+      if (!animation) {
+        animation = animate(root.value, { scaleY: 0 }, { duration: 1 })
+      } else {
+        animation.reverse()
+      }
+    }
+
+    return { root, toggle }
+  },
+}
+</script>