Merge branch 'main' into main

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug report
 about: Let us know about some broken functionality
 title: "[BUG]"
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **1. Read the [FAQs](#faqs) 👇**
@@ -20,6 +19,7 @@ A CodeSandbox minimal reproduction will allow us to quickly follow the reproduct
 **4. Steps to reproduce**
 
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -39,23 +39,32 @@ If applicable, let us know which OS, browser, browser version etc you're using.
 
 ## FAQs
 
+### `"use client"` error
+
+We would accept a PR implementing `"use client"` (see [previous discussion](https://github.com/framer/motion/issues/2054)). In the meantime a workaround is:
+
+```javascript
+// motion.js
+"use client"
+export * from "framer-motion"
+
+// other.js
+import { motion } from "./motion"
+```
+
 ### Framer Motion won't install
 
-Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6. 
+Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.
 
 ### `height: "auto"` is jumping
 
 Animating to/from `auto` requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.
 
 The recommended solution is to move padding to a child element. See [this issue](https://github.com/framer/motion/issues/368) for the full discussion.
 
-### Type error with `AnimateSharedLayout`
-
-`AnimateSharedLayout` was deprecated in 5.0. Refer to the [upgrade guide](https://www.framer.com/docs/guide-upgrade/##shared-layout-animations) for instructions on how to remove.
-
 ### Preact isn't working
 
-Framer Motion isn't compatible with Preact. 
+Framer Motion isn't compatible with Preact.
 
 ### `AnimatePresence` isn't working
 
@@ -64,31 +73,35 @@ Have all of its immediate children got a unique `key` prop that **remains the sa
 ```jsx
 // Bad: The index could be given to a different component if the order of items changes
 <AnimatePresence>
-  {items.map((item, index) => <Component key={index} />)}
+    {items.map((item, index) => (
+        <Component key={index} />
+    ))}
 </AnimatePresence>
 ```
 
-```jsx 
+```jsx
 // Good: The item ID is unique to each component
 <AnimatePresence>
-  {items.map((item, index) => <Component key={item.id} />)}
+    {items.map((item, index) => (
+        <Component key={item.id} />
+    ))}
 </AnimatePresence>
 ```
 
 Is the `AnimatePresence` correctly outside of the controlling conditional? `AnimatePresence` must be rendered whenever you expect an `exit` animation to run - it can't do so if it's unmounted!
 
 ```jsx
 // Bad: AnimatePresence is unmounted - exit animations won't run
-{isVisible && (
-  <AnimatePresence>
-    <Component />
-  </AnimatePresence>
-)}
+{
+    isVisible && (
+        <AnimatePresence>
+            <Component />
+        </AnimatePresence>
+    )
+}
 ```
 
 ```jsx
 // Good: Only the children are unmounted - exit animations will run
-<AnimatePresence>
-  {isVisible && <Component />}
-</AnimatePresence>
+<AnimatePresence>{isVisible && <Component />}</AnimatePresence>
 ```

CHANGELOG.md

@@ -4,11 +4,44 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [10.17.10] 2024-02-05
+
+### Fixed
+
+-   Export `UseInViewOptions`.
+
+## [10.17.9] 2024-02-05
+
+### Fixed
+
+-   Improve error message when trying to animate multiple keyframes via spring.
+
+## [10.17.8] 2024-02-05
+
+### Fixed
+
+-   Adding `null` safeguard for `useAnimationControls`.
+
+## [10.17.7] 2024-02-05
+
+### Fixed
+
+-   Fix touch event filtering for hover gesture.
+
+## [10.17.6] 2024-02-04
+
+### Fixed
+
+-   Ensure cancelled WAAPI animations can't finish.
+
 ## [10.17.5] 2024-02-04
 
 ### Fixed
 
+-   Fixing final keyframe when using `repeatType` `"reverse"` and `"mirror"`.
 -   Display warning if scroll `container` is `position: static`.
+-   Move more scroll measurements to `read` frame lifecycle.
+-   Adding `amount` to `useInView` dependencies.
 
 ## [10.17.4] 2024-02-03
 

dev/package.json

@@ -1,15 +1,15 @@
 {
     "name": "framer-motion--dev",
-    "version": "10.17.4",
+    "version": "10.17.9",
     "private": true,
     "scripts": {
         "dev": "webpack serve --config ./webpack/config.js --hot"
     },
     "dependencies": {
         "@react-three/drei": "^7.27.3",
         "@react-three/fiber": "^8.2.2",
-        "framer-motion": "^10.17.4",
-        "framer-motion-3d": "^10.17.4",
+        "framer-motion": "^10.17.9",
+        "framer-motion-3d": "^10.17.9",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

dev/tests/waapi-cancel.tsx

@@ -0,0 +1,33 @@
+import { motion, animate } from "framer-motion"
+import * as React from "react"
+import { useEffect, useState } from "react"
+import styled from "styled-components"
+
+const Container = styled.section`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 100px;
+
+    #box {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+        opacity: 0;
+    }
+`
+
+export const App = () => {
+    useEffect(() => {
+        const controls = animate("#box", { opacity: [0, 1] }, { duration: 1 })
+
+        controls.cancel()
+        controls.complete()
+    }, [])
+
+    return (
+        <Container>
+            <div id="box" />
+        </Container>
+    )
+}

lerna.json

@@ -1,5 +1,5 @@
 {
-    "version": "10.17.4",
+    "version": "10.17.9",
     "packages": [
         "packages/*"
     ],

packages/framer-motion-3d/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "10.17.4",
+    "version": "10.17.9",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -46,7 +46,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^10.17.4",
+        "framer-motion": "^10.17.9",
         "react-merge-refs": "^2.0.1"
     },
     "peerDependencies": {
@@ -60,5 +60,5 @@
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1"
     },
-    "gitHead": "8e0cfd2b3aa2a6f395a6c382bac610454f8fe7f1"
+    "gitHead": "8f86bca29cd67310f4f292733c026fab9e7939d7"
 }

packages/framer-motion/cypress/integration/waapi.ts

@@ -0,0 +1,10 @@
+describe("waapi", () => {
+    it("Cancelled animations should be able to complete", () => {
+        cy.visit("?test=waapi-cancel")
+            .wait(100)
+            .get("#box")
+            .should(([$element]: any) => {
+                expect(getComputedStyle($element).opacity).to.equal("0")
+            })
+    })
+})

packages/framer-motion/jest.setup.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 /**
  * Stub PointerEvent - this is so we can pass through PointerEvent.isPrimary
  */
-const pointerEventProps = ["isPrimary"]
+const pointerEventProps = ["isPrimary", "pointerType", "button"]
 class PointerEventFake extends Event {
     constructor(type: any, props: any) {
         super(type, props)
@@ -39,19 +39,27 @@ export const click = (element: Element) =>
     act(() => {
         fireEvent.click(element)
     })
-export const pointerEnter = (element: Element) =>
+export const pointerEnter = (element: Element, options?: any) =>
     act(() => {
         fireEvent.pointerEnter(
             element,
             // Emulate buttonless pointer event for enter/leave
-            new PointerEventFake("pointerenter", { type: "mouse", button: -1 })
+            new PointerEventFake("pointerenter", {
+                pointerType: "mouse",
+                button: -1,
+                ...options,
+            })
         )
     })
-export const pointerLeave = (element: Element) =>
+export const pointerLeave = (element: Element, options?: any) =>
     act(() => {
         fireEvent.pointerLeave(
             element,
-            new PointerEventFake("pointerleave", { type: "mouse", button: -1 })
+            new PointerEventFake("pointerleave", {
+                pointerType: "mouse",
+                button: -1,
+                ...options,
+            })
         )
     })
 export const pointerDown = (element: Element) =>

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.17.4",
+    "version": "10.17.9",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -89,7 +89,7 @@
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "5.3 kB"
+            "maxSize": "5.31 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
@@ -116,5 +116,5 @@
             "maxSize": "31.82 kB"
         }
     ],
-    "gitHead": "8e0cfd2b3aa2a6f395a6c382bac610454f8fe7f1"
+    "gitHead": "8f86bca29cd67310f4f292733c026fab9e7939d7"
 }

packages/framer-motion/src/animation/__tests__/animate.test.tsx

@@ -221,10 +221,10 @@ describe("animate", () => {
         const animation = animate(
             div,
             { opacity: [0.2, 0.5] },
-            { duration, repeat: 1, repeatType: "mirror" }
+            { duration, repeat: 2, repeatType: "mirror" }
         )
         await animation.then(() => {
-            expect(div).toHaveStyle("opacity: 0.2")
+            expect(div).toHaveStyle("opacity: 0.5")
         })
     })