Add scroll info to scroll (#2809)

packages/framer-motion/package.json

@@ -115,6 +115,10 @@
         {
             "path": "./dist/size-rollup-animate.js",
             "maxSize": "17.9 kB"
+        },
+        {
+            "path": "./dist/size-rollup-scroll.js",
+            "maxSize": "5.2 kB"
         }
     ],
     "gitHead": "dcf88c8f6c178d1af7a8f7dec81326db5fd68cea"

packages/framer-motion/rollup.size.config.mjs

@@ -62,6 +62,23 @@ const sizeAnimate = Object.assign({}, es, {
     },
 })
 
+const sizeScroll = Object.assign({}, es, {
+    input: "lib/render/dom/scroll/index.js",
+    output: Object.assign({}, es.output, {
+        file: `dist/size-rollup-scroll.js`,
+        preserveModules: false,
+        dir: undefined,
+    }),
+    plugins: [...sizePlugins],
+    external,
+    onwarn(warning, warn) {
+        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+            return
+        }
+        warn(warning)
+    },
+})
+
 const domAnimation = Object.assign({}, es, {
     input: {
         "size-rollup-dom-animation-m": "lib/render/components/m/size.js",
@@ -105,4 +122,4 @@ const domMax = Object.assign({}, es, {
 })
 
 // eslint-disable-next-line import/no-default-export
-export default [motion, m, domAnimation, domMax, sizeAnimate]
+export default [motion, m, domAnimation, domMax, sizeAnimate, sizeScroll]

packages/framer-motion/src/dom-entry.ts

@@ -13,6 +13,7 @@ export * from "./easing/back"
 export * from "./easing/circ"
 export * from "./easing/ease"
 export * from "./easing/cubic-bezier"
+export * from "./easing/steps"
 export * from "./easing/modifiers/mirror"
 export * from "./easing/modifiers/reverse"
 

packages/framer-motion/src/easing/__tests__/steps.test.ts

@@ -0,0 +1,26 @@
+import { steps } from "../steps"
+
+test("steps", () => {
+    const stepEnd = steps(4)
+
+    expect(stepEnd(0)).toBe(0)
+    expect(stepEnd(0.2)).toBe(0)
+    expect(stepEnd(0.249)).toBe(0)
+    expect(stepEnd(0.25)).toBe(0.25)
+    expect(stepEnd(0.49)).toBe(0.25)
+    expect(stepEnd(0.5)).toBe(0.5)
+    expect(stepEnd(0.99)).toBe(0.75)
+    expect(stepEnd(1)).toBe(0.75)
+
+    const stepStart = steps(4, "start")
+    expect(stepStart(0)).toBe(0.25)
+    expect(stepStart(0.2)).toBe(0.25)
+    expect(stepStart(0.249)).toBe(0.25)
+    expect(stepStart(0.25)).toBe(0.25)
+    expect(stepStart(0.49)).toBe(0.5)
+    expect(stepStart(0.5)).toBe(0.5)
+    expect(stepStart(0.51)).toBe(0.75)
+    expect(stepStart(0.99)).toBe(1)
+    expect(stepStart(1)).toBe(1)
+    expect(stepStart(2)).toBe(1)
+})

packages/framer-motion/src/easing/steps.ts

@@ -0,0 +1,28 @@
+import { clamp } from "../utils/clamp"
+import type { EasingFunction } from "./types"
+
+/*
+  Create stepped version of 0-1 progress
+
+  @param [int]: Number of steps
+  @param [number]: Current value
+  @return [number]: Stepped value
+*/
+export type Direction = "start" | "end"
+
+export function steps(
+    numSteps: number,
+    direction: Direction = "end"
+): EasingFunction {
+    return (progress: number) => {
+        progress =
+            direction === "end"
+                ? Math.min(progress, 0.999)
+                : Math.max(progress, 0.001)
+        const expanded = progress * numSteps
+        const rounded =
+            direction === "end" ? Math.floor(expanded) : Math.ceil(expanded)
+
+        return clamp(0, 1, rounded / numSteps)
+    }
+}

packages/framer-motion/src/frameloop/frame.ts

@@ -5,7 +5,7 @@ export const {
     schedule: frame,
     cancel: cancelFrame,
     state: frameData,
-    steps,
+    steps: frameSteps,
 } = createRenderBatcher(
     typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop,
     true

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -52,7 +52,7 @@ import { frameData } from "../../dom-entry"
 import { isSVGElement } from "../../render/dom/utils/is-svg-element"
 import { animateSingleValue } from "../../animation/interfaces/single-value"
 import { clamp } from "../../utils/clamp"
-import { steps } from "../../frameloop/frame"
+import { frameSteps } from "../../frameloop/frame"
 import { noop } from "../../utils/noop"
 import { time } from "../../frameloop/sync-time"
 import { microtask } from "../../frameloop/microtask"
@@ -730,9 +730,9 @@ export function createProjectionNode<I>({
             frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp)
             frameData.timestamp = now
             frameData.isProcessing = true
-            steps.update.process(frameData)
-            steps.preRender.process(frameData)
-            steps.render.process(frameData)
+            frameSteps.update.process(frameData)
+            frameSteps.preRender.process(frameData)
+            frameSteps.render.process(frameData)
             frameData.isProcessing = false
         }