mirror of
https://github.com/warmbly/warmbly.git
synced 2026-09-11 00:05:01 +00:00
feat: refresh repository banner assets
Update the repository banner artwork and stop tracking the stray root node_modules install by adding a root ignore rule.
This commit is contained in:
Matthew Meszaros
@@ -47,6 +47,10 @@ go.work.sum
|
||||
# Local Go build cache
|
||||
.gocache/
|
||||
|
||||
# Node dependencies (per-tree .gitignores cover admin/site/docs/web; this
|
||||
# also catches a stray root-level install / pnpm store)
|
||||
node_modules/
|
||||
|
||||
# Local pnpm store created by dockerized frontend installs
|
||||
web/.pnpm-store/
|
||||
|
||||
|
||||
+39
-71
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 534 KiB |
-39
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"hoistedDependencies": {
|
||||
"tslib@2.8.1": {
|
||||
"tslib": "private"
|
||||
},
|
||||
"framer-motion@12.40.0": {
|
||||
"framer-motion": "private"
|
||||
},
|
||||
"motion-utils@12.39.0": {
|
||||
"motion-utils": "private"
|
||||
},
|
||||
"motion-dom@12.40.0": {
|
||||
"motion-dom": "private"
|
||||
}
|
||||
},
|
||||
"hoistPattern": [
|
||||
"*"
|
||||
],
|
||||
"included": {
|
||||
"dependencies": true,
|
||||
"devDependencies": true,
|
||||
"optionalDependencies": true
|
||||
},
|
||||
"injectedDeps": {},
|
||||
"layoutVersion": 5,
|
||||
"nodeLinker": "isolated",
|
||||
"packageManager": "pnpm@10.30.3",
|
||||
"pendingBuilds": [],
|
||||
"publicHoistPattern": [],
|
||||
"prunedAt": "Tue, 26 May 2026 07:22:09 GMT",
|
||||
"registries": {
|
||||
"default": "https://registry.npmjs.org/",
|
||||
"@jsr": "https://npm.jsr.io/"
|
||||
},
|
||||
"skipped": [],
|
||||
"storeDir": "/home/meszmate/.local/share/pnpm/store/v10",
|
||||
"virtualStoreDir": ".pnpm",
|
||||
"virtualStoreDirMaxLength": 120
|
||||
}
|
||||
-25
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"lastValidatedTimestamp": 1779780129207,
|
||||
"projects": {},
|
||||
"pnpmfiles": [],
|
||||
"settings": {
|
||||
"autoInstallPeers": true,
|
||||
"dedupeDirectDeps": false,
|
||||
"dedupeInjectedDeps": true,
|
||||
"dedupePeerDependents": true,
|
||||
"dev": true,
|
||||
"excludeLinksFromLockfile": false,
|
||||
"hoistPattern": [
|
||||
"*"
|
||||
],
|
||||
"hoistWorkspacePackages": true,
|
||||
"injectWorkspacePackages": false,
|
||||
"linkWorkspacePackages": false,
|
||||
"nodeLinker": "isolated",
|
||||
"optional": true,
|
||||
"preferWorkspacePackages": false,
|
||||
"production": true,
|
||||
"publicHoistPattern": []
|
||||
},
|
||||
"filteredInstall": false
|
||||
}
|
||||
-21
@@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Framer B.V.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
-136
@@ -1,136 +0,0 @@
|
||||
<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for React</h1>
|
||||
<h3 align="center">
|
||||
An open source animation library<br />for React
|
||||
</h3>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a>
|
||||
<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a>
|
||||
<img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
|
||||
</p>
|
||||
|
||||
```bash
|
||||
npm install motion
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Why Motion?](#why-motion)
|
||||
2. [🍦 Platforms](#-platforms)
|
||||
3. [🎓 Examples](#-examples)
|
||||
4. [⚡️ Motion+](#-motion)
|
||||
5. [👩🏻⚖️ License](#-license)
|
||||
6. [💎 Contribute](#-contribute)
|
||||
7. [✨ Sponsors](#-sponsors)
|
||||
|
||||
## Why Motion?
|
||||
|
||||
- **Simple API:** First-class React, JavaScript, and Vue packages.
|
||||
- **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
|
||||
- **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
|
||||
**Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
|
||||
|
||||
## 🍦 Platforms
|
||||
|
||||
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
|
||||
|
||||
### React
|
||||
|
||||
```jsx
|
||||
import { motion } from "motion/react"
|
||||
|
||||
function Component() {
|
||||
return <motion.div animate={{ x: 100 }} />
|
||||
}
|
||||
```
|
||||
|
||||
Get started with [Motion for React](https://motion.dev/docs/react).
|
||||
|
||||
**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
|
||||
|
||||
### JS
|
||||
|
||||
```javascript
|
||||
import { animate } from "motion"
|
||||
|
||||
animate("#box", { x: 100 })
|
||||
```
|
||||
|
||||
Get started with [JavaScript](https://motion.dev/docs/quick-start).
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { motion } from "motion-v"
|
||||
</script>
|
||||
|
||||
<template> <motion.div :animate={{ x: 100 }} /> </template>
|
||||
```
|
||||
|
||||
Get started with [Motion for Vue](https://motion.dev/docs/vue).
|
||||
|
||||
## 🎓 Examples & tutorials
|
||||
|
||||
Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
|
||||
|
||||
Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
|
||||
|
||||
## ⚡️ Motion+
|
||||
|
||||
A one-time payment, lifetime-updates membership:
|
||||
|
||||
- **330+ examples**
|
||||
- **100+ tutorials**
|
||||
- **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
|
||||
- **Transition editor** for Cursor and VS Code
|
||||
- **AI skills**
|
||||
- **Private Discord**
|
||||
- **Early access content**
|
||||
|
||||
[Get Motion+](https://motion.dev/plus)
|
||||
|
||||
## 👩🏻⚖️ License
|
||||
|
||||
- Motion is MIT licensed.
|
||||
|
||||
## 💎 Contribute
|
||||
|
||||
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
|
||||
|
||||
## ✨ Sponsors
|
||||
|
||||
Motion is sustainable thanks to the kind support of its sponsors.
|
||||
|
||||
[Become a sponsor](https://motion.dev/sponsor)
|
||||
|
||||
### Partners
|
||||
|
||||
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
|
||||
|
||||
<a href="https://framer.link/FlnUbQY">
|
||||
<img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
|
||||
</a>
|
||||
|
||||
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
|
||||
|
||||
<a href="https://cursor.com">
|
||||
<img alt="Cursor" src="https://github.com/user-attachments/assets/81c482d3-c2c2-4b35-bbcf-933b28d5b448" width="250px" height="150px" />
|
||||
</a>
|
||||
|
||||
### Platinum
|
||||
|
||||
<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a> <a href="https://animations.dev"><img alt="Sanity" src="https://github.com/user-attachments/assets/7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b" width="250px" height="150px"></a> <a href="https://clerk.com?utm_campaign=motion"><img alt="Clerk" src="https://github.com/user-attachments/assets/16789f85-eaf4-46fb-9961-b3e66d33afbc" width="250px" height="150px"></a>
|
||||
|
||||
### Gold
|
||||
|
||||
### Silver
|
||||
|
||||
<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="150px" height="100px"></a> <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
|
||||
|
||||
### Personal
|
||||
|
||||
- [OlegWock](https://sinja.io)
|
||||
- [Lambert Weller](https://github.com/l-mbert)
|
||||
- [Jake LeBoeuf](https://jklb.wf)
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
This directory is a fallback for `exports["./client"]` in the root `framer-motion` `package.json`.
|
||||
Generated
Vendored
-6
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"types": "../dist/client.d.ts",
|
||||
"main": "../dist/cjs/client.js",
|
||||
"module": "../dist/es/client.mjs"
|
||||
}
|
||||
Generated
Vendored
-370
@@ -1,370 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var index = require('./index-6W16WHlG.js');
|
||||
var featureBundle = require('./feature-bundle-frRcWALD.js');
|
||||
require('react/jsx-runtime');
|
||||
require('motion-utils');
|
||||
require('react');
|
||||
require('motion-dom');
|
||||
|
||||
function createMotionComponentWithFeatures(Component, options) {
|
||||
return index.createMotionComponent(Component, options, featureBundle.featureBundle, featureBundle.createDomVisualElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML components
|
||||
*/
|
||||
const MotionA = /*@__PURE__*/ createMotionComponentWithFeatures("a");
|
||||
const MotionAbbr = /*@__PURE__*/ createMotionComponentWithFeatures("abbr");
|
||||
const MotionAddress = /*@__PURE__*/ createMotionComponentWithFeatures("address");
|
||||
const MotionArea = /*@__PURE__*/ createMotionComponentWithFeatures("area");
|
||||
const MotionArticle = /*@__PURE__*/ createMotionComponentWithFeatures("article");
|
||||
const MotionAside = /*@__PURE__*/ createMotionComponentWithFeatures("aside");
|
||||
const MotionAudio = /*@__PURE__*/ createMotionComponentWithFeatures("audio");
|
||||
const MotionB = /*@__PURE__*/ createMotionComponentWithFeatures("b");
|
||||
const MotionBase = /*@__PURE__*/ createMotionComponentWithFeatures("base");
|
||||
const MotionBdi = /*@__PURE__*/ createMotionComponentWithFeatures("bdi");
|
||||
const MotionBdo = /*@__PURE__*/ createMotionComponentWithFeatures("bdo");
|
||||
const MotionBig = /*@__PURE__*/ createMotionComponentWithFeatures("big");
|
||||
const MotionBlockquote =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("blockquote");
|
||||
const MotionBody = /*@__PURE__*/ createMotionComponentWithFeatures("body");
|
||||
const MotionButton = /*@__PURE__*/ createMotionComponentWithFeatures("button");
|
||||
const MotionCanvas = /*@__PURE__*/ createMotionComponentWithFeatures("canvas");
|
||||
const MotionCaption = /*@__PURE__*/ createMotionComponentWithFeatures("caption");
|
||||
const MotionCite = /*@__PURE__*/ createMotionComponentWithFeatures("cite");
|
||||
const MotionCode = /*@__PURE__*/ createMotionComponentWithFeatures("code");
|
||||
const MotionCol = /*@__PURE__*/ createMotionComponentWithFeatures("col");
|
||||
const MotionColgroup = /*@__PURE__*/ createMotionComponentWithFeatures("colgroup");
|
||||
const MotionData = /*@__PURE__*/ createMotionComponentWithFeatures("data");
|
||||
const MotionDatalist = /*@__PURE__*/ createMotionComponentWithFeatures("datalist");
|
||||
const MotionDd = /*@__PURE__*/ createMotionComponentWithFeatures("dd");
|
||||
const MotionDel = /*@__PURE__*/ createMotionComponentWithFeatures("del");
|
||||
const MotionDetails = /*@__PURE__*/ createMotionComponentWithFeatures("details");
|
||||
const MotionDfn = /*@__PURE__*/ createMotionComponentWithFeatures("dfn");
|
||||
const MotionDialog = /*@__PURE__*/ createMotionComponentWithFeatures("dialog");
|
||||
const MotionDiv = /*@__PURE__*/ createMotionComponentWithFeatures("div");
|
||||
const MotionDl = /*@__PURE__*/ createMotionComponentWithFeatures("dl");
|
||||
const MotionDt = /*@__PURE__*/ createMotionComponentWithFeatures("dt");
|
||||
const MotionEm = /*@__PURE__*/ createMotionComponentWithFeatures("em");
|
||||
const MotionEmbed = /*@__PURE__*/ createMotionComponentWithFeatures("embed");
|
||||
const MotionFieldset = /*@__PURE__*/ createMotionComponentWithFeatures("fieldset");
|
||||
const MotionFigcaption =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("figcaption");
|
||||
const MotionFigure = /*@__PURE__*/ createMotionComponentWithFeatures("figure");
|
||||
const MotionFooter = /*@__PURE__*/ createMotionComponentWithFeatures("footer");
|
||||
const MotionForm = /*@__PURE__*/ createMotionComponentWithFeatures("form");
|
||||
const MotionH1 = /*@__PURE__*/ createMotionComponentWithFeatures("h1");
|
||||
const MotionH2 = /*@__PURE__*/ createMotionComponentWithFeatures("h2");
|
||||
const MotionH3 = /*@__PURE__*/ createMotionComponentWithFeatures("h3");
|
||||
const MotionH4 = /*@__PURE__*/ createMotionComponentWithFeatures("h4");
|
||||
const MotionH5 = /*@__PURE__*/ createMotionComponentWithFeatures("h5");
|
||||
const MotionH6 = /*@__PURE__*/ createMotionComponentWithFeatures("h6");
|
||||
const MotionHead = /*@__PURE__*/ createMotionComponentWithFeatures("head");
|
||||
const MotionHeader = /*@__PURE__*/ createMotionComponentWithFeatures("header");
|
||||
const MotionHgroup = /*@__PURE__*/ createMotionComponentWithFeatures("hgroup");
|
||||
const MotionHr = /*@__PURE__*/ createMotionComponentWithFeatures("hr");
|
||||
const MotionHtml = /*@__PURE__*/ createMotionComponentWithFeatures("html");
|
||||
const MotionI = /*@__PURE__*/ createMotionComponentWithFeatures("i");
|
||||
const MotionIframe = /*@__PURE__*/ createMotionComponentWithFeatures("iframe");
|
||||
const MotionImg = /*@__PURE__*/ createMotionComponentWithFeatures("img");
|
||||
const MotionInput = /*@__PURE__*/ createMotionComponentWithFeatures("input");
|
||||
const MotionIns = /*@__PURE__*/ createMotionComponentWithFeatures("ins");
|
||||
const MotionKbd = /*@__PURE__*/ createMotionComponentWithFeatures("kbd");
|
||||
const MotionKeygen = /*@__PURE__*/ createMotionComponentWithFeatures("keygen");
|
||||
const MotionLabel = /*@__PURE__*/ createMotionComponentWithFeatures("label");
|
||||
const MotionLegend = /*@__PURE__*/ createMotionComponentWithFeatures("legend");
|
||||
const MotionLi = /*@__PURE__*/ createMotionComponentWithFeatures("li");
|
||||
const MotionLink = /*@__PURE__*/ createMotionComponentWithFeatures("link");
|
||||
const MotionMain = /*@__PURE__*/ createMotionComponentWithFeatures("main");
|
||||
const MotionMap = /*@__PURE__*/ createMotionComponentWithFeatures("map");
|
||||
const MotionMark = /*@__PURE__*/ createMotionComponentWithFeatures("mark");
|
||||
const MotionMenu = /*@__PURE__*/ createMotionComponentWithFeatures("menu");
|
||||
const MotionMenuitem = /*@__PURE__*/ createMotionComponentWithFeatures("menuitem");
|
||||
const MotionMeter = /*@__PURE__*/ createMotionComponentWithFeatures("meter");
|
||||
const MotionNav = /*@__PURE__*/ createMotionComponentWithFeatures("nav");
|
||||
const MotionObject = /*@__PURE__*/ createMotionComponentWithFeatures("object");
|
||||
const MotionOl = /*@__PURE__*/ createMotionComponentWithFeatures("ol");
|
||||
const MotionOptgroup = /*@__PURE__*/ createMotionComponentWithFeatures("optgroup");
|
||||
const MotionOption = /*@__PURE__*/ createMotionComponentWithFeatures("option");
|
||||
const MotionOutput = /*@__PURE__*/ createMotionComponentWithFeatures("output");
|
||||
const MotionP = /*@__PURE__*/ createMotionComponentWithFeatures("p");
|
||||
const MotionParam = /*@__PURE__*/ createMotionComponentWithFeatures("param");
|
||||
const MotionPicture = /*@__PURE__*/ createMotionComponentWithFeatures("picture");
|
||||
const MotionPre = /*@__PURE__*/ createMotionComponentWithFeatures("pre");
|
||||
const MotionProgress = /*@__PURE__*/ createMotionComponentWithFeatures("progress");
|
||||
const MotionQ = /*@__PURE__*/ createMotionComponentWithFeatures("q");
|
||||
const MotionRp = /*@__PURE__*/ createMotionComponentWithFeatures("rp");
|
||||
const MotionRt = /*@__PURE__*/ createMotionComponentWithFeatures("rt");
|
||||
const MotionRuby = /*@__PURE__*/ createMotionComponentWithFeatures("ruby");
|
||||
const MotionS = /*@__PURE__*/ createMotionComponentWithFeatures("s");
|
||||
const MotionSamp = /*@__PURE__*/ createMotionComponentWithFeatures("samp");
|
||||
const MotionScript = /*@__PURE__*/ createMotionComponentWithFeatures("script");
|
||||
const MotionSection = /*@__PURE__*/ createMotionComponentWithFeatures("section");
|
||||
const MotionSelect = /*@__PURE__*/ createMotionComponentWithFeatures("select");
|
||||
const MotionSmall = /*@__PURE__*/ createMotionComponentWithFeatures("small");
|
||||
const MotionSource = /*@__PURE__*/ createMotionComponentWithFeatures("source");
|
||||
const MotionSpan = /*@__PURE__*/ createMotionComponentWithFeatures("span");
|
||||
const MotionStrong = /*@__PURE__*/ createMotionComponentWithFeatures("strong");
|
||||
const MotionStyle = /*@__PURE__*/ createMotionComponentWithFeatures("style");
|
||||
const MotionSub = /*@__PURE__*/ createMotionComponentWithFeatures("sub");
|
||||
const MotionSummary = /*@__PURE__*/ createMotionComponentWithFeatures("summary");
|
||||
const MotionSup = /*@__PURE__*/ createMotionComponentWithFeatures("sup");
|
||||
const MotionTable = /*@__PURE__*/ createMotionComponentWithFeatures("table");
|
||||
const MotionTbody = /*@__PURE__*/ createMotionComponentWithFeatures("tbody");
|
||||
const MotionTd = /*@__PURE__*/ createMotionComponentWithFeatures("td");
|
||||
const MotionTextarea = /*@__PURE__*/ createMotionComponentWithFeatures("textarea");
|
||||
const MotionTfoot = /*@__PURE__*/ createMotionComponentWithFeatures("tfoot");
|
||||
const MotionTh = /*@__PURE__*/ createMotionComponentWithFeatures("th");
|
||||
const MotionThead = /*@__PURE__*/ createMotionComponentWithFeatures("thead");
|
||||
const MotionTime = /*@__PURE__*/ createMotionComponentWithFeatures("time");
|
||||
const MotionTitle = /*@__PURE__*/ createMotionComponentWithFeatures("title");
|
||||
const MotionTr = /*@__PURE__*/ createMotionComponentWithFeatures("tr");
|
||||
const MotionTrack = /*@__PURE__*/ createMotionComponentWithFeatures("track");
|
||||
const MotionU = /*@__PURE__*/ createMotionComponentWithFeatures("u");
|
||||
const MotionUl = /*@__PURE__*/ createMotionComponentWithFeatures("ul");
|
||||
const MotionVideo = /*@__PURE__*/ createMotionComponentWithFeatures("video");
|
||||
const MotionWbr = /*@__PURE__*/ createMotionComponentWithFeatures("wbr");
|
||||
const MotionWebview = /*@__PURE__*/ createMotionComponentWithFeatures("webview");
|
||||
/**
|
||||
* SVG components
|
||||
*/
|
||||
const MotionAnimate = /*@__PURE__*/ createMotionComponentWithFeatures("animate");
|
||||
const MotionCircle = /*@__PURE__*/ createMotionComponentWithFeatures("circle");
|
||||
const MotionDefs = /*@__PURE__*/ createMotionComponentWithFeatures("defs");
|
||||
const MotionDesc = /*@__PURE__*/ createMotionComponentWithFeatures("desc");
|
||||
const MotionEllipse = /*@__PURE__*/ createMotionComponentWithFeatures("ellipse");
|
||||
const MotionG = /*@__PURE__*/ createMotionComponentWithFeatures("g");
|
||||
const MotionImage = /*@__PURE__*/ createMotionComponentWithFeatures("image");
|
||||
const MotionLine = /*@__PURE__*/ createMotionComponentWithFeatures("line");
|
||||
const MotionFilter = /*@__PURE__*/ createMotionComponentWithFeatures("filter");
|
||||
const MotionMarker = /*@__PURE__*/ createMotionComponentWithFeatures("marker");
|
||||
const MotionMask = /*@__PURE__*/ createMotionComponentWithFeatures("mask");
|
||||
const MotionMetadata = /*@__PURE__*/ createMotionComponentWithFeatures("metadata");
|
||||
const MotionPath = /*@__PURE__*/ createMotionComponentWithFeatures("path");
|
||||
const MotionPattern = /*@__PURE__*/ createMotionComponentWithFeatures("pattern");
|
||||
const MotionPolygon = /*@__PURE__*/ createMotionComponentWithFeatures("polygon");
|
||||
const MotionPolyline = /*@__PURE__*/ createMotionComponentWithFeatures("polyline");
|
||||
const MotionRect = /*@__PURE__*/ createMotionComponentWithFeatures("rect");
|
||||
const MotionStop = /*@__PURE__*/ createMotionComponentWithFeatures("stop");
|
||||
const MotionSvg = /*@__PURE__*/ createMotionComponentWithFeatures("svg");
|
||||
const MotionSymbol = /*@__PURE__*/ createMotionComponentWithFeatures("symbol");
|
||||
const MotionText = /*@__PURE__*/ createMotionComponentWithFeatures("text");
|
||||
const MotionTspan = /*@__PURE__*/ createMotionComponentWithFeatures("tspan");
|
||||
const MotionUse = /*@__PURE__*/ createMotionComponentWithFeatures("use");
|
||||
const MotionView = /*@__PURE__*/ createMotionComponentWithFeatures("view");
|
||||
const MotionClipPath = /*@__PURE__*/ createMotionComponentWithFeatures("clipPath");
|
||||
const MotionFeBlend = /*@__PURE__*/ createMotionComponentWithFeatures("feBlend");
|
||||
const MotionFeColorMatrix =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feColorMatrix");
|
||||
const MotionFeComponentTransfer = /*@__PURE__*/ createMotionComponentWithFeatures("feComponentTransfer");
|
||||
const MotionFeComposite =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feComposite");
|
||||
const MotionFeConvolveMatrix =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feConvolveMatrix");
|
||||
const MotionFeDiffuseLighting =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feDiffuseLighting");
|
||||
const MotionFeDisplacementMap =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feDisplacementMap");
|
||||
const MotionFeDistantLight =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feDistantLight");
|
||||
const MotionFeDropShadow =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feDropShadow");
|
||||
const MotionFeFlood = /*@__PURE__*/ createMotionComponentWithFeatures("feFlood");
|
||||
const MotionFeFuncA = /*@__PURE__*/ createMotionComponentWithFeatures("feFuncA");
|
||||
const MotionFeFuncB = /*@__PURE__*/ createMotionComponentWithFeatures("feFuncB");
|
||||
const MotionFeFuncG = /*@__PURE__*/ createMotionComponentWithFeatures("feFuncG");
|
||||
const MotionFeFuncR = /*@__PURE__*/ createMotionComponentWithFeatures("feFuncR");
|
||||
const MotionFeGaussianBlur =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feGaussianBlur");
|
||||
const MotionFeImage = /*@__PURE__*/ createMotionComponentWithFeatures("feImage");
|
||||
const MotionFeMerge = /*@__PURE__*/ createMotionComponentWithFeatures("feMerge");
|
||||
const MotionFeMergeNode =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feMergeNode");
|
||||
const MotionFeMorphology =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feMorphology");
|
||||
const MotionFeOffset = /*@__PURE__*/ createMotionComponentWithFeatures("feOffset");
|
||||
const MotionFePointLight =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("fePointLight");
|
||||
const MotionFeSpecularLighting =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feSpecularLighting");
|
||||
const MotionFeSpotLight =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feSpotLight");
|
||||
const MotionFeTile = /*@__PURE__*/ createMotionComponentWithFeatures("feTile");
|
||||
const MotionFeTurbulence =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("feTurbulence");
|
||||
const MotionForeignObject =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("foreignObject");
|
||||
const MotionLinearGradient =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("linearGradient");
|
||||
const MotionRadialGradient =
|
||||
/*@__PURE__*/ createMotionComponentWithFeatures("radialGradient");
|
||||
const MotionTextPath = /*@__PURE__*/ createMotionComponentWithFeatures("textPath");
|
||||
|
||||
exports.a = MotionA;
|
||||
exports.abbr = MotionAbbr;
|
||||
exports.address = MotionAddress;
|
||||
exports.animate = MotionAnimate;
|
||||
exports.area = MotionArea;
|
||||
exports.article = MotionArticle;
|
||||
exports.aside = MotionAside;
|
||||
exports.audio = MotionAudio;
|
||||
exports.b = MotionB;
|
||||
exports.base = MotionBase;
|
||||
exports.bdi = MotionBdi;
|
||||
exports.bdo = MotionBdo;
|
||||
exports.big = MotionBig;
|
||||
exports.blockquote = MotionBlockquote;
|
||||
exports.body = MotionBody;
|
||||
exports.button = MotionButton;
|
||||
exports.canvas = MotionCanvas;
|
||||
exports.caption = MotionCaption;
|
||||
exports.circle = MotionCircle;
|
||||
exports.cite = MotionCite;
|
||||
exports.clipPath = MotionClipPath;
|
||||
exports.code = MotionCode;
|
||||
exports.col = MotionCol;
|
||||
exports.colgroup = MotionColgroup;
|
||||
exports.data = MotionData;
|
||||
exports.datalist = MotionDatalist;
|
||||
exports.dd = MotionDd;
|
||||
exports.defs = MotionDefs;
|
||||
exports.del = MotionDel;
|
||||
exports.desc = MotionDesc;
|
||||
exports.details = MotionDetails;
|
||||
exports.dfn = MotionDfn;
|
||||
exports.dialog = MotionDialog;
|
||||
exports.div = MotionDiv;
|
||||
exports.dl = MotionDl;
|
||||
exports.dt = MotionDt;
|
||||
exports.ellipse = MotionEllipse;
|
||||
exports.em = MotionEm;
|
||||
exports.embed = MotionEmbed;
|
||||
exports.feBlend = MotionFeBlend;
|
||||
exports.feColorMatrix = MotionFeColorMatrix;
|
||||
exports.feComponentTransfer = MotionFeComponentTransfer;
|
||||
exports.feComposite = MotionFeComposite;
|
||||
exports.feConvolveMatrix = MotionFeConvolveMatrix;
|
||||
exports.feDiffuseLighting = MotionFeDiffuseLighting;
|
||||
exports.feDisplacementMap = MotionFeDisplacementMap;
|
||||
exports.feDistantLight = MotionFeDistantLight;
|
||||
exports.feDropShadow = MotionFeDropShadow;
|
||||
exports.feFlood = MotionFeFlood;
|
||||
exports.feFuncA = MotionFeFuncA;
|
||||
exports.feFuncB = MotionFeFuncB;
|
||||
exports.feFuncG = MotionFeFuncG;
|
||||
exports.feFuncR = MotionFeFuncR;
|
||||
exports.feGaussianBlur = MotionFeGaussianBlur;
|
||||
exports.feImage = MotionFeImage;
|
||||
exports.feMerge = MotionFeMerge;
|
||||
exports.feMergeNode = MotionFeMergeNode;
|
||||
exports.feMorphology = MotionFeMorphology;
|
||||
exports.feOffset = MotionFeOffset;
|
||||
exports.fePointLight = MotionFePointLight;
|
||||
exports.feSpecularLighting = MotionFeSpecularLighting;
|
||||
exports.feSpotLight = MotionFeSpotLight;
|
||||
exports.feTile = MotionFeTile;
|
||||
exports.feTurbulence = MotionFeTurbulence;
|
||||
exports.fieldset = MotionFieldset;
|
||||
exports.figcaption = MotionFigcaption;
|
||||
exports.figure = MotionFigure;
|
||||
exports.filter = MotionFilter;
|
||||
exports.footer = MotionFooter;
|
||||
exports.foreignObject = MotionForeignObject;
|
||||
exports.form = MotionForm;
|
||||
exports.g = MotionG;
|
||||
exports.h1 = MotionH1;
|
||||
exports.h2 = MotionH2;
|
||||
exports.h3 = MotionH3;
|
||||
exports.h4 = MotionH4;
|
||||
exports.h5 = MotionH5;
|
||||
exports.h6 = MotionH6;
|
||||
exports.head = MotionHead;
|
||||
exports.header = MotionHeader;
|
||||
exports.hgroup = MotionHgroup;
|
||||
exports.hr = MotionHr;
|
||||
exports.html = MotionHtml;
|
||||
exports.i = MotionI;
|
||||
exports.iframe = MotionIframe;
|
||||
exports.image = MotionImage;
|
||||
exports.img = MotionImg;
|
||||
exports.input = MotionInput;
|
||||
exports.ins = MotionIns;
|
||||
exports.kbd = MotionKbd;
|
||||
exports.keygen = MotionKeygen;
|
||||
exports.label = MotionLabel;
|
||||
exports.legend = MotionLegend;
|
||||
exports.li = MotionLi;
|
||||
exports.line = MotionLine;
|
||||
exports.linearGradient = MotionLinearGradient;
|
||||
exports.link = MotionLink;
|
||||
exports.main = MotionMain;
|
||||
exports.map = MotionMap;
|
||||
exports.mark = MotionMark;
|
||||
exports.marker = MotionMarker;
|
||||
exports.mask = MotionMask;
|
||||
exports.menu = MotionMenu;
|
||||
exports.menuitem = MotionMenuitem;
|
||||
exports.metadata = MotionMetadata;
|
||||
exports.meter = MotionMeter;
|
||||
exports.nav = MotionNav;
|
||||
exports.object = MotionObject;
|
||||
exports.ol = MotionOl;
|
||||
exports.optgroup = MotionOptgroup;
|
||||
exports.option = MotionOption;
|
||||
exports.output = MotionOutput;
|
||||
exports.p = MotionP;
|
||||
exports.param = MotionParam;
|
||||
exports.path = MotionPath;
|
||||
exports.pattern = MotionPattern;
|
||||
exports.picture = MotionPicture;
|
||||
exports.polygon = MotionPolygon;
|
||||
exports.polyline = MotionPolyline;
|
||||
exports.pre = MotionPre;
|
||||
exports.progress = MotionProgress;
|
||||
exports.q = MotionQ;
|
||||
exports.radialGradient = MotionRadialGradient;
|
||||
exports.rect = MotionRect;
|
||||
exports.rp = MotionRp;
|
||||
exports.rt = MotionRt;
|
||||
exports.ruby = MotionRuby;
|
||||
exports.s = MotionS;
|
||||
exports.samp = MotionSamp;
|
||||
exports.script = MotionScript;
|
||||
exports.section = MotionSection;
|
||||
exports.select = MotionSelect;
|
||||
exports.small = MotionSmall;
|
||||
exports.source = MotionSource;
|
||||
exports.span = MotionSpan;
|
||||
exports.stop = MotionStop;
|
||||
exports.strong = MotionStrong;
|
||||
exports.style = MotionStyle;
|
||||
exports.sub = MotionSub;
|
||||
exports.summary = MotionSummary;
|
||||
exports.sup = MotionSup;
|
||||
exports.svg = MotionSvg;
|
||||
exports.symbol = MotionSymbol;
|
||||
exports.table = MotionTable;
|
||||
exports.tbody = MotionTbody;
|
||||
exports.td = MotionTd;
|
||||
exports.text = MotionText;
|
||||
exports.textPath = MotionTextPath;
|
||||
exports.textarea = MotionTextarea;
|
||||
exports.tfoot = MotionTfoot;
|
||||
exports.th = MotionTh;
|
||||
exports.thead = MotionThead;
|
||||
exports.time = MotionTime;
|
||||
exports.title = MotionTitle;
|
||||
exports.tr = MotionTr;
|
||||
exports.track = MotionTrack;
|
||||
exports.tspan = MotionTspan;
|
||||
exports.u = MotionU;
|
||||
exports.ul = MotionUl;
|
||||
exports.use = MotionUse;
|
||||
exports.video = MotionVideo;
|
||||
exports.view = MotionView;
|
||||
exports.wbr = MotionWbr;
|
||||
exports.webview = MotionWebview;
|
||||
//# sourceMappingURL=client.js.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-13
@@ -1,13 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var motionDom = require('motion-dom');
|
||||
|
||||
|
||||
|
||||
Object.defineProperty(exports, "recordStats", {
|
||||
enumerable: true,
|
||||
get: function () { return motionDom.recordStats; }
|
||||
});
|
||||
//# sourceMappingURL=debug.js.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"debug.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
||||
Generated
Vendored
-531
@@ -1,531 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var motionDom = require('motion-dom');
|
||||
var motionUtils = require('motion-utils');
|
||||
|
||||
function isDOMKeyframes(keyframes) {
|
||||
return typeof keyframes === "object" && !Array.isArray(keyframes);
|
||||
}
|
||||
|
||||
function resolveSubjects(subject, keyframes, scope, selectorCache) {
|
||||
if (subject == null) {
|
||||
return [];
|
||||
}
|
||||
if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
|
||||
return motionDom.resolveElements(subject, scope, selectorCache);
|
||||
}
|
||||
else if (subject instanceof NodeList) {
|
||||
return Array.from(subject);
|
||||
}
|
||||
else if (Array.isArray(subject)) {
|
||||
return subject.filter((s) => s != null);
|
||||
}
|
||||
else {
|
||||
return [subject];
|
||||
}
|
||||
}
|
||||
|
||||
function calculateRepeatDuration(duration, repeat, repeatDelay) {
|
||||
return duration * (repeat + 1) + repeatDelay * repeat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a absolute or relative time definition and current/prev time state of the sequence,
|
||||
* calculate an absolute time for the next keyframes.
|
||||
*/
|
||||
function calcNextTime(current, next, prev, labels) {
|
||||
if (typeof next === "number") {
|
||||
return next;
|
||||
}
|
||||
else if (next.startsWith("-") || next.startsWith("+")) {
|
||||
return Math.max(0, current + parseFloat(next));
|
||||
}
|
||||
else if (next === "<") {
|
||||
return prev;
|
||||
}
|
||||
else if (next.startsWith("<")) {
|
||||
return Math.max(0, prev + parseFloat(next.slice(1)));
|
||||
}
|
||||
else {
|
||||
return labels.get(next) ?? current;
|
||||
}
|
||||
}
|
||||
|
||||
function eraseKeyframes(sequence, startTime, endTime) {
|
||||
for (let i = 0; i < sequence.length; i++) {
|
||||
const keyframe = sequence[i];
|
||||
if (keyframe.at > startTime && keyframe.at < endTime) {
|
||||
motionUtils.removeItem(sequence, keyframe);
|
||||
// If we remove this item we have to push the pointer back one
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
|
||||
/**
|
||||
* Erase every existing value between currentTime and targetTime,
|
||||
* this will essentially splice this timeline into any currently
|
||||
* defined ones.
|
||||
*/
|
||||
eraseKeyframes(sequence, startTime, endTime);
|
||||
for (let i = 0; i < keyframes.length; i++) {
|
||||
sequence.push({
|
||||
value: keyframes[i],
|
||||
at: motionDom.mixNumber(startTime, endTime, offset[i]),
|
||||
easing: motionUtils.getEasingForSegment(easing, i),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Take an array of times that represent repeated keyframes. For instance
|
||||
* if we have original times of [0, 0.5, 1] then our repeated times will
|
||||
* be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
|
||||
* down to a 0-1 scale.
|
||||
*
|
||||
* `repeatDelayUnits` is the repeatDelay expressed in units of a single
|
||||
* iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.
|
||||
*/
|
||||
function normalizeTimes(times, repeat, repeatDelayUnits = 0) {
|
||||
const totalUnits = repeat + 1 + repeat * repeatDelayUnits;
|
||||
for (let i = 0; i < times.length; i++) {
|
||||
times[i] = times[i] / totalUnits;
|
||||
}
|
||||
}
|
||||
|
||||
function compareByTime(a, b) {
|
||||
if (a.at === b.at) {
|
||||
if (a.value === null)
|
||||
return 1;
|
||||
if (b.value === null)
|
||||
return -1;
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return a.at - b.at;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultSegmentEasing = "easeInOut";
|
||||
const MAX_REPEAT = 20;
|
||||
function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
|
||||
const defaultDuration = defaultTransition.duration || 0.3;
|
||||
const animationDefinitions = new Map();
|
||||
const sequences = new Map();
|
||||
const elementCache = {};
|
||||
const timeLabels = new Map();
|
||||
let prevTime = 0;
|
||||
let currentTime = 0;
|
||||
let totalDuration = 0;
|
||||
/**
|
||||
* Build the timeline by mapping over the sequence array and converting
|
||||
* the definitions into keyframes and offsets with absolute time values.
|
||||
* These will later get converted into relative offsets in a second pass.
|
||||
*/
|
||||
for (let i = 0; i < sequence.length; i++) {
|
||||
const segment = sequence[i];
|
||||
/**
|
||||
* If this is a timeline label, mark it and skip the rest of this iteration.
|
||||
*/
|
||||
if (typeof segment === "string") {
|
||||
timeLabels.set(segment, currentTime);
|
||||
continue;
|
||||
}
|
||||
else if (!Array.isArray(segment)) {
|
||||
timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
|
||||
continue;
|
||||
}
|
||||
let [subject, keyframes, transition = {}] = segment;
|
||||
/**
|
||||
* If a relative or absolute time value has been specified we need to resolve
|
||||
* it in relation to the currentTime.
|
||||
*/
|
||||
if (transition.at !== undefined) {
|
||||
currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
|
||||
}
|
||||
/**
|
||||
* Keep track of the maximum duration in this definition. This will be
|
||||
* applied to currentTime once the definition has been parsed.
|
||||
*/
|
||||
let maxDuration = 0;
|
||||
const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
|
||||
const valueKeyframesAsList = keyframesAsList(valueKeyframes);
|
||||
const { delay = 0, times = motionDom.defaultOffset(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
|
||||
let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
|
||||
/**
|
||||
* Resolve stagger() if defined.
|
||||
*/
|
||||
const calculatedDelay = typeof delay === "function"
|
||||
? delay(elementIndex, numSubjects)
|
||||
: delay;
|
||||
/**
|
||||
* If this animation should and can use a spring, generate a spring easing function.
|
||||
*/
|
||||
const numKeyframes = valueKeyframesAsList.length;
|
||||
const createGenerator = motionDom.isGenerator(type)
|
||||
? type
|
||||
: generators?.[type || "keyframes"];
|
||||
if (numKeyframes <= 2 && createGenerator) {
|
||||
/**
|
||||
* As we're creating an easing function from a spring,
|
||||
* ideally we want to generate it using the real distance
|
||||
* between the two keyframes. However this isn't always
|
||||
* possible - in these situations we use 0-100.
|
||||
*/
|
||||
let absoluteDelta = 100;
|
||||
if (numKeyframes === 2 &&
|
||||
isNumberKeyframesArray(valueKeyframesAsList)) {
|
||||
const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
|
||||
absoluteDelta = Math.abs(delta);
|
||||
}
|
||||
const springTransition = {
|
||||
...defaultTransition,
|
||||
...remainingTransition,
|
||||
};
|
||||
if (duration !== undefined) {
|
||||
springTransition.duration = motionUtils.secondsToMilliseconds(duration);
|
||||
}
|
||||
const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
|
||||
ease = springEasing.ease;
|
||||
duration = springEasing.duration;
|
||||
}
|
||||
duration ?? (duration = defaultDuration);
|
||||
const startTime = currentTime + calculatedDelay;
|
||||
/**
|
||||
* If there's only one time offset of 0, fill in a second with length 1
|
||||
*/
|
||||
if (times.length === 1 && times[0] === 0) {
|
||||
times[1] = 1;
|
||||
}
|
||||
/**
|
||||
* Fill out if offset if fewer offsets than keyframes
|
||||
*/
|
||||
const remainder = times.length - valueKeyframesAsList.length;
|
||||
remainder > 0 && motionDom.fillOffset(times, remainder);
|
||||
/**
|
||||
* If only one value has been set, ie [1], push a null to the start of
|
||||
* the keyframe array. This will let us mark a keyframe at this point
|
||||
* that will later be hydrated with the previous value.
|
||||
*/
|
||||
valueKeyframesAsList.length === 1 &&
|
||||
valueKeyframesAsList.unshift(null);
|
||||
/**
|
||||
* Segments can't express `repeat: Infinity` or very large
|
||||
* counts — they'd leave dead time after the segment or
|
||||
* explode the keyframe array. Ignore with a warning.
|
||||
*/
|
||||
if (repeat) {
|
||||
motionUtils.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
|
||||
}
|
||||
if (repeat && repeat < MAX_REPEAT) {
|
||||
/**
|
||||
* Express repeatDelay in units of a single iteration's duration
|
||||
* so it can be added to the per-iteration time offsets below
|
||||
* before they're normalized to 0-1.
|
||||
*/
|
||||
const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
|
||||
duration = calculateRepeatDuration(duration, repeat, repeatDelay);
|
||||
const originalKeyframes = [...valueKeyframesAsList];
|
||||
const originalTimes = [...times];
|
||||
ease = Array.isArray(ease) ? [...ease] : [ease];
|
||||
const originalEase = [...ease];
|
||||
/**
|
||||
* For reverse/mirror, alternate iterations play the segment
|
||||
* backwards. mirror matches JSAnimation's mirroredGenerator:
|
||||
* reversed keyframes, easings unchanged. reverse matches
|
||||
* JSAnimation's iterationProgress = 1 - p: reversed
|
||||
* keyframes, easing array reversed AND each function easing
|
||||
* mapped through reverseEasing (string easings unchanged —
|
||||
* they're resolved later by the keyframes engine).
|
||||
*/
|
||||
const isFlipping = repeatType === "reverse" || repeatType === "mirror";
|
||||
let flippedKeyframes = originalKeyframes;
|
||||
let flippedEases = originalEase;
|
||||
if (isFlipping) {
|
||||
flippedKeyframes = [...originalKeyframes].reverse();
|
||||
if (repeatType === "reverse") {
|
||||
flippedEases = [...originalEase]
|
||||
.reverse()
|
||||
.map((e) => typeof e === "function"
|
||||
? motionUtils.reverseEasing(e)
|
||||
: e);
|
||||
}
|
||||
}
|
||||
for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
|
||||
const isFlipped = isFlipping && repeatIndex % 2 === 0;
|
||||
const iterKeyframes = isFlipped
|
||||
? flippedKeyframes
|
||||
: originalKeyframes;
|
||||
const iterEase = isFlipped ? flippedEases : originalEase;
|
||||
const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
|
||||
/**
|
||||
* If repeatDelay is set, hold the previous iteration's
|
||||
* final value through the delay by inserting a keyframe
|
||||
* at the moment the next iteration begins.
|
||||
*/
|
||||
if (repeatDelayUnits > 0) {
|
||||
valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
|
||||
times.push(iterStartOffset);
|
||||
ease.push("linear");
|
||||
}
|
||||
valueKeyframesAsList.push(...iterKeyframes);
|
||||
for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
|
||||
times.push(originalTimes[keyframeIndex] + iterStartOffset);
|
||||
ease.push(keyframeIndex === 0
|
||||
? "linear"
|
||||
: motionUtils.getEasingForSegment(iterEase, keyframeIndex - 1));
|
||||
}
|
||||
}
|
||||
normalizeTimes(times, repeat, repeatDelayUnits);
|
||||
}
|
||||
const targetTime = startTime + duration;
|
||||
/**
|
||||
* Add keyframes, mapping offsets to absolute time.
|
||||
*/
|
||||
addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
|
||||
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
||||
totalDuration = Math.max(targetTime, totalDuration);
|
||||
};
|
||||
if (motionDom.isMotionValue(subject)) {
|
||||
const subjectSequence = getSubjectSequence(subject, sequences);
|
||||
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
||||
}
|
||||
else {
|
||||
const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
|
||||
const numSubjects = subjects.length;
|
||||
/**
|
||||
* For every element in this segment, process the defined values.
|
||||
*/
|
||||
for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
|
||||
/**
|
||||
* Cast necessary, but we know these are of this type
|
||||
*/
|
||||
keyframes = keyframes;
|
||||
transition = transition;
|
||||
const thisSubject = subjects[subjectIndex];
|
||||
const subjectSequence = getSubjectSequence(thisSubject, sequences);
|
||||
for (const key in keyframes) {
|
||||
resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
|
||||
}
|
||||
}
|
||||
}
|
||||
prevTime = currentTime;
|
||||
currentTime += maxDuration;
|
||||
}
|
||||
/**
|
||||
* For every element and value combination create a new animation.
|
||||
*/
|
||||
sequences.forEach((valueSequences, element) => {
|
||||
for (const key in valueSequences) {
|
||||
const valueSequence = valueSequences[key];
|
||||
/**
|
||||
* Arrange all the keyframes in ascending time order.
|
||||
*/
|
||||
valueSequence.sort(compareByTime);
|
||||
const keyframes = [];
|
||||
const valueOffset = [];
|
||||
const valueEasing = [];
|
||||
/**
|
||||
* For each keyframe, translate absolute times into
|
||||
* relative offsets based on the total duration of the timeline.
|
||||
*/
|
||||
for (let i = 0; i < valueSequence.length; i++) {
|
||||
const { at, value, easing } = valueSequence[i];
|
||||
keyframes.push(value);
|
||||
valueOffset.push(motionUtils.progress(0, totalDuration, at));
|
||||
valueEasing.push(easing || "easeOut");
|
||||
}
|
||||
/**
|
||||
* If the first keyframe doesn't land on offset: 0
|
||||
* provide one by duplicating the initial keyframe. This ensures
|
||||
* it snaps to the first keyframe when the animation starts.
|
||||
*/
|
||||
if (valueOffset[0] !== 0) {
|
||||
valueOffset.unshift(0);
|
||||
keyframes.unshift(keyframes[0]);
|
||||
valueEasing.unshift(defaultSegmentEasing);
|
||||
}
|
||||
/**
|
||||
* If the last keyframe doesn't land on offset: 1
|
||||
* provide one with a null wildcard value. This will ensure it
|
||||
* stays static until the end of the animation.
|
||||
*/
|
||||
if (valueOffset[valueOffset.length - 1] !== 1) {
|
||||
valueOffset.push(1);
|
||||
keyframes.push(null);
|
||||
}
|
||||
if (!animationDefinitions.has(element)) {
|
||||
animationDefinitions.set(element, {
|
||||
keyframes: {},
|
||||
transition: {},
|
||||
});
|
||||
}
|
||||
const definition = animationDefinitions.get(element);
|
||||
definition.keyframes[key] = keyframes;
|
||||
/**
|
||||
* Exclude `type` from defaultTransition since springs have been
|
||||
* converted to duration-based easing functions in resolveValueSequence.
|
||||
* Including `type: "spring"` would cause JSAnimation to error when
|
||||
* the merged keyframes array has more than 2 keyframes.
|
||||
*/
|
||||
const { type: _type, ...remainingDefaultTransition } = defaultTransition;
|
||||
definition.transition[key] = {
|
||||
...remainingDefaultTransition,
|
||||
duration: totalDuration,
|
||||
ease: valueEasing,
|
||||
times: valueOffset,
|
||||
...sequenceTransition,
|
||||
};
|
||||
}
|
||||
});
|
||||
return animationDefinitions;
|
||||
}
|
||||
function getSubjectSequence(subject, sequences) {
|
||||
!sequences.has(subject) && sequences.set(subject, {});
|
||||
return sequences.get(subject);
|
||||
}
|
||||
function getValueSequence(name, sequences) {
|
||||
if (!sequences[name])
|
||||
sequences[name] = [];
|
||||
return sequences[name];
|
||||
}
|
||||
function keyframesAsList(keyframes) {
|
||||
return Array.isArray(keyframes) ? keyframes : [keyframes];
|
||||
}
|
||||
function getValueTransition(transition, key) {
|
||||
return transition && transition[key]
|
||||
? {
|
||||
...transition,
|
||||
...transition[key],
|
||||
}
|
||||
: { ...transition };
|
||||
}
|
||||
const isNumber = (keyframe) => typeof keyframe === "number";
|
||||
const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
|
||||
|
||||
function animateElements(elementOrSelector, keyframes, options, scope) {
|
||||
// Gracefully handle null/undefined elements (e.g., from querySelector returning null)
|
||||
if (elementOrSelector == null) {
|
||||
return [];
|
||||
}
|
||||
const elements = motionDom.resolveElements(elementOrSelector, scope);
|
||||
const numElements = elements.length;
|
||||
motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
|
||||
/**
|
||||
* WAAPI doesn't support interrupting animations.
|
||||
*
|
||||
* Therefore, starting animations requires a three-step process:
|
||||
* 1. Stop existing animations (write styles to DOM)
|
||||
* 2. Resolve keyframes (read styles from DOM)
|
||||
* 3. Create new animations (write styles to DOM)
|
||||
*
|
||||
* The hybrid `animate()` function uses AsyncAnimation to resolve
|
||||
* keyframes before creating new animations, which removes style
|
||||
* thrashing. Here, we have much stricter filesize constraints.
|
||||
* Therefore we do this in a synchronous way that ensures that
|
||||
* at least within `animate()` calls there is no style thrashing.
|
||||
*
|
||||
* In the motion-native-animate-mini-interrupt benchmark this
|
||||
* was 80% faster than a single loop.
|
||||
*/
|
||||
const animationDefinitions = [];
|
||||
/**
|
||||
* Step 1: Build options and stop existing animations (write)
|
||||
*/
|
||||
for (let i = 0; i < numElements; i++) {
|
||||
const element = elements[i];
|
||||
const elementTransition = { ...options };
|
||||
/**
|
||||
* Resolve stagger function if provided.
|
||||
*/
|
||||
if (typeof elementTransition.delay === "function") {
|
||||
elementTransition.delay = elementTransition.delay(i, numElements);
|
||||
}
|
||||
for (const valueName in keyframes) {
|
||||
let valueKeyframes = keyframes[valueName];
|
||||
if (!Array.isArray(valueKeyframes)) {
|
||||
valueKeyframes = [valueKeyframes];
|
||||
}
|
||||
const valueOptions = {
|
||||
...motionDom.getValueTransition(elementTransition, valueName),
|
||||
};
|
||||
valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
|
||||
valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
|
||||
/**
|
||||
* If there's an existing animation playing on this element then stop it
|
||||
* before creating a new one.
|
||||
*/
|
||||
const map = motionDom.getAnimationMap(element);
|
||||
const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
|
||||
const currentAnimation = map.get(key);
|
||||
currentAnimation && currentAnimation.stop();
|
||||
animationDefinitions.push({
|
||||
map,
|
||||
key,
|
||||
unresolvedKeyframes: valueKeyframes,
|
||||
options: {
|
||||
...valueOptions,
|
||||
element,
|
||||
name: valueName,
|
||||
allowFlatten: !elementTransition.type && !elementTransition.ease,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Step 2: Resolve keyframes (read)
|
||||
*/
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
|
||||
const { element, name, pseudoElement } = animationOptions;
|
||||
if (!pseudoElement && unresolvedKeyframes[0] === null) {
|
||||
unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
|
||||
}
|
||||
motionDom.fillWildcards(unresolvedKeyframes);
|
||||
motionDom.applyPxDefaults(unresolvedKeyframes, name);
|
||||
/**
|
||||
* If we only have one keyframe, explicitly read the initial keyframe
|
||||
* from the computed style. This is to ensure consistency with WAAPI behaviour
|
||||
* for restarting animations, for instance .play() after finish, when it
|
||||
* has one vs two keyframes.
|
||||
*/
|
||||
if (!pseudoElement && unresolvedKeyframes.length < 2) {
|
||||
unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
|
||||
}
|
||||
animationOptions.keyframes = unresolvedKeyframes;
|
||||
}
|
||||
/**
|
||||
* Step 3: Create new animations (write)
|
||||
*/
|
||||
const animations = [];
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { map, key, options: animationOptions } = animationDefinitions[i];
|
||||
const animation = new motionDom.NativeAnimation(animationOptions);
|
||||
map.set(key, animation);
|
||||
animation.finished.finally(() => map.delete(key));
|
||||
animations.push(animation);
|
||||
}
|
||||
return animations;
|
||||
}
|
||||
|
||||
function animateSequence(definition, options) {
|
||||
const animations = [];
|
||||
createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
|
||||
animations.push(...animateElements(element, keyframes, transition));
|
||||
});
|
||||
return new motionDom.GroupAnimationWithThen(animations);
|
||||
}
|
||||
|
||||
const createScopedWaapiAnimate = (scope) => {
|
||||
function scopedAnimate(elementOrSelector, keyframes, options) {
|
||||
return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
|
||||
}
|
||||
return scopedAnimate;
|
||||
};
|
||||
const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
|
||||
|
||||
exports.animate = animateMini;
|
||||
exports.animateSequence = animateSequence;
|
||||
//# sourceMappingURL=dom-mini.js.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-1354
File diff suppressed because it is too large
Load Diff
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-1656
File diff suppressed because it is too large
Load Diff
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-802
@@ -1,802 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var jsxRuntime = require('react/jsx-runtime');
|
||||
var motionUtils = require('motion-utils');
|
||||
var React = require('react');
|
||||
var motionDom = require('motion-dom');
|
||||
|
||||
const LayoutGroupContext = React.createContext({});
|
||||
|
||||
/**
|
||||
* Creates a constant value over the lifecycle of a component.
|
||||
*
|
||||
* Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
|
||||
* a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
|
||||
* you can ensure that initialisers don't execute twice or more.
|
||||
*/
|
||||
function useConstant(init) {
|
||||
const ref = React.useRef(null);
|
||||
if (ref.current === null) {
|
||||
ref.current = init();
|
||||
}
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
const isBrowser = typeof window !== "undefined";
|
||||
|
||||
const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
const PresenceContext =
|
||||
/* @__PURE__ */ React.createContext(null);
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
const MotionConfigContext = React.createContext({
|
||||
transformPagePoint: (p) => p,
|
||||
isStatic: false,
|
||||
reducedMotion: "never",
|
||||
});
|
||||
|
||||
const LazyContext = React.createContext({ strict: false });
|
||||
|
||||
const featureProps = {
|
||||
animation: [
|
||||
"animate",
|
||||
"variants",
|
||||
"whileHover",
|
||||
"whileTap",
|
||||
"exit",
|
||||
"whileInView",
|
||||
"whileFocus",
|
||||
"whileDrag",
|
||||
],
|
||||
exit: ["exit"],
|
||||
drag: ["drag", "dragControls"],
|
||||
focus: ["whileFocus"],
|
||||
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
|
||||
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
|
||||
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
|
||||
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
|
||||
layout: ["layout", "layoutId"],
|
||||
};
|
||||
let isInitialized = false;
|
||||
/**
|
||||
* Initialize feature definitions with isEnabled checks.
|
||||
* This must be called before any motion components are rendered.
|
||||
*/
|
||||
function initFeatureDefinitions() {
|
||||
if (isInitialized)
|
||||
return;
|
||||
const initialFeatureDefinitions = {};
|
||||
for (const key in featureProps) {
|
||||
initialFeatureDefinitions[key] = {
|
||||
isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
|
||||
};
|
||||
}
|
||||
motionDom.setFeatureDefinitions(initialFeatureDefinitions);
|
||||
isInitialized = true;
|
||||
}
|
||||
/**
|
||||
* Get the current feature definitions, initializing if needed.
|
||||
*/
|
||||
function getInitializedFeatureDefinitions() {
|
||||
initFeatureDefinitions();
|
||||
return motionDom.getFeatureDefinitions();
|
||||
}
|
||||
|
||||
function loadFeatures(features) {
|
||||
const featureDefinitions = getInitializedFeatureDefinitions();
|
||||
for (const key in features) {
|
||||
featureDefinitions[key] = {
|
||||
...featureDefinitions[key],
|
||||
...features[key],
|
||||
};
|
||||
}
|
||||
motionDom.setFeatureDefinitions(featureDefinitions);
|
||||
}
|
||||
|
||||
/**
|
||||
* A list of all valid MotionProps.
|
||||
*
|
||||
* @privateRemarks
|
||||
* This doesn't throw if a `MotionProp` name is missing - it should.
|
||||
*/
|
||||
const validMotionProps = new Set([
|
||||
"animate",
|
||||
"exit",
|
||||
"variants",
|
||||
"initial",
|
||||
"style",
|
||||
"values",
|
||||
"variants",
|
||||
"transition",
|
||||
"transformTemplate",
|
||||
"custom",
|
||||
"inherit",
|
||||
"onBeforeLayoutMeasure",
|
||||
"onAnimationStart",
|
||||
"onAnimationComplete",
|
||||
"onUpdate",
|
||||
"onDragStart",
|
||||
"onDrag",
|
||||
"onDragEnd",
|
||||
"onMeasureDragConstraints",
|
||||
"onDirectionLock",
|
||||
"onDragTransitionEnd",
|
||||
"_dragX",
|
||||
"_dragY",
|
||||
"onHoverStart",
|
||||
"onHoverEnd",
|
||||
"onViewportEnter",
|
||||
"onViewportLeave",
|
||||
"globalTapTarget",
|
||||
"propagate",
|
||||
"ignoreStrict",
|
||||
"viewport",
|
||||
]);
|
||||
/**
|
||||
* Check whether a prop name is a valid `MotionProp` key.
|
||||
*
|
||||
* @param key - Name of the property to check
|
||||
* @returns `true` is key is a valid `MotionProp`.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function isValidMotionProp(key) {
|
||||
return (key.startsWith("while") ||
|
||||
(key.startsWith("drag") && key !== "draggable") ||
|
||||
key.startsWith("layout") ||
|
||||
key.startsWith("onTap") ||
|
||||
key.startsWith("onPan") ||
|
||||
key.startsWith("onLayout") ||
|
||||
validMotionProps.has(key));
|
||||
}
|
||||
|
||||
let shouldForward = (key) => !isValidMotionProp(key);
|
||||
function loadExternalIsValidProp(isValidProp) {
|
||||
if (typeof isValidProp !== "function")
|
||||
return;
|
||||
// Explicitly filter our events
|
||||
shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
|
||||
}
|
||||
/**
|
||||
* Emotion and Styled Components both allow users to pass through arbitrary props to their components
|
||||
* to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
|
||||
* of these should be passed to the underlying DOM node.
|
||||
*
|
||||
* However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
|
||||
* as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
|
||||
* passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
|
||||
* `@emotion/is-prop-valid`, however to fix this problem we need to use it.
|
||||
*
|
||||
* By making it an optionalDependency we can offer this functionality only in the situations where it's
|
||||
* actually required.
|
||||
*/
|
||||
try {
|
||||
/**
|
||||
* We attempt to import this package but require won't be defined in esm environments, in that case
|
||||
* isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
|
||||
* in favour of explicit injection.
|
||||
*
|
||||
* String concatenation prevents bundlers like webpack (e.g. Storybook)
|
||||
* from statically resolving this optional dependency at build time.
|
||||
*/
|
||||
const emotionPkg = "@emotion/is-prop-" + "valid";
|
||||
loadExternalIsValidProp(require(emotionPkg).default);
|
||||
}
|
||||
catch {
|
||||
// We don't need to actually do anything here - the fallback is the existing `isPropValid`.
|
||||
}
|
||||
function filterProps(props, isDom, forwardMotionProps) {
|
||||
const filteredProps = {};
|
||||
for (const key in props) {
|
||||
/**
|
||||
* values is considered a valid prop by Emotion, so if it's present
|
||||
* this will be rendered out to the DOM unless explicitly filtered.
|
||||
*
|
||||
* We check the type as it could be used with the `feColorMatrix`
|
||||
* element, which we support.
|
||||
*/
|
||||
if (key === "values" && typeof props.values === "object")
|
||||
continue;
|
||||
if (motionDom.isMotionValue(props[key]))
|
||||
continue;
|
||||
if (shouldForward(key) ||
|
||||
(forwardMotionProps === true && isValidMotionProp(key)) ||
|
||||
(!isDom && !isValidMotionProp(key)) ||
|
||||
// If trying to use native HTML drag events, forward drag listeners
|
||||
(props["draggable"] &&
|
||||
key.startsWith("onDrag"))) {
|
||||
filteredProps[key] =
|
||||
props[key];
|
||||
}
|
||||
}
|
||||
return filteredProps;
|
||||
}
|
||||
|
||||
/**
|
||||
* We keep these listed separately as we use the lowercase tag names as part
|
||||
* of the runtime bundle to detect SVG components
|
||||
*/
|
||||
const lowercaseSVGElements = [
|
||||
"animate",
|
||||
"circle",
|
||||
"defs",
|
||||
"desc",
|
||||
"ellipse",
|
||||
"g",
|
||||
"image",
|
||||
"line",
|
||||
"filter",
|
||||
"marker",
|
||||
"mask",
|
||||
"metadata",
|
||||
"path",
|
||||
"pattern",
|
||||
"polygon",
|
||||
"polyline",
|
||||
"rect",
|
||||
"stop",
|
||||
"switch",
|
||||
"symbol",
|
||||
"svg",
|
||||
"text",
|
||||
"tspan",
|
||||
"use",
|
||||
"view",
|
||||
];
|
||||
|
||||
function isSVGComponent(Component) {
|
||||
if (
|
||||
/**
|
||||
* If it's not a string, it's a custom React component. Currently we only support
|
||||
* HTML custom React components.
|
||||
*/
|
||||
typeof Component !== "string" ||
|
||||
/**
|
||||
* If it contains a dash, the element is a custom HTML webcomponent.
|
||||
*/
|
||||
Component.includes("-")) {
|
||||
return false;
|
||||
}
|
||||
else if (
|
||||
/**
|
||||
* If it's in our list of lowercase SVG tags, it's an SVG component
|
||||
*/
|
||||
lowercaseSVGElements.indexOf(Component) > -1 ||
|
||||
/**
|
||||
* If it contains a capital letter, it's an SVG component
|
||||
*/
|
||||
/[A-Z]/u.test(Component)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const MotionContext = /* @__PURE__ */ React.createContext({});
|
||||
|
||||
function getCurrentTreeVariants(props, context) {
|
||||
if (motionDom.isControllingVariants(props)) {
|
||||
const { initial, animate } = props;
|
||||
return {
|
||||
initial: initial === false || motionDom.isVariantLabel(initial)
|
||||
? initial
|
||||
: undefined,
|
||||
animate: motionDom.isVariantLabel(animate) ? animate : undefined,
|
||||
};
|
||||
}
|
||||
return props.inherit !== false ? context : {};
|
||||
}
|
||||
|
||||
function useCreateMotionContext(props) {
|
||||
const { initial, animate } = getCurrentTreeVariants(props, React.useContext(MotionContext));
|
||||
return React.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
|
||||
}
|
||||
function variantLabelsAsDependency(prop) {
|
||||
return Array.isArray(prop) ? prop.join(" ") : prop;
|
||||
}
|
||||
|
||||
const createHtmlRenderState = () => ({
|
||||
style: {},
|
||||
transform: {},
|
||||
transformOrigin: {},
|
||||
vars: {},
|
||||
});
|
||||
|
||||
function copyRawValuesOnly(target, source, props) {
|
||||
for (const key in source) {
|
||||
if (!motionDom.isMotionValue(source[key]) && !motionDom.isForcedMotionValue(key, props)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
function useInitialMotionValues({ transformTemplate }, visualState) {
|
||||
return React.useMemo(() => {
|
||||
const state = createHtmlRenderState();
|
||||
motionDom.buildHTMLStyles(state, visualState, transformTemplate);
|
||||
return Object.assign({}, state.vars, state.style);
|
||||
}, [visualState]);
|
||||
}
|
||||
function useStyle(props, visualState) {
|
||||
const styleProp = props.style || {};
|
||||
const style = {};
|
||||
/**
|
||||
* Copy non-Motion Values straight into style
|
||||
*/
|
||||
copyRawValuesOnly(style, styleProp, props);
|
||||
Object.assign(style, useInitialMotionValues(props, visualState));
|
||||
return style;
|
||||
}
|
||||
function useHTMLProps(props, visualState) {
|
||||
// The `any` isn't ideal but it is the type of createElement props argument
|
||||
const htmlProps = {};
|
||||
const style = useStyle(props, visualState);
|
||||
if (props.drag && props.dragListener !== false) {
|
||||
// Disable the ghost element when a user drags
|
||||
htmlProps.draggable = false;
|
||||
// Disable text selection
|
||||
style.userSelect =
|
||||
style.WebkitUserSelect =
|
||||
style.WebkitTouchCallout =
|
||||
"none";
|
||||
// Disable scrolling on the draggable direction
|
||||
style.touchAction =
|
||||
props.drag === true
|
||||
? "none"
|
||||
: `pan-${props.drag === "x" ? "y" : "x"}`;
|
||||
}
|
||||
if (props.tabIndex === undefined &&
|
||||
(props.onTap || props.onTapStart || props.whileTap)) {
|
||||
htmlProps.tabIndex = 0;
|
||||
}
|
||||
htmlProps.style = style;
|
||||
return htmlProps;
|
||||
}
|
||||
|
||||
const createSvgRenderState = () => ({
|
||||
...createHtmlRenderState(),
|
||||
attrs: {},
|
||||
});
|
||||
|
||||
function useSVGProps(props, visualState, _isStatic, Component) {
|
||||
const visualProps = React.useMemo(() => {
|
||||
const state = createSvgRenderState();
|
||||
motionDom.buildSVGAttrs(state, visualState, motionDom.isSVGTag(Component), props.transformTemplate, props.style);
|
||||
return {
|
||||
...state.attrs,
|
||||
style: { ...state.style },
|
||||
};
|
||||
}, [visualState]);
|
||||
if (props.style) {
|
||||
const rawStyles = {};
|
||||
copyRawValuesOnly(rawStyles, props.style, props);
|
||||
visualProps.style = { ...rawStyles, ...visualProps.style };
|
||||
}
|
||||
return visualProps;
|
||||
}
|
||||
|
||||
function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false, isSVG) {
|
||||
const useVisualProps = (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps;
|
||||
const visualProps = useVisualProps(props, latestValues, isStatic, Component);
|
||||
const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
|
||||
const elementProps = Component !== React.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
|
||||
/**
|
||||
* If component has been handed a motion value as its child,
|
||||
* memoise its initial value and render that. Subsequent updates
|
||||
* will be handled by the onChange handler
|
||||
*/
|
||||
const { children } = props;
|
||||
const renderedChildren = React.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
|
||||
return React.createElement(Component, {
|
||||
...elementProps,
|
||||
children: renderedChildren,
|
||||
});
|
||||
}
|
||||
|
||||
function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
|
||||
const state = {
|
||||
latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
|
||||
renderState: createRenderState(),
|
||||
};
|
||||
return state;
|
||||
}
|
||||
function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
|
||||
const values = {};
|
||||
const motionValues = scrapeMotionValues(props, {});
|
||||
for (const key in motionValues) {
|
||||
values[key] = motionDom.resolveMotionValue(motionValues[key]);
|
||||
}
|
||||
let { initial, animate } = props;
|
||||
const isControllingVariants = motionDom.isControllingVariants(props);
|
||||
const isVariantNode = motionDom.isVariantNode(props);
|
||||
if (context &&
|
||||
isVariantNode &&
|
||||
!isControllingVariants &&
|
||||
props.inherit !== false) {
|
||||
if (initial === undefined)
|
||||
initial = context.initial;
|
||||
if (animate === undefined)
|
||||
animate = context.animate;
|
||||
}
|
||||
let isInitialAnimationBlocked = presenceContext
|
||||
? presenceContext.initial === false
|
||||
: false;
|
||||
isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
|
||||
const variantToSet = isInitialAnimationBlocked ? animate : initial;
|
||||
if (variantToSet &&
|
||||
typeof variantToSet !== "boolean" &&
|
||||
!motionDom.isAnimationControls(variantToSet)) {
|
||||
const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const resolved = motionDom.resolveVariantFromProps(props, list[i]);
|
||||
if (resolved) {
|
||||
const { transitionEnd, transition, ...target } = resolved;
|
||||
for (const key in target) {
|
||||
let valueTarget = target[key];
|
||||
if (Array.isArray(valueTarget)) {
|
||||
/**
|
||||
* Take final keyframe if the initial animation is blocked because
|
||||
* we want to initialise at the end of that blocked animation.
|
||||
*/
|
||||
const index = isInitialAnimationBlocked
|
||||
? valueTarget.length - 1
|
||||
: 0;
|
||||
valueTarget = valueTarget[index];
|
||||
}
|
||||
if (valueTarget !== null) {
|
||||
values[key] = valueTarget;
|
||||
}
|
||||
}
|
||||
for (const key in transitionEnd) {
|
||||
values[key] = transitionEnd[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return values;
|
||||
}
|
||||
const makeUseVisualState = (config) => (props, isStatic) => {
|
||||
const context = React.useContext(MotionContext);
|
||||
const presenceContext = React.useContext(PresenceContext);
|
||||
const make = () => makeState(config, props, context, presenceContext);
|
||||
return isStatic ? make() : useConstant(make);
|
||||
};
|
||||
|
||||
const useHTMLVisualState = /*@__PURE__*/ makeUseVisualState({
|
||||
scrapeMotionValuesFromProps: motionDom.scrapeHTMLMotionValuesFromProps,
|
||||
createRenderState: createHtmlRenderState,
|
||||
});
|
||||
|
||||
const useSVGVisualState = /*@__PURE__*/ makeUseVisualState({
|
||||
scrapeMotionValuesFromProps: motionDom.scrapeSVGMotionValuesFromProps,
|
||||
createRenderState: createSvgRenderState,
|
||||
});
|
||||
|
||||
const motionComponentSymbol = Symbol.for("motionComponentSymbol");
|
||||
|
||||
/**
|
||||
* Creates a ref function that, when called, hydrates the provided
|
||||
* external ref and VisualElement.
|
||||
*/
|
||||
function useMotionRef(visualState, visualElement, externalRef) {
|
||||
/**
|
||||
* Store externalRef in a ref to avoid including it in the useCallback
|
||||
* dependency array. Including externalRef in dependencies causes issues
|
||||
* with libraries like Radix UI that create new callback refs on each render
|
||||
* when using asChild - this would cause the callback to be recreated,
|
||||
* triggering element remounts and breaking AnimatePresence exit animations.
|
||||
*/
|
||||
const externalRefContainer = React.useRef(externalRef);
|
||||
React.useInsertionEffect(() => {
|
||||
externalRefContainer.current = externalRef;
|
||||
});
|
||||
// Store cleanup function returned by callback refs (React 19 feature)
|
||||
const refCleanup = React.useRef(null);
|
||||
return React.useCallback((instance) => {
|
||||
if (instance) {
|
||||
visualState.onMount?.(instance);
|
||||
}
|
||||
if (visualElement) {
|
||||
instance ? visualElement.mount(instance) : visualElement.unmount();
|
||||
}
|
||||
const ref = externalRefContainer.current;
|
||||
if (typeof ref === "function") {
|
||||
if (instance) {
|
||||
const cleanup = ref(instance);
|
||||
if (typeof cleanup === "function") {
|
||||
refCleanup.current = cleanup;
|
||||
}
|
||||
}
|
||||
else if (refCleanup.current) {
|
||||
refCleanup.current();
|
||||
refCleanup.current = null;
|
||||
}
|
||||
else {
|
||||
ref(instance);
|
||||
}
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = instance;
|
||||
}
|
||||
}, [visualElement]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal, exported only for usage in Framer
|
||||
*/
|
||||
const SwitchLayoutGroupContext = React.createContext({});
|
||||
|
||||
function isRefObject(ref) {
|
||||
return (ref &&
|
||||
typeof ref === "object" &&
|
||||
Object.prototype.hasOwnProperty.call(ref, "current"));
|
||||
}
|
||||
|
||||
function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
|
||||
const { visualElement: parent } = React.useContext(MotionContext);
|
||||
const lazyContext = React.useContext(LazyContext);
|
||||
const presenceContext = React.useContext(PresenceContext);
|
||||
const motionConfig = React.useContext(MotionConfigContext);
|
||||
const reducedMotionConfig = motionConfig.reducedMotion;
|
||||
const skipAnimations = motionConfig.skipAnimations;
|
||||
const visualElementRef = React.useRef(null);
|
||||
/**
|
||||
* Track whether the component has been through React's commit phase.
|
||||
* Used to detect when LazyMotion features load after the component has mounted.
|
||||
*/
|
||||
const hasMountedOnce = React.useRef(false);
|
||||
/**
|
||||
* If we haven't preloaded a renderer, check to see if we have one lazy-loaded
|
||||
*/
|
||||
createVisualElement =
|
||||
createVisualElement ||
|
||||
lazyContext.renderer;
|
||||
if (!visualElementRef.current && createVisualElement) {
|
||||
visualElementRef.current = createVisualElement(Component, {
|
||||
visualState,
|
||||
parent,
|
||||
props,
|
||||
presenceContext,
|
||||
blockInitialAnimation: presenceContext
|
||||
? presenceContext.initial === false
|
||||
: false,
|
||||
reducedMotionConfig,
|
||||
skipAnimations,
|
||||
isSVG,
|
||||
});
|
||||
/**
|
||||
* If the component has already mounted before features loaded (e.g. via
|
||||
* LazyMotion with async feature loading), we need to force the initial
|
||||
* animation to run. Otherwise state changes that occurred before features
|
||||
* loaded will be lost and the element will snap to its final state.
|
||||
*/
|
||||
if (hasMountedOnce.current && visualElementRef.current) {
|
||||
visualElementRef.current.manuallyAnimateOnMount = true;
|
||||
}
|
||||
}
|
||||
const visualElement = visualElementRef.current;
|
||||
/**
|
||||
* Load Motion gesture and animation features. These are rendered as renderless
|
||||
* components so each feature can optionally make use of React lifecycle methods.
|
||||
*/
|
||||
const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
|
||||
if (visualElement &&
|
||||
!visualElement.projection &&
|
||||
ProjectionNodeConstructor &&
|
||||
(visualElement.type === "html" || visualElement.type === "svg")) {
|
||||
createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
|
||||
}
|
||||
const isMounted = React.useRef(false);
|
||||
React.useInsertionEffect(() => {
|
||||
/**
|
||||
* Check the component has already mounted before calling
|
||||
* `update` unnecessarily. This ensures we skip the initial update.
|
||||
*/
|
||||
if (visualElement && isMounted.current) {
|
||||
visualElement.update(props, presenceContext);
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Cache this value as we want to know whether HandoffAppearAnimations
|
||||
* was present on initial render - it will be deleted after this.
|
||||
*/
|
||||
const optimisedAppearId = props[motionDom.optimizedAppearDataAttribute];
|
||||
const wantsHandoff = React.useRef(Boolean(optimisedAppearId) &&
|
||||
typeof window !== "undefined" &&
|
||||
!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
|
||||
window.MotionHasOptimisedAnimation?.(optimisedAppearId));
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
/**
|
||||
* Track that this component has mounted. This is used to detect when
|
||||
* LazyMotion features load after the component has already committed.
|
||||
*/
|
||||
hasMountedOnce.current = true;
|
||||
if (!visualElement)
|
||||
return;
|
||||
isMounted.current = true;
|
||||
window.MotionIsMounted = true;
|
||||
visualElement.updateFeatures();
|
||||
visualElement.scheduleRenderMicrotask();
|
||||
/**
|
||||
* Ideally this function would always run in a useEffect.
|
||||
*
|
||||
* However, if we have optimised appear animations to handoff from,
|
||||
* it needs to happen synchronously to ensure there's no flash of
|
||||
* incorrect styles in the event of a hydration error.
|
||||
*
|
||||
* So if we detect a situtation where optimised appear animations
|
||||
* are running, we use useLayoutEffect to trigger animations.
|
||||
*/
|
||||
if (wantsHandoff.current && visualElement.animationState) {
|
||||
visualElement.animationState.animateChanges();
|
||||
}
|
||||
});
|
||||
React.useEffect(() => {
|
||||
if (!visualElement)
|
||||
return;
|
||||
if (!wantsHandoff.current && visualElement.animationState) {
|
||||
visualElement.animationState.animateChanges();
|
||||
}
|
||||
if (wantsHandoff.current) {
|
||||
// This ensures all future calls to animateChanges() in this component will run in useEffect
|
||||
queueMicrotask(() => {
|
||||
window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
|
||||
});
|
||||
wantsHandoff.current = false;
|
||||
}
|
||||
/**
|
||||
* Now we've finished triggering animations for this element we
|
||||
* can wipe the enteringChildren set for the next render.
|
||||
*/
|
||||
visualElement.enteringChildren = undefined;
|
||||
});
|
||||
return visualElement;
|
||||
}
|
||||
function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
|
||||
const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, layoutAnchor, layoutCrossfade, } = props;
|
||||
visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]
|
||||
? undefined
|
||||
: getClosestProjectingNode(visualElement.parent));
|
||||
visualElement.projection.setOptions({
|
||||
layoutId,
|
||||
layout,
|
||||
alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
|
||||
visualElement,
|
||||
/**
|
||||
* TODO: Update options in an effect. This could be tricky as it'll be too late
|
||||
* to update by the time layout animations run.
|
||||
* We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
|
||||
* ensuring it gets called if there's no potential layout animations.
|
||||
*
|
||||
*/
|
||||
animationType: typeof layout === "string" ? layout : "both",
|
||||
initialPromotionConfig,
|
||||
crossfade: layoutCrossfade,
|
||||
layoutScroll,
|
||||
layoutRoot,
|
||||
layoutAnchor,
|
||||
});
|
||||
}
|
||||
function getClosestProjectingNode(visualElement) {
|
||||
if (!visualElement)
|
||||
return undefined;
|
||||
return visualElement.options.allowProjection !== false
|
||||
? visualElement.projection
|
||||
: getClosestProjectingNode(visualElement.parent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a `motion` component.
|
||||
*
|
||||
* This function accepts a Component argument, which can be either a string (ie "div"
|
||||
* for `motion.div`), or an actual React component.
|
||||
*
|
||||
* Alongside this is a config option which provides a way of rendering the provided
|
||||
* component "offline", or outside the React render cycle.
|
||||
*/
|
||||
function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
|
||||
preloadedFeatures && loadFeatures(preloadedFeatures);
|
||||
/**
|
||||
* Determine whether to use SVG or HTML rendering based on:
|
||||
* 1. Explicit `type` option (highest priority)
|
||||
* 2. Auto-detection via `isSVGComponent`
|
||||
*/
|
||||
const isSVG = type ? type === "svg" : isSVGComponent(Component);
|
||||
const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
|
||||
function MotionDOMComponent(props, externalRef) {
|
||||
/**
|
||||
* If we need to measure the element we load this functionality in a
|
||||
* separate class component in order to gain access to getSnapshotBeforeUpdate.
|
||||
*/
|
||||
let MeasureLayout;
|
||||
const configAndProps = {
|
||||
...React.useContext(MotionConfigContext),
|
||||
...props,
|
||||
layoutId: useLayoutId(props),
|
||||
};
|
||||
const { isStatic } = configAndProps;
|
||||
const context = useCreateMotionContext(props);
|
||||
const visualState = useVisualState(props, isStatic);
|
||||
if (!isStatic && typeof window !== "undefined") {
|
||||
useStrictMode(configAndProps, preloadedFeatures);
|
||||
const layoutProjection = getProjectionFunctionality(configAndProps);
|
||||
MeasureLayout = layoutProjection.MeasureLayout;
|
||||
/**
|
||||
* Create a VisualElement for this component. A VisualElement provides a common
|
||||
* interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
|
||||
* providing a way of rendering to these APIs outside of the React render loop
|
||||
* for more performant animations and interactions
|
||||
*/
|
||||
context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
|
||||
}
|
||||
/**
|
||||
* The mount order and hierarchy is specific to ensure our element ref
|
||||
* is hydrated by the time features fire their effects.
|
||||
*/
|
||||
return (jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsxRuntime.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG)] }));
|
||||
}
|
||||
MotionDOMComponent.displayName = `motion.${typeof Component === "string"
|
||||
? Component
|
||||
: `create(${Component.displayName ?? Component.name ?? ""})`}`;
|
||||
const ForwardRefMotionComponent = React.forwardRef(MotionDOMComponent);
|
||||
ForwardRefMotionComponent[motionComponentSymbol] = Component;
|
||||
return ForwardRefMotionComponent;
|
||||
}
|
||||
function useLayoutId({ layoutId }) {
|
||||
const layoutGroupId = React.useContext(LayoutGroupContext).id;
|
||||
return layoutGroupId && layoutId !== undefined
|
||||
? layoutGroupId + "-" + layoutId
|
||||
: layoutId;
|
||||
}
|
||||
function useStrictMode(configAndProps, preloadedFeatures) {
|
||||
const isStrict = React.useContext(LazyContext).strict;
|
||||
/**
|
||||
* If we're in development mode, check to make sure we're not rendering a motion component
|
||||
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|
||||
*/
|
||||
if (process.env.NODE_ENV !== "production" &&
|
||||
preloadedFeatures &&
|
||||
isStrict) {
|
||||
const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
|
||||
configAndProps.ignoreStrict
|
||||
? motionUtils.warning(false, strictMessage, "lazy-strict-mode")
|
||||
: motionUtils.invariant(false, strictMessage, "lazy-strict-mode");
|
||||
}
|
||||
}
|
||||
function getProjectionFunctionality(props) {
|
||||
const featureDefinitions = getInitializedFeatureDefinitions();
|
||||
const { drag, layout } = featureDefinitions;
|
||||
if (!drag && !layout)
|
||||
return {};
|
||||
const combined = { ...drag, ...layout };
|
||||
return {
|
||||
MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
|
||||
? combined.MeasureLayout
|
||||
: undefined,
|
||||
ProjectionNode: combined.ProjectionNode,
|
||||
};
|
||||
}
|
||||
|
||||
exports.LayoutGroupContext = LayoutGroupContext;
|
||||
exports.LazyContext = LazyContext;
|
||||
exports.MotionConfigContext = MotionConfigContext;
|
||||
exports.MotionContext = MotionContext;
|
||||
exports.PresenceContext = PresenceContext;
|
||||
exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
|
||||
exports.createMotionComponent = createMotionComponent;
|
||||
exports.filterProps = filterProps;
|
||||
exports.isBrowser = isBrowser;
|
||||
exports.isRefObject = isRefObject;
|
||||
exports.isSVGComponent = isSVGComponent;
|
||||
exports.isValidMotionProp = isValidMotionProp;
|
||||
exports.loadExternalIsValidProp = loadExternalIsValidProp;
|
||||
exports.loadFeatures = loadFeatures;
|
||||
exports.makeUseVisualState = makeUseVisualState;
|
||||
exports.motionComponentSymbol = motionComponentSymbol;
|
||||
exports.useConstant = useConstant;
|
||||
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
||||
//# sourceMappingURL=index-6W16WHlG.js.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-3706
File diff suppressed because it is too large
Load Diff
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-403
@@ -1,403 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var index = require('./index-6W16WHlG.js');
|
||||
require('react/jsx-runtime');
|
||||
require('motion-utils');
|
||||
require('react');
|
||||
require('motion-dom');
|
||||
|
||||
function createMinimalMotionComponent(Component, options) {
|
||||
return index.createMotionComponent(Component, options);
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML components
|
||||
*/
|
||||
const MotionA = /*@__PURE__*/ createMinimalMotionComponent("a");
|
||||
const MotionAbbr = /*@__PURE__*/ createMinimalMotionComponent("abbr");
|
||||
const MotionAddress =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("address");
|
||||
const MotionArea = /*@__PURE__*/ createMinimalMotionComponent("area");
|
||||
const MotionArticle =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("article");
|
||||
const MotionAside = /*@__PURE__*/ createMinimalMotionComponent("aside");
|
||||
const MotionAudio = /*@__PURE__*/ createMinimalMotionComponent("audio");
|
||||
const MotionB = /*@__PURE__*/ createMinimalMotionComponent("b");
|
||||
const MotionBase = /*@__PURE__*/ createMinimalMotionComponent("base");
|
||||
const MotionBdi = /*@__PURE__*/ createMinimalMotionComponent("bdi");
|
||||
const MotionBdo = /*@__PURE__*/ createMinimalMotionComponent("bdo");
|
||||
const MotionBig = /*@__PURE__*/ createMinimalMotionComponent("big");
|
||||
const MotionBlockquote =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("blockquote");
|
||||
const MotionBody = /*@__PURE__*/ createMinimalMotionComponent("body");
|
||||
const MotionButton = /*@__PURE__*/ createMinimalMotionComponent("button");
|
||||
const MotionCanvas = /*@__PURE__*/ createMinimalMotionComponent("canvas");
|
||||
const MotionCaption =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("caption");
|
||||
const MotionCite = /*@__PURE__*/ createMinimalMotionComponent("cite");
|
||||
const MotionCode = /*@__PURE__*/ createMinimalMotionComponent("code");
|
||||
const MotionCol = /*@__PURE__*/ createMinimalMotionComponent("col");
|
||||
const MotionColgroup =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("colgroup");
|
||||
const MotionData = /*@__PURE__*/ createMinimalMotionComponent("data");
|
||||
const MotionDatalist =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("datalist");
|
||||
const MotionDd = /*@__PURE__*/ createMinimalMotionComponent("dd");
|
||||
const MotionDel = /*@__PURE__*/ createMinimalMotionComponent("del");
|
||||
const MotionDetails =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("details");
|
||||
const MotionDfn = /*@__PURE__*/ createMinimalMotionComponent("dfn");
|
||||
const MotionDialog = /*@__PURE__*/ createMinimalMotionComponent("dialog");
|
||||
const MotionDiv = /*@__PURE__*/ createMinimalMotionComponent("div");
|
||||
const MotionDl = /*@__PURE__*/ createMinimalMotionComponent("dl");
|
||||
const MotionDt = /*@__PURE__*/ createMinimalMotionComponent("dt");
|
||||
const MotionEm = /*@__PURE__*/ createMinimalMotionComponent("em");
|
||||
const MotionEmbed = /*@__PURE__*/ createMinimalMotionComponent("embed");
|
||||
const MotionFieldset =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("fieldset");
|
||||
const MotionFigcaption =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("figcaption");
|
||||
const MotionFigure = /*@__PURE__*/ createMinimalMotionComponent("figure");
|
||||
const MotionFooter = /*@__PURE__*/ createMinimalMotionComponent("footer");
|
||||
const MotionForm = /*@__PURE__*/ createMinimalMotionComponent("form");
|
||||
const MotionH1 = /*@__PURE__*/ createMinimalMotionComponent("h1");
|
||||
const MotionH2 = /*@__PURE__*/ createMinimalMotionComponent("h2");
|
||||
const MotionH3 = /*@__PURE__*/ createMinimalMotionComponent("h3");
|
||||
const MotionH4 = /*@__PURE__*/ createMinimalMotionComponent("h4");
|
||||
const MotionH5 = /*@__PURE__*/ createMinimalMotionComponent("h5");
|
||||
const MotionH6 = /*@__PURE__*/ createMinimalMotionComponent("h6");
|
||||
const MotionHead = /*@__PURE__*/ createMinimalMotionComponent("head");
|
||||
const MotionHeader = /*@__PURE__*/ createMinimalMotionComponent("header");
|
||||
const MotionHgroup = /*@__PURE__*/ createMinimalMotionComponent("hgroup");
|
||||
const MotionHr = /*@__PURE__*/ createMinimalMotionComponent("hr");
|
||||
const MotionHtml = /*@__PURE__*/ createMinimalMotionComponent("html");
|
||||
const MotionI = /*@__PURE__*/ createMinimalMotionComponent("i");
|
||||
const MotionIframe = /*@__PURE__*/ createMinimalMotionComponent("iframe");
|
||||
const MotionImg = /*@__PURE__*/ createMinimalMotionComponent("img");
|
||||
const MotionInput = /*@__PURE__*/ createMinimalMotionComponent("input");
|
||||
const MotionIns = /*@__PURE__*/ createMinimalMotionComponent("ins");
|
||||
const MotionKbd = /*@__PURE__*/ createMinimalMotionComponent("kbd");
|
||||
const MotionKeygen = /*@__PURE__*/ createMinimalMotionComponent("keygen");
|
||||
const MotionLabel = /*@__PURE__*/ createMinimalMotionComponent("label");
|
||||
const MotionLegend = /*@__PURE__*/ createMinimalMotionComponent("legend");
|
||||
const MotionLi = /*@__PURE__*/ createMinimalMotionComponent("li");
|
||||
const MotionLink = /*@__PURE__*/ createMinimalMotionComponent("link");
|
||||
const MotionMain = /*@__PURE__*/ createMinimalMotionComponent("main");
|
||||
const MotionMap = /*@__PURE__*/ createMinimalMotionComponent("map");
|
||||
const MotionMark = /*@__PURE__*/ createMinimalMotionComponent("mark");
|
||||
const MotionMenu = /*@__PURE__*/ createMinimalMotionComponent("menu");
|
||||
const MotionMenuitem =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("menuitem");
|
||||
const MotionMeter = /*@__PURE__*/ createMinimalMotionComponent("meter");
|
||||
const MotionNav = /*@__PURE__*/ createMinimalMotionComponent("nav");
|
||||
const MotionObject = /*@__PURE__*/ createMinimalMotionComponent("object");
|
||||
const MotionOl = /*@__PURE__*/ createMinimalMotionComponent("ol");
|
||||
const MotionOptgroup =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("optgroup");
|
||||
const MotionOption = /*@__PURE__*/ createMinimalMotionComponent("option");
|
||||
const MotionOutput = /*@__PURE__*/ createMinimalMotionComponent("output");
|
||||
const MotionP = /*@__PURE__*/ createMinimalMotionComponent("p");
|
||||
const MotionParam = /*@__PURE__*/ createMinimalMotionComponent("param");
|
||||
const MotionPicture =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("picture");
|
||||
const MotionPre = /*@__PURE__*/ createMinimalMotionComponent("pre");
|
||||
const MotionProgress =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("progress");
|
||||
const MotionQ = /*@__PURE__*/ createMinimalMotionComponent("q");
|
||||
const MotionRp = /*@__PURE__*/ createMinimalMotionComponent("rp");
|
||||
const MotionRt = /*@__PURE__*/ createMinimalMotionComponent("rt");
|
||||
const MotionRuby = /*@__PURE__*/ createMinimalMotionComponent("ruby");
|
||||
const MotionS = /*@__PURE__*/ createMinimalMotionComponent("s");
|
||||
const MotionSamp = /*@__PURE__*/ createMinimalMotionComponent("samp");
|
||||
const MotionScript = /*@__PURE__*/ createMinimalMotionComponent("script");
|
||||
const MotionSection =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("section");
|
||||
const MotionSelect = /*@__PURE__*/ createMinimalMotionComponent("select");
|
||||
const MotionSmall = /*@__PURE__*/ createMinimalMotionComponent("small");
|
||||
const MotionSource = /*@__PURE__*/ createMinimalMotionComponent("source");
|
||||
const MotionSpan = /*@__PURE__*/ createMinimalMotionComponent("span");
|
||||
const MotionStrong = /*@__PURE__*/ createMinimalMotionComponent("strong");
|
||||
const MotionStyle = /*@__PURE__*/ createMinimalMotionComponent("style");
|
||||
const MotionSub = /*@__PURE__*/ createMinimalMotionComponent("sub");
|
||||
const MotionSummary =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("summary");
|
||||
const MotionSup = /*@__PURE__*/ createMinimalMotionComponent("sup");
|
||||
const MotionTable = /*@__PURE__*/ createMinimalMotionComponent("table");
|
||||
const MotionTbody = /*@__PURE__*/ createMinimalMotionComponent("tbody");
|
||||
const MotionTd = /*@__PURE__*/ createMinimalMotionComponent("td");
|
||||
const MotionTextarea =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("textarea");
|
||||
const MotionTfoot = /*@__PURE__*/ createMinimalMotionComponent("tfoot");
|
||||
const MotionTh = /*@__PURE__*/ createMinimalMotionComponent("th");
|
||||
const MotionThead = /*@__PURE__*/ createMinimalMotionComponent("thead");
|
||||
const MotionTime = /*@__PURE__*/ createMinimalMotionComponent("time");
|
||||
const MotionTitle = /*@__PURE__*/ createMinimalMotionComponent("title");
|
||||
const MotionTr = /*@__PURE__*/ createMinimalMotionComponent("tr");
|
||||
const MotionTrack = /*@__PURE__*/ createMinimalMotionComponent("track");
|
||||
const MotionU = /*@__PURE__*/ createMinimalMotionComponent("u");
|
||||
const MotionUl = /*@__PURE__*/ createMinimalMotionComponent("ul");
|
||||
const MotionVideo = /*@__PURE__*/ createMinimalMotionComponent("video");
|
||||
const MotionWbr = /*@__PURE__*/ createMinimalMotionComponent("wbr");
|
||||
const MotionWebview =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("webview");
|
||||
/**
|
||||
* SVG components
|
||||
*/
|
||||
const MotionAnimate =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("animate");
|
||||
const MotionCircle = /*@__PURE__*/ createMinimalMotionComponent("circle");
|
||||
const MotionDefs = /*@__PURE__*/ createMinimalMotionComponent("defs");
|
||||
const MotionDesc = /*@__PURE__*/ createMinimalMotionComponent("desc");
|
||||
const MotionEllipse =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("ellipse");
|
||||
const MotionG = /*@__PURE__*/ createMinimalMotionComponent("g");
|
||||
const MotionImage = /*@__PURE__*/ createMinimalMotionComponent("image");
|
||||
const MotionLine = /*@__PURE__*/ createMinimalMotionComponent("line");
|
||||
const MotionFilter = /*@__PURE__*/ createMinimalMotionComponent("filter");
|
||||
const MotionMarker = /*@__PURE__*/ createMinimalMotionComponent("marker");
|
||||
const MotionMask = /*@__PURE__*/ createMinimalMotionComponent("mask");
|
||||
const MotionMetadata =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("metadata");
|
||||
const MotionPath = /*@__PURE__*/ createMinimalMotionComponent("path");
|
||||
const MotionPattern =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("pattern");
|
||||
const MotionPolygon =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("polygon");
|
||||
const MotionPolyline =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("polyline");
|
||||
const MotionRect = /*@__PURE__*/ createMinimalMotionComponent("rect");
|
||||
const MotionStop = /*@__PURE__*/ createMinimalMotionComponent("stop");
|
||||
const MotionSvg = /*@__PURE__*/ createMinimalMotionComponent("svg");
|
||||
const MotionSymbol = /*@__PURE__*/ createMinimalMotionComponent("symbol");
|
||||
const MotionText = /*@__PURE__*/ createMinimalMotionComponent("text");
|
||||
const MotionTspan = /*@__PURE__*/ createMinimalMotionComponent("tspan");
|
||||
const MotionUse = /*@__PURE__*/ createMinimalMotionComponent("use");
|
||||
const MotionView = /*@__PURE__*/ createMinimalMotionComponent("view");
|
||||
const MotionClipPath =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("clipPath");
|
||||
const MotionFeBlend =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feBlend");
|
||||
const MotionFeColorMatrix =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feColorMatrix");
|
||||
const MotionFeComponentTransfer =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feComponentTransfer");
|
||||
const MotionFeComposite =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feComposite");
|
||||
const MotionFeConvolveMatrix =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feConvolveMatrix");
|
||||
const MotionFeDiffuseLighting =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feDiffuseLighting");
|
||||
const MotionFeDisplacementMap =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feDisplacementMap");
|
||||
const MotionFeDistantLight =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feDistantLight");
|
||||
const MotionFeDropShadow =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feDropShadow");
|
||||
const MotionFeFlood =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feFlood");
|
||||
const MotionFeFuncA =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feFuncA");
|
||||
const MotionFeFuncB =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feFuncB");
|
||||
const MotionFeFuncG =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feFuncG");
|
||||
const MotionFeFuncR =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feFuncR");
|
||||
const MotionFeGaussianBlur =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feGaussianBlur");
|
||||
const MotionFeImage =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feImage");
|
||||
const MotionFeMerge =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feMerge");
|
||||
const MotionFeMergeNode =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feMergeNode");
|
||||
const MotionFeMorphology =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feMorphology");
|
||||
const MotionFeOffset =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feOffset");
|
||||
const MotionFePointLight =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("fePointLight");
|
||||
const MotionFeSpecularLighting =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feSpecularLighting");
|
||||
const MotionFeSpotLight =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feSpotLight");
|
||||
const MotionFeTile = /*@__PURE__*/ createMinimalMotionComponent("feTile");
|
||||
const MotionFeTurbulence =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("feTurbulence");
|
||||
const MotionForeignObject =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("foreignObject");
|
||||
const MotionLinearGradient =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("linearGradient");
|
||||
const MotionRadialGradient =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("radialGradient");
|
||||
const MotionTextPath =
|
||||
/*@__PURE__*/ createMinimalMotionComponent("textPath");
|
||||
|
||||
exports.a = MotionA;
|
||||
exports.abbr = MotionAbbr;
|
||||
exports.address = MotionAddress;
|
||||
exports.animate = MotionAnimate;
|
||||
exports.area = MotionArea;
|
||||
exports.article = MotionArticle;
|
||||
exports.aside = MotionAside;
|
||||
exports.audio = MotionAudio;
|
||||
exports.b = MotionB;
|
||||
exports.base = MotionBase;
|
||||
exports.bdi = MotionBdi;
|
||||
exports.bdo = MotionBdo;
|
||||
exports.big = MotionBig;
|
||||
exports.blockquote = MotionBlockquote;
|
||||
exports.body = MotionBody;
|
||||
exports.button = MotionButton;
|
||||
exports.canvas = MotionCanvas;
|
||||
exports.caption = MotionCaption;
|
||||
exports.circle = MotionCircle;
|
||||
exports.cite = MotionCite;
|
||||
exports.clipPath = MotionClipPath;
|
||||
exports.code = MotionCode;
|
||||
exports.col = MotionCol;
|
||||
exports.colgroup = MotionColgroup;
|
||||
exports.create = createMinimalMotionComponent;
|
||||
exports.data = MotionData;
|
||||
exports.datalist = MotionDatalist;
|
||||
exports.dd = MotionDd;
|
||||
exports.defs = MotionDefs;
|
||||
exports.del = MotionDel;
|
||||
exports.desc = MotionDesc;
|
||||
exports.details = MotionDetails;
|
||||
exports.dfn = MotionDfn;
|
||||
exports.dialog = MotionDialog;
|
||||
exports.div = MotionDiv;
|
||||
exports.dl = MotionDl;
|
||||
exports.dt = MotionDt;
|
||||
exports.ellipse = MotionEllipse;
|
||||
exports.em = MotionEm;
|
||||
exports.embed = MotionEmbed;
|
||||
exports.feBlend = MotionFeBlend;
|
||||
exports.feColorMatrix = MotionFeColorMatrix;
|
||||
exports.feComponentTransfer = MotionFeComponentTransfer;
|
||||
exports.feComposite = MotionFeComposite;
|
||||
exports.feConvolveMatrix = MotionFeConvolveMatrix;
|
||||
exports.feDiffuseLighting = MotionFeDiffuseLighting;
|
||||
exports.feDisplacementMap = MotionFeDisplacementMap;
|
||||
exports.feDistantLight = MotionFeDistantLight;
|
||||
exports.feDropShadow = MotionFeDropShadow;
|
||||
exports.feFlood = MotionFeFlood;
|
||||
exports.feFuncA = MotionFeFuncA;
|
||||
exports.feFuncB = MotionFeFuncB;
|
||||
exports.feFuncG = MotionFeFuncG;
|
||||
exports.feFuncR = MotionFeFuncR;
|
||||
exports.feGaussianBlur = MotionFeGaussianBlur;
|
||||
exports.feImage = MotionFeImage;
|
||||
exports.feMerge = MotionFeMerge;
|
||||
exports.feMergeNode = MotionFeMergeNode;
|
||||
exports.feMorphology = MotionFeMorphology;
|
||||
exports.feOffset = MotionFeOffset;
|
||||
exports.fePointLight = MotionFePointLight;
|
||||
exports.feSpecularLighting = MotionFeSpecularLighting;
|
||||
exports.feSpotLight = MotionFeSpotLight;
|
||||
exports.feTile = MotionFeTile;
|
||||
exports.feTurbulence = MotionFeTurbulence;
|
||||
exports.fieldset = MotionFieldset;
|
||||
exports.figcaption = MotionFigcaption;
|
||||
exports.figure = MotionFigure;
|
||||
exports.filter = MotionFilter;
|
||||
exports.footer = MotionFooter;
|
||||
exports.foreignObject = MotionForeignObject;
|
||||
exports.form = MotionForm;
|
||||
exports.g = MotionG;
|
||||
exports.h1 = MotionH1;
|
||||
exports.h2 = MotionH2;
|
||||
exports.h3 = MotionH3;
|
||||
exports.h4 = MotionH4;
|
||||
exports.h5 = MotionH5;
|
||||
exports.h6 = MotionH6;
|
||||
exports.head = MotionHead;
|
||||
exports.header = MotionHeader;
|
||||
exports.hgroup = MotionHgroup;
|
||||
exports.hr = MotionHr;
|
||||
exports.html = MotionHtml;
|
||||
exports.i = MotionI;
|
||||
exports.iframe = MotionIframe;
|
||||
exports.image = MotionImage;
|
||||
exports.img = MotionImg;
|
||||
exports.input = MotionInput;
|
||||
exports.ins = MotionIns;
|
||||
exports.kbd = MotionKbd;
|
||||
exports.keygen = MotionKeygen;
|
||||
exports.label = MotionLabel;
|
||||
exports.legend = MotionLegend;
|
||||
exports.li = MotionLi;
|
||||
exports.line = MotionLine;
|
||||
exports.linearGradient = MotionLinearGradient;
|
||||
exports.link = MotionLink;
|
||||
exports.main = MotionMain;
|
||||
exports.map = MotionMap;
|
||||
exports.mark = MotionMark;
|
||||
exports.marker = MotionMarker;
|
||||
exports.mask = MotionMask;
|
||||
exports.menu = MotionMenu;
|
||||
exports.menuitem = MotionMenuitem;
|
||||
exports.metadata = MotionMetadata;
|
||||
exports.meter = MotionMeter;
|
||||
exports.nav = MotionNav;
|
||||
exports.object = MotionObject;
|
||||
exports.ol = MotionOl;
|
||||
exports.optgroup = MotionOptgroup;
|
||||
exports.option = MotionOption;
|
||||
exports.output = MotionOutput;
|
||||
exports.p = MotionP;
|
||||
exports.param = MotionParam;
|
||||
exports.path = MotionPath;
|
||||
exports.pattern = MotionPattern;
|
||||
exports.picture = MotionPicture;
|
||||
exports.polygon = MotionPolygon;
|
||||
exports.polyline = MotionPolyline;
|
||||
exports.pre = MotionPre;
|
||||
exports.progress = MotionProgress;
|
||||
exports.q = MotionQ;
|
||||
exports.radialGradient = MotionRadialGradient;
|
||||
exports.rect = MotionRect;
|
||||
exports.rp = MotionRp;
|
||||
exports.rt = MotionRt;
|
||||
exports.ruby = MotionRuby;
|
||||
exports.s = MotionS;
|
||||
exports.samp = MotionSamp;
|
||||
exports.script = MotionScript;
|
||||
exports.section = MotionSection;
|
||||
exports.select = MotionSelect;
|
||||
exports.small = MotionSmall;
|
||||
exports.source = MotionSource;
|
||||
exports.span = MotionSpan;
|
||||
exports.stop = MotionStop;
|
||||
exports.strong = MotionStrong;
|
||||
exports.style = MotionStyle;
|
||||
exports.sub = MotionSub;
|
||||
exports.summary = MotionSummary;
|
||||
exports.sup = MotionSup;
|
||||
exports.svg = MotionSvg;
|
||||
exports.symbol = MotionSymbol;
|
||||
exports.table = MotionTable;
|
||||
exports.tbody = MotionTbody;
|
||||
exports.td = MotionTd;
|
||||
exports.text = MotionText;
|
||||
exports.textPath = MotionTextPath;
|
||||
exports.textarea = MotionTextarea;
|
||||
exports.tfoot = MotionTfoot;
|
||||
exports.th = MotionTh;
|
||||
exports.thead = MotionThead;
|
||||
exports.time = MotionTime;
|
||||
exports.title = MotionTitle;
|
||||
exports.tr = MotionTr;
|
||||
exports.track = MotionTrack;
|
||||
exports.tspan = MotionTspan;
|
||||
exports.u = MotionU;
|
||||
exports.ul = MotionUl;
|
||||
exports.use = MotionUse;
|
||||
exports.video = MotionVideo;
|
||||
exports.view = MotionView;
|
||||
exports.wbr = MotionWbr;
|
||||
exports.webview = MotionWebview;
|
||||
//# sourceMappingURL=m.js.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-153
@@ -1,153 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var react = require('react');
|
||||
var motionDom = require('motion-dom');
|
||||
var motionUtils = require('motion-utils');
|
||||
|
||||
/**
|
||||
* Creates a constant value over the lifecycle of a component.
|
||||
*
|
||||
* Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
|
||||
* a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
|
||||
* you can ensure that initialisers don't execute twice or more.
|
||||
*/
|
||||
function useConstant(init) {
|
||||
const ref = react.useRef(null);
|
||||
if (ref.current === null) {
|
||||
ref.current = init();
|
||||
}
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
function useUnmountEffect(callback) {
|
||||
return react.useEffect(() => () => callback(), []);
|
||||
}
|
||||
|
||||
function animateElements(elementOrSelector, keyframes, options, scope) {
|
||||
// Gracefully handle null/undefined elements (e.g., from querySelector returning null)
|
||||
if (elementOrSelector == null) {
|
||||
return [];
|
||||
}
|
||||
const elements = motionDom.resolveElements(elementOrSelector, scope);
|
||||
const numElements = elements.length;
|
||||
motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
|
||||
/**
|
||||
* WAAPI doesn't support interrupting animations.
|
||||
*
|
||||
* Therefore, starting animations requires a three-step process:
|
||||
* 1. Stop existing animations (write styles to DOM)
|
||||
* 2. Resolve keyframes (read styles from DOM)
|
||||
* 3. Create new animations (write styles to DOM)
|
||||
*
|
||||
* The hybrid `animate()` function uses AsyncAnimation to resolve
|
||||
* keyframes before creating new animations, which removes style
|
||||
* thrashing. Here, we have much stricter filesize constraints.
|
||||
* Therefore we do this in a synchronous way that ensures that
|
||||
* at least within `animate()` calls there is no style thrashing.
|
||||
*
|
||||
* In the motion-native-animate-mini-interrupt benchmark this
|
||||
* was 80% faster than a single loop.
|
||||
*/
|
||||
const animationDefinitions = [];
|
||||
/**
|
||||
* Step 1: Build options and stop existing animations (write)
|
||||
*/
|
||||
for (let i = 0; i < numElements; i++) {
|
||||
const element = elements[i];
|
||||
const elementTransition = { ...options };
|
||||
/**
|
||||
* Resolve stagger function if provided.
|
||||
*/
|
||||
if (typeof elementTransition.delay === "function") {
|
||||
elementTransition.delay = elementTransition.delay(i, numElements);
|
||||
}
|
||||
for (const valueName in keyframes) {
|
||||
let valueKeyframes = keyframes[valueName];
|
||||
if (!Array.isArray(valueKeyframes)) {
|
||||
valueKeyframes = [valueKeyframes];
|
||||
}
|
||||
const valueOptions = {
|
||||
...motionDom.getValueTransition(elementTransition, valueName),
|
||||
};
|
||||
valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
|
||||
valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
|
||||
/**
|
||||
* If there's an existing animation playing on this element then stop it
|
||||
* before creating a new one.
|
||||
*/
|
||||
const map = motionDom.getAnimationMap(element);
|
||||
const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
|
||||
const currentAnimation = map.get(key);
|
||||
currentAnimation && currentAnimation.stop();
|
||||
animationDefinitions.push({
|
||||
map,
|
||||
key,
|
||||
unresolvedKeyframes: valueKeyframes,
|
||||
options: {
|
||||
...valueOptions,
|
||||
element,
|
||||
name: valueName,
|
||||
allowFlatten: !elementTransition.type && !elementTransition.ease,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Step 2: Resolve keyframes (read)
|
||||
*/
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
|
||||
const { element, name, pseudoElement } = animationOptions;
|
||||
if (!pseudoElement && unresolvedKeyframes[0] === null) {
|
||||
unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
|
||||
}
|
||||
motionDom.fillWildcards(unresolvedKeyframes);
|
||||
motionDom.applyPxDefaults(unresolvedKeyframes, name);
|
||||
/**
|
||||
* If we only have one keyframe, explicitly read the initial keyframe
|
||||
* from the computed style. This is to ensure consistency with WAAPI behaviour
|
||||
* for restarting animations, for instance .play() after finish, when it
|
||||
* has one vs two keyframes.
|
||||
*/
|
||||
if (!pseudoElement && unresolvedKeyframes.length < 2) {
|
||||
unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
|
||||
}
|
||||
animationOptions.keyframes = unresolvedKeyframes;
|
||||
}
|
||||
/**
|
||||
* Step 3: Create new animations (write)
|
||||
*/
|
||||
const animations = [];
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { map, key, options: animationOptions } = animationDefinitions[i];
|
||||
const animation = new motionDom.NativeAnimation(animationOptions);
|
||||
map.set(key, animation);
|
||||
animation.finished.finally(() => map.delete(key));
|
||||
animations.push(animation);
|
||||
}
|
||||
return animations;
|
||||
}
|
||||
|
||||
const createScopedWaapiAnimate = (scope) => {
|
||||
function scopedAnimate(elementOrSelector, keyframes, options) {
|
||||
return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
|
||||
}
|
||||
return scopedAnimate;
|
||||
};
|
||||
|
||||
function useAnimateMini() {
|
||||
const scope = useConstant(() => ({
|
||||
current: null, // Will be hydrated by React
|
||||
animations: [],
|
||||
}));
|
||||
const animate = useConstant(() => createScopedWaapiAnimate(scope));
|
||||
useUnmountEffect(() => {
|
||||
scope.animations.forEach((animation) => animation.stop());
|
||||
});
|
||||
return [scope, animate];
|
||||
}
|
||||
|
||||
exports.useAnimate = useAnimateMini;
|
||||
//# sourceMappingURL=mini.js.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-367
@@ -1,367 +0,0 @@
|
||||
import { CSSProperties, PropsWithoutRef, RefAttributes, JSX, SVGAttributes } from 'react';
|
||||
import { MotionNodeOptions, MotionValue, TransformProperties, SVGPathProperties } from 'motion-dom';
|
||||
|
||||
type MotionValueString = MotionValue<string>;
|
||||
type MotionValueNumber = MotionValue<number>;
|
||||
type MotionValueAny = MotionValue<any>;
|
||||
type AnyMotionValue = MotionValueNumber | MotionValueString | MotionValueAny;
|
||||
type MotionValueHelper<T> = T | AnyMotionValue;
|
||||
type MakeMotionHelper<T> = {
|
||||
[K in keyof T]: MotionValueHelper<T[K]>;
|
||||
};
|
||||
type MakeCustomValueTypeHelper<T> = MakeMotionHelper<T>;
|
||||
type MakeMotion<T> = MakeCustomValueTypeHelper<T>;
|
||||
type MotionCSS = MakeMotion<Omit<CSSProperties, "rotate" | "scale" | "perspective" | "x" | "y" | "z">>;
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
type MotionTransform = MakeMotion<TransformProperties>;
|
||||
type MotionSVGProps = MakeMotion<SVGPathProperties>;
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
interface MotionStyle$1 extends MotionCSS, MotionTransform, MotionSVGProps {
|
||||
}
|
||||
/**
|
||||
* Props for `motion` components.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
interface MotionProps extends MotionNodeOptions {
|
||||
/**
|
||||
*
|
||||
* The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values.
|
||||
*
|
||||
* ```jsx
|
||||
* export const MyComponent = () => {
|
||||
* const x = useMotionValue(0)
|
||||
*
|
||||
* return <motion.div style={{ x, opacity: 1, scale: 0.5 }} />
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
style?: MotionStyle$1;
|
||||
children?: React.ReactNode | MotionValueNumber | MotionValueString;
|
||||
}
|
||||
|
||||
interface HTMLElements {
|
||||
a: HTMLAnchorElement;
|
||||
abbr: HTMLElement;
|
||||
address: HTMLElement;
|
||||
area: HTMLAreaElement;
|
||||
article: HTMLElement;
|
||||
aside: HTMLElement;
|
||||
audio: HTMLAudioElement;
|
||||
b: HTMLElement;
|
||||
base: HTMLBaseElement;
|
||||
bdi: HTMLElement;
|
||||
bdo: HTMLElement;
|
||||
big: HTMLElement;
|
||||
blockquote: HTMLQuoteElement;
|
||||
body: HTMLBodyElement;
|
||||
br: HTMLBRElement;
|
||||
button: HTMLButtonElement;
|
||||
canvas: HTMLCanvasElement;
|
||||
caption: HTMLElement;
|
||||
center: HTMLElement;
|
||||
cite: HTMLElement;
|
||||
code: HTMLElement;
|
||||
col: HTMLTableColElement;
|
||||
colgroup: HTMLTableColElement;
|
||||
data: HTMLDataElement;
|
||||
datalist: HTMLDataListElement;
|
||||
dd: HTMLElement;
|
||||
del: HTMLModElement;
|
||||
details: HTMLDetailsElement;
|
||||
dfn: HTMLElement;
|
||||
dialog: HTMLDialogElement;
|
||||
div: HTMLDivElement;
|
||||
dl: HTMLDListElement;
|
||||
dt: HTMLElement;
|
||||
em: HTMLElement;
|
||||
embed: HTMLEmbedElement;
|
||||
fieldset: HTMLFieldSetElement;
|
||||
figcaption: HTMLElement;
|
||||
figure: HTMLElement;
|
||||
footer: HTMLElement;
|
||||
form: HTMLFormElement;
|
||||
h1: HTMLHeadingElement;
|
||||
h2: HTMLHeadingElement;
|
||||
h3: HTMLHeadingElement;
|
||||
h4: HTMLHeadingElement;
|
||||
h5: HTMLHeadingElement;
|
||||
h6: HTMLHeadingElement;
|
||||
head: HTMLHeadElement;
|
||||
header: HTMLElement;
|
||||
hgroup: HTMLElement;
|
||||
hr: HTMLHRElement;
|
||||
html: HTMLHtmlElement;
|
||||
i: HTMLElement;
|
||||
iframe: HTMLIFrameElement;
|
||||
img: HTMLImageElement;
|
||||
input: HTMLInputElement;
|
||||
ins: HTMLModElement;
|
||||
kbd: HTMLElement;
|
||||
keygen: HTMLElement;
|
||||
label: HTMLLabelElement;
|
||||
legend: HTMLLegendElement;
|
||||
li: HTMLLIElement;
|
||||
link: HTMLLinkElement;
|
||||
main: HTMLElement;
|
||||
map: HTMLMapElement;
|
||||
mark: HTMLElement;
|
||||
menu: HTMLElement;
|
||||
menuitem: HTMLElement;
|
||||
meta: HTMLMetaElement;
|
||||
meter: HTMLMeterElement;
|
||||
nav: HTMLElement;
|
||||
noindex: HTMLElement;
|
||||
noscript: HTMLElement;
|
||||
object: HTMLObjectElement;
|
||||
ol: HTMLOListElement;
|
||||
optgroup: HTMLOptGroupElement;
|
||||
option: HTMLOptionElement;
|
||||
output: HTMLOutputElement;
|
||||
p: HTMLParagraphElement;
|
||||
param: HTMLParamElement;
|
||||
picture: HTMLElement;
|
||||
pre: HTMLPreElement;
|
||||
progress: HTMLProgressElement;
|
||||
q: HTMLQuoteElement;
|
||||
rp: HTMLElement;
|
||||
rt: HTMLElement;
|
||||
ruby: HTMLElement;
|
||||
s: HTMLElement;
|
||||
samp: HTMLElement;
|
||||
search: HTMLElement;
|
||||
slot: HTMLSlotElement;
|
||||
script: HTMLScriptElement;
|
||||
section: HTMLElement;
|
||||
select: HTMLSelectElement;
|
||||
small: HTMLElement;
|
||||
source: HTMLSourceElement;
|
||||
span: HTMLSpanElement;
|
||||
strong: HTMLElement;
|
||||
style: HTMLStyleElement;
|
||||
sub: HTMLElement;
|
||||
summary: HTMLElement;
|
||||
sup: HTMLElement;
|
||||
table: HTMLTableElement;
|
||||
template: HTMLTemplateElement;
|
||||
tbody: HTMLTableSectionElement;
|
||||
td: HTMLTableDataCellElement;
|
||||
textarea: HTMLTextAreaElement;
|
||||
tfoot: HTMLTableSectionElement;
|
||||
th: HTMLTableHeaderCellElement;
|
||||
thead: HTMLTableSectionElement;
|
||||
time: HTMLTimeElement;
|
||||
title: HTMLTitleElement;
|
||||
tr: HTMLTableRowElement;
|
||||
track: HTMLTrackElement;
|
||||
u: HTMLElement;
|
||||
ul: HTMLUListElement;
|
||||
var: HTMLElement;
|
||||
video: HTMLVideoElement;
|
||||
wbr: HTMLElement;
|
||||
webview: HTMLWebViewElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
type ForwardRefComponent<T, P> = {
|
||||
readonly $$typeof: symbol;
|
||||
} & ((props: PropsWithoutRef<P> & RefAttributes<T>) => JSX.Element);
|
||||
type AttributesWithoutMotionProps<Attributes> = {
|
||||
[K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
|
||||
};
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
type HTMLMotionProps<Tag extends keyof HTMLElements> = AttributesWithoutMotionProps<JSX.IntrinsicElements[Tag]> & MotionProps;
|
||||
|
||||
interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
|
||||
}
|
||||
/**
|
||||
* Blanket-accept any SVG attribute as a `MotionValue`
|
||||
* @public
|
||||
*/
|
||||
type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML components
|
||||
*/
|
||||
declare const MotionA: ForwardRefComponent<HTMLAnchorElement, HTMLMotionProps<"a">>;
|
||||
declare const MotionAbbr: ForwardRefComponent<HTMLElement, HTMLMotionProps<"abbr">>;
|
||||
declare const MotionAddress: ForwardRefComponent<HTMLElement, HTMLMotionProps<"address">>;
|
||||
declare const MotionArea: ForwardRefComponent<HTMLAreaElement, HTMLMotionProps<"area">>;
|
||||
declare const MotionArticle: ForwardRefComponent<HTMLElement, HTMLMotionProps<"article">>;
|
||||
declare const MotionAside: ForwardRefComponent<HTMLElement, HTMLMotionProps<"aside">>;
|
||||
declare const MotionAudio: ForwardRefComponent<HTMLAudioElement, HTMLMotionProps<"audio">>;
|
||||
declare const MotionB: ForwardRefComponent<HTMLElement, HTMLMotionProps<"b">>;
|
||||
declare const MotionBase: ForwardRefComponent<HTMLBaseElement, HTMLMotionProps<"base">>;
|
||||
declare const MotionBdi: ForwardRefComponent<HTMLElement, HTMLMotionProps<"bdi">>;
|
||||
declare const MotionBdo: ForwardRefComponent<HTMLElement, HTMLMotionProps<"bdo">>;
|
||||
declare const MotionBig: ForwardRefComponent<HTMLElement, HTMLMotionProps<"big">>;
|
||||
declare const MotionBlockquote: ForwardRefComponent<HTMLQuoteElement, HTMLMotionProps<"blockquote">>;
|
||||
declare const MotionBody: ForwardRefComponent<HTMLBodyElement, HTMLMotionProps<"body">>;
|
||||
declare const MotionButton: ForwardRefComponent<HTMLButtonElement, HTMLMotionProps<"button">>;
|
||||
declare const MotionCanvas: ForwardRefComponent<HTMLCanvasElement, HTMLMotionProps<"canvas">>;
|
||||
declare const MotionCaption: ForwardRefComponent<HTMLElement, HTMLMotionProps<"caption">>;
|
||||
declare const MotionCite: ForwardRefComponent<HTMLElement, HTMLMotionProps<"cite">>;
|
||||
declare const MotionCode: ForwardRefComponent<HTMLElement, HTMLMotionProps<"code">>;
|
||||
declare const MotionCol: ForwardRefComponent<HTMLTableColElement, HTMLMotionProps<"col">>;
|
||||
declare const MotionColgroup: ForwardRefComponent<HTMLTableColElement, HTMLMotionProps<"colgroup">>;
|
||||
declare const MotionData: ForwardRefComponent<HTMLDataElement, HTMLMotionProps<"data">>;
|
||||
declare const MotionDatalist: ForwardRefComponent<HTMLDataListElement, HTMLMotionProps<"datalist">>;
|
||||
declare const MotionDd: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dd">>;
|
||||
declare const MotionDel: ForwardRefComponent<HTMLModElement, HTMLMotionProps<"del">>;
|
||||
declare const MotionDetails: ForwardRefComponent<HTMLDetailsElement, HTMLMotionProps<"details">>;
|
||||
declare const MotionDfn: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dfn">>;
|
||||
declare const MotionDialog: ForwardRefComponent<HTMLDialogElement, HTMLMotionProps<"dialog">>;
|
||||
declare const MotionDiv: ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>;
|
||||
declare const MotionDl: ForwardRefComponent<HTMLDListElement, HTMLMotionProps<"dl">>;
|
||||
declare const MotionDt: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dt">>;
|
||||
declare const MotionEm: ForwardRefComponent<HTMLElement, HTMLMotionProps<"em">>;
|
||||
declare const MotionEmbed: ForwardRefComponent<HTMLEmbedElement, HTMLMotionProps<"embed">>;
|
||||
declare const MotionFieldset: ForwardRefComponent<HTMLFieldSetElement, HTMLMotionProps<"fieldset">>;
|
||||
declare const MotionFigcaption: ForwardRefComponent<HTMLElement, HTMLMotionProps<"figcaption">>;
|
||||
declare const MotionFigure: ForwardRefComponent<HTMLElement, HTMLMotionProps<"figure">>;
|
||||
declare const MotionFooter: ForwardRefComponent<HTMLElement, HTMLMotionProps<"footer">>;
|
||||
declare const MotionForm: ForwardRefComponent<HTMLFormElement, HTMLMotionProps<"form">>;
|
||||
declare const MotionH1: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h1">>;
|
||||
declare const MotionH2: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h2">>;
|
||||
declare const MotionH3: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h3">>;
|
||||
declare const MotionH4: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h4">>;
|
||||
declare const MotionH5: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h5">>;
|
||||
declare const MotionH6: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h6">>;
|
||||
declare const MotionHead: ForwardRefComponent<HTMLHeadElement, HTMLMotionProps<"head">>;
|
||||
declare const MotionHeader: ForwardRefComponent<HTMLElement, HTMLMotionProps<"header">>;
|
||||
declare const MotionHgroup: ForwardRefComponent<HTMLElement, HTMLMotionProps<"hgroup">>;
|
||||
declare const MotionHr: ForwardRefComponent<HTMLHRElement, HTMLMotionProps<"hr">>;
|
||||
declare const MotionHtml: ForwardRefComponent<HTMLHtmlElement, HTMLMotionProps<"html">>;
|
||||
declare const MotionI: ForwardRefComponent<HTMLElement, HTMLMotionProps<"i">>;
|
||||
declare const MotionIframe: ForwardRefComponent<HTMLIFrameElement, HTMLMotionProps<"iframe">>;
|
||||
declare const MotionImg: ForwardRefComponent<HTMLImageElement, HTMLMotionProps<"img">>;
|
||||
declare const MotionInput: ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>;
|
||||
declare const MotionIns: ForwardRefComponent<HTMLModElement, HTMLMotionProps<"ins">>;
|
||||
declare const MotionKbd: ForwardRefComponent<HTMLElement, HTMLMotionProps<"kbd">>;
|
||||
declare const MotionKeygen: ForwardRefComponent<HTMLElement, HTMLMotionProps<"keygen">>;
|
||||
declare const MotionLabel: ForwardRefComponent<HTMLLabelElement, HTMLMotionProps<"label">>;
|
||||
declare const MotionLegend: ForwardRefComponent<HTMLLegendElement, HTMLMotionProps<"legend">>;
|
||||
declare const MotionLi: ForwardRefComponent<HTMLLIElement, HTMLMotionProps<"li">>;
|
||||
declare const MotionLink: ForwardRefComponent<HTMLLinkElement, HTMLMotionProps<"link">>;
|
||||
declare const MotionMain: ForwardRefComponent<HTMLElement, HTMLMotionProps<"main">>;
|
||||
declare const MotionMap: ForwardRefComponent<HTMLMapElement, HTMLMotionProps<"map">>;
|
||||
declare const MotionMark: ForwardRefComponent<HTMLElement, HTMLMotionProps<"mark">>;
|
||||
declare const MotionMenu: ForwardRefComponent<HTMLElement, HTMLMotionProps<"menu">>;
|
||||
declare const MotionMenuitem: ForwardRefComponent<HTMLElement, HTMLMotionProps<"menuitem">>;
|
||||
declare const MotionMeter: ForwardRefComponent<HTMLMeterElement, HTMLMotionProps<"meter">>;
|
||||
declare const MotionNav: ForwardRefComponent<HTMLElement, HTMLMotionProps<"nav">>;
|
||||
declare const MotionObject: ForwardRefComponent<HTMLObjectElement, HTMLMotionProps<"object">>;
|
||||
declare const MotionOl: ForwardRefComponent<HTMLOListElement, HTMLMotionProps<"ol">>;
|
||||
declare const MotionOptgroup: ForwardRefComponent<HTMLOptGroupElement, HTMLMotionProps<"optgroup">>;
|
||||
declare const MotionOption: ForwardRefComponent<HTMLOptionElement, HTMLMotionProps<"option">>;
|
||||
declare const MotionOutput: ForwardRefComponent<HTMLOutputElement, HTMLMotionProps<"output">>;
|
||||
declare const MotionP: ForwardRefComponent<HTMLParagraphElement, HTMLMotionProps<"p">>;
|
||||
declare const MotionParam: ForwardRefComponent<HTMLParamElement, HTMLMotionProps<"param">>;
|
||||
declare const MotionPicture: ForwardRefComponent<HTMLElement, HTMLMotionProps<"picture">>;
|
||||
declare const MotionPre: ForwardRefComponent<HTMLPreElement, HTMLMotionProps<"pre">>;
|
||||
declare const MotionProgress: ForwardRefComponent<HTMLProgressElement, HTMLMotionProps<"progress">>;
|
||||
declare const MotionQ: ForwardRefComponent<HTMLQuoteElement, HTMLMotionProps<"q">>;
|
||||
declare const MotionRp: ForwardRefComponent<HTMLElement, HTMLMotionProps<"rp">>;
|
||||
declare const MotionRt: ForwardRefComponent<HTMLElement, HTMLMotionProps<"rt">>;
|
||||
declare const MotionRuby: ForwardRefComponent<HTMLElement, HTMLMotionProps<"ruby">>;
|
||||
declare const MotionS: ForwardRefComponent<HTMLElement, HTMLMotionProps<"s">>;
|
||||
declare const MotionSamp: ForwardRefComponent<HTMLElement, HTMLMotionProps<"samp">>;
|
||||
declare const MotionScript: ForwardRefComponent<HTMLScriptElement, HTMLMotionProps<"script">>;
|
||||
declare const MotionSection: ForwardRefComponent<HTMLElement, HTMLMotionProps<"section">>;
|
||||
declare const MotionSelect: ForwardRefComponent<HTMLSelectElement, HTMLMotionProps<"select">>;
|
||||
declare const MotionSmall: ForwardRefComponent<HTMLElement, HTMLMotionProps<"small">>;
|
||||
declare const MotionSource: ForwardRefComponent<HTMLSourceElement, HTMLMotionProps<"source">>;
|
||||
declare const MotionSpan: ForwardRefComponent<HTMLSpanElement, HTMLMotionProps<"span">>;
|
||||
declare const MotionStrong: ForwardRefComponent<HTMLElement, HTMLMotionProps<"strong">>;
|
||||
declare const MotionStyle: ForwardRefComponent<HTMLStyleElement, HTMLMotionProps<"style">>;
|
||||
declare const MotionSub: ForwardRefComponent<HTMLElement, HTMLMotionProps<"sub">>;
|
||||
declare const MotionSummary: ForwardRefComponent<HTMLElement, HTMLMotionProps<"summary">>;
|
||||
declare const MotionSup: ForwardRefComponent<HTMLElement, HTMLMotionProps<"sup">>;
|
||||
declare const MotionTable: ForwardRefComponent<HTMLTableElement, HTMLMotionProps<"table">>;
|
||||
declare const MotionTbody: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"tbody">>;
|
||||
declare const MotionTd: ForwardRefComponent<HTMLTableDataCellElement, HTMLMotionProps<"td">>;
|
||||
declare const MotionTextarea: ForwardRefComponent<HTMLTextAreaElement, HTMLMotionProps<"textarea">>;
|
||||
declare const MotionTfoot: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"tfoot">>;
|
||||
declare const MotionTh: ForwardRefComponent<HTMLTableHeaderCellElement, HTMLMotionProps<"th">>;
|
||||
declare const MotionThead: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"thead">>;
|
||||
declare const MotionTime: ForwardRefComponent<HTMLTimeElement, HTMLMotionProps<"time">>;
|
||||
declare const MotionTitle: ForwardRefComponent<HTMLTitleElement, HTMLMotionProps<"title">>;
|
||||
declare const MotionTr: ForwardRefComponent<HTMLTableRowElement, HTMLMotionProps<"tr">>;
|
||||
declare const MotionTrack: ForwardRefComponent<HTMLTrackElement, HTMLMotionProps<"track">>;
|
||||
declare const MotionU: ForwardRefComponent<HTMLElement, HTMLMotionProps<"u">>;
|
||||
declare const MotionUl: ForwardRefComponent<HTMLUListElement, HTMLMotionProps<"ul">>;
|
||||
declare const MotionVideo: ForwardRefComponent<HTMLVideoElement, HTMLMotionProps<"video">>;
|
||||
declare const MotionWbr: ForwardRefComponent<HTMLElement, HTMLMotionProps<"wbr">>;
|
||||
declare const MotionWebview: ForwardRefComponent<HTMLWebViewElement, HTMLMotionProps<"webview">>;
|
||||
/**
|
||||
* SVG components
|
||||
*/
|
||||
declare const MotionAnimate: ForwardRefComponent<SVGElement, SVGMotionProps<SVGElement>>;
|
||||
declare const MotionCircle: ForwardRefComponent<SVGCircleElement, SVGMotionProps<SVGCircleElement>>;
|
||||
declare const MotionDefs: ForwardRefComponent<SVGDefsElement, SVGMotionProps<SVGDefsElement>>;
|
||||
declare const MotionDesc: ForwardRefComponent<SVGDescElement, SVGMotionProps<SVGDescElement>>;
|
||||
declare const MotionEllipse: ForwardRefComponent<SVGEllipseElement, SVGMotionProps<SVGEllipseElement>>;
|
||||
declare const MotionG: ForwardRefComponent<SVGGElement, SVGMotionProps<SVGGElement>>;
|
||||
declare const MotionImage: ForwardRefComponent<SVGImageElement, SVGMotionProps<SVGImageElement>>;
|
||||
declare const MotionLine: ForwardRefComponent<SVGLineElement, SVGMotionProps<SVGLineElement>>;
|
||||
declare const MotionFilter: ForwardRefComponent<SVGFilterElement, SVGMotionProps<SVGFilterElement>>;
|
||||
declare const MotionMarker: ForwardRefComponent<SVGMarkerElement, SVGMotionProps<SVGMarkerElement>>;
|
||||
declare const MotionMask: ForwardRefComponent<SVGMaskElement, SVGMotionProps<SVGMaskElement>>;
|
||||
declare const MotionMetadata: ForwardRefComponent<SVGMetadataElement, SVGMotionProps<SVGMetadataElement>>;
|
||||
declare const MotionPath: ForwardRefComponent<SVGPathElement, SVGMotionProps<SVGPathElement>>;
|
||||
declare const MotionPattern: ForwardRefComponent<SVGPatternElement, SVGMotionProps<SVGPatternElement>>;
|
||||
declare const MotionPolygon: ForwardRefComponent<SVGPolygonElement, SVGMotionProps<SVGPolygonElement>>;
|
||||
declare const MotionPolyline: ForwardRefComponent<SVGPolylineElement, SVGMotionProps<SVGPolylineElement>>;
|
||||
declare const MotionRect: ForwardRefComponent<SVGRectElement, SVGMotionProps<SVGRectElement>>;
|
||||
declare const MotionStop: ForwardRefComponent<SVGStopElement, SVGMotionProps<SVGStopElement>>;
|
||||
declare const MotionSvg: ForwardRefComponent<SVGSVGElement, SVGMotionProps<SVGSVGElement>>;
|
||||
declare const MotionSymbol: ForwardRefComponent<SVGSymbolElement, SVGMotionProps<SVGSymbolElement>>;
|
||||
declare const MotionText: ForwardRefComponent<SVGTextElement, SVGMotionProps<SVGTextElement>>;
|
||||
declare const MotionTspan: ForwardRefComponent<SVGTSpanElement, SVGMotionProps<SVGTSpanElement>>;
|
||||
declare const MotionUse: ForwardRefComponent<SVGUseElement, SVGMotionProps<SVGUseElement>>;
|
||||
declare const MotionView: ForwardRefComponent<SVGViewElement, SVGMotionProps<SVGViewElement>>;
|
||||
declare const MotionClipPath: ForwardRefComponent<SVGClipPathElement, SVGMotionProps<SVGClipPathElement>>;
|
||||
declare const MotionFeBlend: ForwardRefComponent<SVGFEBlendElement, SVGMotionProps<SVGFEBlendElement>>;
|
||||
declare const MotionFeColorMatrix: ForwardRefComponent<SVGFEColorMatrixElement, SVGMotionProps<SVGFEColorMatrixElement>>;
|
||||
declare const MotionFeComponentTransfer: ForwardRefComponent<SVGFEComponentTransferElement, SVGMotionProps<SVGFEComponentTransferElement>>;
|
||||
declare const MotionFeComposite: ForwardRefComponent<SVGFECompositeElement, SVGMotionProps<SVGFECompositeElement>>;
|
||||
declare const MotionFeConvolveMatrix: ForwardRefComponent<SVGFEConvolveMatrixElement, SVGMotionProps<SVGFEConvolveMatrixElement>>;
|
||||
declare const MotionFeDiffuseLighting: ForwardRefComponent<SVGFEDiffuseLightingElement, SVGMotionProps<SVGFEDiffuseLightingElement>>;
|
||||
declare const MotionFeDisplacementMap: ForwardRefComponent<SVGFEDisplacementMapElement, SVGMotionProps<SVGFEDisplacementMapElement>>;
|
||||
declare const MotionFeDistantLight: ForwardRefComponent<SVGFEDistantLightElement, SVGMotionProps<SVGFEDistantLightElement>>;
|
||||
declare const MotionFeDropShadow: ForwardRefComponent<SVGFEDropShadowElement, SVGMotionProps<SVGFEDropShadowElement>>;
|
||||
declare const MotionFeFlood: ForwardRefComponent<SVGFEFloodElement, SVGMotionProps<SVGFEFloodElement>>;
|
||||
declare const MotionFeFuncA: ForwardRefComponent<SVGFEFuncAElement, SVGMotionProps<SVGFEFuncAElement>>;
|
||||
declare const MotionFeFuncB: ForwardRefComponent<SVGFEFuncBElement, SVGMotionProps<SVGFEFuncBElement>>;
|
||||
declare const MotionFeFuncG: ForwardRefComponent<SVGFEFuncGElement, SVGMotionProps<SVGFEFuncGElement>>;
|
||||
declare const MotionFeFuncR: ForwardRefComponent<SVGFEFuncRElement, SVGMotionProps<SVGFEFuncRElement>>;
|
||||
declare const MotionFeGaussianBlur: ForwardRefComponent<SVGFEGaussianBlurElement, SVGMotionProps<SVGFEGaussianBlurElement>>;
|
||||
declare const MotionFeImage: ForwardRefComponent<SVGFEImageElement, SVGMotionProps<SVGFEImageElement>>;
|
||||
declare const MotionFeMerge: ForwardRefComponent<SVGFEMergeElement, SVGMotionProps<SVGFEMergeElement>>;
|
||||
declare const MotionFeMergeNode: ForwardRefComponent<SVGFEMergeNodeElement, SVGMotionProps<SVGFEMergeNodeElement>>;
|
||||
declare const MotionFeMorphology: ForwardRefComponent<SVGFEMorphologyElement, SVGMotionProps<SVGFEMorphologyElement>>;
|
||||
declare const MotionFeOffset: ForwardRefComponent<SVGFEOffsetElement, SVGMotionProps<SVGFEOffsetElement>>;
|
||||
declare const MotionFePointLight: ForwardRefComponent<SVGFEPointLightElement, SVGMotionProps<SVGFEPointLightElement>>;
|
||||
declare const MotionFeSpecularLighting: ForwardRefComponent<SVGFESpecularLightingElement, SVGMotionProps<SVGFESpecularLightingElement>>;
|
||||
declare const MotionFeSpotLight: ForwardRefComponent<SVGFESpotLightElement, SVGMotionProps<SVGFESpotLightElement>>;
|
||||
declare const MotionFeTile: ForwardRefComponent<SVGFETileElement, SVGMotionProps<SVGFETileElement>>;
|
||||
declare const MotionFeTurbulence: ForwardRefComponent<SVGFETurbulenceElement, SVGMotionProps<SVGFETurbulenceElement>>;
|
||||
declare const MotionForeignObject: ForwardRefComponent<SVGForeignObjectElement, SVGMotionProps<SVGForeignObjectElement>>;
|
||||
declare const MotionLinearGradient: ForwardRefComponent<SVGLinearGradientElement, SVGMotionProps<SVGLinearGradientElement>>;
|
||||
declare const MotionRadialGradient: ForwardRefComponent<SVGRadialGradientElement, SVGMotionProps<SVGRadialGradientElement>>;
|
||||
declare const MotionTextPath: ForwardRefComponent<SVGTextPathElement, SVGMotionProps<SVGTextPathElement>>;
|
||||
|
||||
export { MotionA as a, MotionAbbr as abbr, MotionAddress as address, MotionAnimate as animate, MotionArea as area, MotionArticle as article, MotionAside as aside, MotionAudio as audio, MotionB as b, MotionBase as base, MotionBdi as bdi, MotionBdo as bdo, MotionBig as big, MotionBlockquote as blockquote, MotionBody as body, MotionButton as button, MotionCanvas as canvas, MotionCaption as caption, MotionCircle as circle, MotionCite as cite, MotionClipPath as clipPath, MotionCode as code, MotionCol as col, MotionColgroup as colgroup, MotionData as data, MotionDatalist as datalist, MotionDd as dd, MotionDefs as defs, MotionDel as del, MotionDesc as desc, MotionDetails as details, MotionDfn as dfn, MotionDialog as dialog, MotionDiv as div, MotionDl as dl, MotionDt as dt, MotionEllipse as ellipse, MotionEm as em, MotionEmbed as embed, MotionFeBlend as feBlend, MotionFeColorMatrix as feColorMatrix, MotionFeComponentTransfer as feComponentTransfer, MotionFeComposite as feComposite, MotionFeConvolveMatrix as feConvolveMatrix, MotionFeDiffuseLighting as feDiffuseLighting, MotionFeDisplacementMap as feDisplacementMap, MotionFeDistantLight as feDistantLight, MotionFeDropShadow as feDropShadow, MotionFeFlood as feFlood, MotionFeFuncA as feFuncA, MotionFeFuncB as feFuncB, MotionFeFuncG as feFuncG, MotionFeFuncR as feFuncR, MotionFeGaussianBlur as feGaussianBlur, MotionFeImage as feImage, MotionFeMerge as feMerge, MotionFeMergeNode as feMergeNode, MotionFeMorphology as feMorphology, MotionFeOffset as feOffset, MotionFePointLight as fePointLight, MotionFeSpecularLighting as feSpecularLighting, MotionFeSpotLight as feSpotLight, MotionFeTile as feTile, MotionFeTurbulence as feTurbulence, MotionFieldset as fieldset, MotionFigcaption as figcaption, MotionFigure as figure, MotionFilter as filter, MotionFooter as footer, MotionForeignObject as foreignObject, MotionForm as form, MotionG as g, MotionH1 as h1, MotionH2 as h2, MotionH3 as h3, MotionH4 as h4, MotionH5 as h5, MotionH6 as h6, MotionHead as head, MotionHeader as header, MotionHgroup as hgroup, MotionHr as hr, MotionHtml as html, MotionI as i, MotionIframe as iframe, MotionImage as image, MotionImg as img, MotionInput as input, MotionIns as ins, MotionKbd as kbd, MotionKeygen as keygen, MotionLabel as label, MotionLegend as legend, MotionLi as li, MotionLine as line, MotionLinearGradient as linearGradient, MotionLink as link, MotionMain as main, MotionMap as map, MotionMark as mark, MotionMarker as marker, MotionMask as mask, MotionMenu as menu, MotionMenuitem as menuitem, MotionMetadata as metadata, MotionMeter as meter, MotionNav as nav, MotionObject as object, MotionOl as ol, MotionOptgroup as optgroup, MotionOption as option, MotionOutput as output, MotionP as p, MotionParam as param, MotionPath as path, MotionPattern as pattern, MotionPicture as picture, MotionPolygon as polygon, MotionPolyline as polyline, MotionPre as pre, MotionProgress as progress, MotionQ as q, MotionRadialGradient as radialGradient, MotionRect as rect, MotionRp as rp, MotionRt as rt, MotionRuby as ruby, MotionS as s, MotionSamp as samp, MotionScript as script, MotionSection as section, MotionSelect as select, MotionSmall as small, MotionSource as source, MotionSpan as span, MotionStop as stop, MotionStrong as strong, MotionStyle as style, MotionSub as sub, MotionSummary as summary, MotionSup as sup, MotionSvg as svg, MotionSymbol as symbol, MotionTable as table, MotionTbody as tbody, MotionTd as td, MotionText as text, MotionTextPath as textPath, MotionTextarea as textarea, MotionTfoot as tfoot, MotionTh as th, MotionThead as thead, MotionTime as time, MotionTitle as title, MotionTr as tr, MotionTrack as track, MotionTspan as tspan, MotionU as u, MotionUl as ul, MotionUse as use, MotionVideo as video, MotionView as view, MotionWbr as wbr, MotionWebview as webview };
|
||||
Generated
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
export * from 'motion-dom';
|
||||
export { recordStats } from 'motion-dom';
|
||||
Generated
Vendored
-69
@@ -1,69 +0,0 @@
|
||||
import { UnresolvedValueKeyframe, AnimationOptions, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationPlaybackOptions, GroupAnimationWithThen, AnimationPlaybackControlsWithThen } from 'motion-dom';
|
||||
|
||||
/**
|
||||
* Lifecycle callbacks are not supported on individual sequence segments
|
||||
* because segments are consolidated into a single animation per subject.
|
||||
* Use sequence-level options (e.g. SequenceOptions.onComplete) instead.
|
||||
*/
|
||||
type LifecycleCallbacks = "onUpdate" | "onPlay" | "onComplete" | "onRepeat" | "onStop";
|
||||
/**
|
||||
* Distributive Omit preserves union branches (unlike plain Omit).
|
||||
*/
|
||||
type DistributiveOmit<T, K extends string> = T extends any ? Omit<T, K> : never;
|
||||
type SegmentTransitionOptions = DistributiveOmit<AnimationOptions, LifecycleCallbacks> & At;
|
||||
type SegmentValueTransitionOptions = DistributiveOmit<Transition, LifecycleCallbacks> & At;
|
||||
type ObjectTarget<O> = {
|
||||
[K in keyof O]?: O[K] | UnresolvedValueKeyframe[];
|
||||
};
|
||||
type SequenceTime = number | "<" | `+${number}` | `-${number}` | `${string}`;
|
||||
type SequenceLabel = string;
|
||||
interface SequenceLabelWithTime {
|
||||
name: SequenceLabel;
|
||||
at: SequenceTime;
|
||||
}
|
||||
interface At {
|
||||
at?: SequenceTime;
|
||||
}
|
||||
type MotionValueSegment = [
|
||||
MotionValue,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[]
|
||||
];
|
||||
type MotionValueSegmentWithTransition = [
|
||||
MotionValue,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
|
||||
SegmentValueTransitionOptions
|
||||
];
|
||||
type DOMSegment = [ElementOrSelector, DOMKeyframesDefinition];
|
||||
type DOMSegmentWithTransition = [
|
||||
ElementOrSelector,
|
||||
DOMKeyframesDefinition,
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type ObjectSegment<O extends {} = {}> = [O, ObjectTarget<O>];
|
||||
type ObjectSegmentWithTransition<O extends {} = {}> = [
|
||||
O,
|
||||
ObjectTarget<O>,
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type SequenceProgressCallback = (value: any) => void;
|
||||
type FunctionSegment = [SequenceProgressCallback] | [SequenceProgressCallback, SegmentTransitionOptions] | [
|
||||
SequenceProgressCallback,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type Segment = ObjectSegment | ObjectSegmentWithTransition | SequenceLabel | SequenceLabelWithTime | MotionValueSegment | MotionValueSegmentWithTransition | DOMSegment | DOMSegmentWithTransition | FunctionSegment;
|
||||
type AnimationSequence = Segment[];
|
||||
interface SequenceOptions extends AnimationPlaybackOptions {
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
defaultTransition?: Transition;
|
||||
reduceMotion?: boolean;
|
||||
skipAnimations?: boolean;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
declare function animateSequence(definition: AnimationSequence, options?: SequenceOptions): GroupAnimationWithThen;
|
||||
|
||||
declare const animateMini: (elementOrSelector: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions) => AnimationPlaybackControlsWithThen;
|
||||
|
||||
export { animateMini as animate, animateSequence };
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-304
@@ -1,304 +0,0 @@
|
||||
import { AnyResolvedKeyframe, UnresolvedValueKeyframe, AnimationOptions, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationPlaybackOptions, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationScope, AnimationPlaybackControls } from 'motion-dom';
|
||||
export * from 'motion-dom';
|
||||
export { DelayedFunction, delayInSeconds as delay } from 'motion-dom';
|
||||
import { Easing, EasingFunction, Point } from 'motion-utils';
|
||||
export * from 'motion-utils';
|
||||
|
||||
/**
|
||||
* Lifecycle callbacks are not supported on individual sequence segments
|
||||
* because segments are consolidated into a single animation per subject.
|
||||
* Use sequence-level options (e.g. SequenceOptions.onComplete) instead.
|
||||
*/
|
||||
type LifecycleCallbacks = "onUpdate" | "onPlay" | "onComplete" | "onRepeat" | "onStop";
|
||||
/**
|
||||
* Distributive Omit preserves union branches (unlike plain Omit).
|
||||
*/
|
||||
type DistributiveOmit<T, K extends string> = T extends any ? Omit<T, K> : never;
|
||||
type SegmentTransitionOptions = DistributiveOmit<AnimationOptions, LifecycleCallbacks> & At;
|
||||
type SegmentValueTransitionOptions = DistributiveOmit<Transition, LifecycleCallbacks> & At;
|
||||
type ObjectTarget<O> = {
|
||||
[K in keyof O]?: O[K] | UnresolvedValueKeyframe[];
|
||||
};
|
||||
type SequenceTime = number | "<" | `+${number}` | `-${number}` | `${string}`;
|
||||
type SequenceLabel = string;
|
||||
interface SequenceLabelWithTime {
|
||||
name: SequenceLabel;
|
||||
at: SequenceTime;
|
||||
}
|
||||
interface At {
|
||||
at?: SequenceTime;
|
||||
}
|
||||
type MotionValueSegment = [
|
||||
MotionValue,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[]
|
||||
];
|
||||
type MotionValueSegmentWithTransition = [
|
||||
MotionValue,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
|
||||
SegmentValueTransitionOptions
|
||||
];
|
||||
type DOMSegment = [ElementOrSelector, DOMKeyframesDefinition];
|
||||
type DOMSegmentWithTransition = [
|
||||
ElementOrSelector,
|
||||
DOMKeyframesDefinition,
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type ObjectSegment<O extends {} = {}> = [O, ObjectTarget<O>];
|
||||
type ObjectSegmentWithTransition<O extends {} = {}> = [
|
||||
O,
|
||||
ObjectTarget<O>,
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type SequenceProgressCallback = (value: any) => void;
|
||||
type FunctionSegment = [SequenceProgressCallback] | [SequenceProgressCallback, SegmentTransitionOptions] | [
|
||||
SequenceProgressCallback,
|
||||
UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
|
||||
SegmentTransitionOptions
|
||||
];
|
||||
type Segment = ObjectSegment | ObjectSegmentWithTransition | SequenceLabel | SequenceLabelWithTime | MotionValueSegment | MotionValueSegmentWithTransition | DOMSegment | DOMSegmentWithTransition | FunctionSegment;
|
||||
type AnimationSequence = Segment[];
|
||||
interface SequenceOptions extends AnimationPlaybackOptions {
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
defaultTransition?: Transition;
|
||||
reduceMotion?: boolean;
|
||||
skipAnimations?: boolean;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
interface AbsoluteKeyframe {
|
||||
value: AnyResolvedKeyframe | null;
|
||||
at: number;
|
||||
easing?: Easing;
|
||||
}
|
||||
type ValueSequence = AbsoluteKeyframe[];
|
||||
interface SequenceMap {
|
||||
[key: string]: ValueSequence;
|
||||
}
|
||||
type ResolvedAnimationDefinition = {
|
||||
keyframes: {
|
||||
[key: string]: UnresolvedValueKeyframe[];
|
||||
};
|
||||
transition: {
|
||||
[key: string]: Transition;
|
||||
};
|
||||
};
|
||||
type ResolvedAnimationDefinitions = Map<Element | MotionValue, ResolvedAnimationDefinition>;
|
||||
|
||||
interface ScopedAnimateOptions {
|
||||
scope?: AnimationScope;
|
||||
reduceMotion?: boolean;
|
||||
skipAnimations?: boolean;
|
||||
}
|
||||
/**
|
||||
* Creates an animation function that is optionally scoped
|
||||
* to a specific element.
|
||||
*/
|
||||
declare function createScopedAnimate(options?: ScopedAnimateOptions): {
|
||||
(sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControlsWithThen;
|
||||
(value: string | MotionValue<string>, keyframes: string | UnresolvedValueKeyframe<string>[], options?: ValueAnimationTransition<string>): AnimationPlaybackControlsWithThen;
|
||||
(value: number | MotionValue<number>, keyframes: number | UnresolvedValueKeyframe<number>[], options?: ValueAnimationTransition<number>): AnimationPlaybackControlsWithThen;
|
||||
<V extends string | number>(value: V | MotionValue<V>, keyframes: V | UnresolvedValueKeyframe<V>[], options?: ValueAnimationTransition<V>): AnimationPlaybackControlsWithThen;
|
||||
(element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
|
||||
<O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
|
||||
};
|
||||
declare const animate: {
|
||||
(sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControlsWithThen;
|
||||
(value: string | MotionValue<string>, keyframes: string | UnresolvedValueKeyframe<string>[], options?: ValueAnimationTransition<string>): AnimationPlaybackControlsWithThen;
|
||||
(value: number | MotionValue<number>, keyframes: number | UnresolvedValueKeyframe<number>[], options?: ValueAnimationTransition<number>): AnimationPlaybackControlsWithThen;
|
||||
<V extends string | number>(value: V | MotionValue<V>, keyframes: V | UnresolvedValueKeyframe<V>[], options?: ValueAnimationTransition<V>): AnimationPlaybackControlsWithThen;
|
||||
(element: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
|
||||
<O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
|
||||
};
|
||||
|
||||
declare const animateMini: (elementOrSelector: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions) => AnimationPlaybackControlsWithThen;
|
||||
|
||||
interface ScrollOptions {
|
||||
source?: HTMLElement;
|
||||
container?: Element;
|
||||
target?: Element;
|
||||
axis?: "x" | "y";
|
||||
offset?: ScrollOffset;
|
||||
}
|
||||
type OnScrollProgress = (progress: number) => void;
|
||||
type OnScrollWithInfo = (progress: number, info: ScrollInfo) => void;
|
||||
type OnScroll = OnScrollProgress | OnScrollWithInfo;
|
||||
interface AxisScrollInfo {
|
||||
current: number;
|
||||
offset: number[];
|
||||
progress: number;
|
||||
scrollLength: number;
|
||||
velocity: number;
|
||||
targetOffset: number;
|
||||
targetLength: number;
|
||||
containerLength: number;
|
||||
interpolatorOffsets?: number[];
|
||||
interpolate?: EasingFunction;
|
||||
}
|
||||
interface ScrollInfo {
|
||||
time: number;
|
||||
x: AxisScrollInfo;
|
||||
y: AxisScrollInfo;
|
||||
}
|
||||
type OnScrollInfo = (info: ScrollInfo) => void;
|
||||
type SupportedEdgeUnit = "px" | "vw" | "vh" | "%";
|
||||
type EdgeUnit = `${number}${SupportedEdgeUnit}`;
|
||||
type NamedEdges = "start" | "end" | "center";
|
||||
type EdgeString = NamedEdges | EdgeUnit | `${number}`;
|
||||
type Edge = EdgeString | number;
|
||||
type ProgressIntersection = [number, number];
|
||||
type Intersection = `${Edge} ${Edge}`;
|
||||
type ScrollOffset = Array<Edge | Intersection | ProgressIntersection>;
|
||||
interface ScrollInfoOptions {
|
||||
container?: Element;
|
||||
target?: Element;
|
||||
axis?: "x" | "y";
|
||||
offset?: ScrollOffset;
|
||||
/**
|
||||
* When true, enables per-frame checking of scrollWidth/scrollHeight
|
||||
* to detect content size changes and recalculate scroll progress.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
trackContentSize?: boolean;
|
||||
}
|
||||
|
||||
declare function scroll(onScroll: OnScroll | AnimationPlaybackControls, { axis, container, ...options }?: ScrollOptions): VoidFunction;
|
||||
|
||||
declare function scrollInfo(onScroll: OnScrollInfo, { container, trackContentSize, ...options }?: ScrollInfoOptions): VoidFunction;
|
||||
|
||||
type ViewChangeHandler = (entry: IntersectionObserverEntry) => void;
|
||||
type MarginValue = `${number}${"px" | "%"}`;
|
||||
type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
|
||||
interface InViewOptions {
|
||||
root?: Element | Document;
|
||||
margin?: MarginType;
|
||||
amount?: "some" | "all" | number;
|
||||
}
|
||||
declare function inView(elementOrSelector: ElementOrSelector, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
|
||||
|
||||
interface HTMLElements {
|
||||
a: HTMLAnchorElement;
|
||||
abbr: HTMLElement;
|
||||
address: HTMLElement;
|
||||
area: HTMLAreaElement;
|
||||
article: HTMLElement;
|
||||
aside: HTMLElement;
|
||||
audio: HTMLAudioElement;
|
||||
b: HTMLElement;
|
||||
base: HTMLBaseElement;
|
||||
bdi: HTMLElement;
|
||||
bdo: HTMLElement;
|
||||
big: HTMLElement;
|
||||
blockquote: HTMLQuoteElement;
|
||||
body: HTMLBodyElement;
|
||||
br: HTMLBRElement;
|
||||
button: HTMLButtonElement;
|
||||
canvas: HTMLCanvasElement;
|
||||
caption: HTMLElement;
|
||||
center: HTMLElement;
|
||||
cite: HTMLElement;
|
||||
code: HTMLElement;
|
||||
col: HTMLTableColElement;
|
||||
colgroup: HTMLTableColElement;
|
||||
data: HTMLDataElement;
|
||||
datalist: HTMLDataListElement;
|
||||
dd: HTMLElement;
|
||||
del: HTMLModElement;
|
||||
details: HTMLDetailsElement;
|
||||
dfn: HTMLElement;
|
||||
dialog: HTMLDialogElement;
|
||||
div: HTMLDivElement;
|
||||
dl: HTMLDListElement;
|
||||
dt: HTMLElement;
|
||||
em: HTMLElement;
|
||||
embed: HTMLEmbedElement;
|
||||
fieldset: HTMLFieldSetElement;
|
||||
figcaption: HTMLElement;
|
||||
figure: HTMLElement;
|
||||
footer: HTMLElement;
|
||||
form: HTMLFormElement;
|
||||
h1: HTMLHeadingElement;
|
||||
h2: HTMLHeadingElement;
|
||||
h3: HTMLHeadingElement;
|
||||
h4: HTMLHeadingElement;
|
||||
h5: HTMLHeadingElement;
|
||||
h6: HTMLHeadingElement;
|
||||
head: HTMLHeadElement;
|
||||
header: HTMLElement;
|
||||
hgroup: HTMLElement;
|
||||
hr: HTMLHRElement;
|
||||
html: HTMLHtmlElement;
|
||||
i: HTMLElement;
|
||||
iframe: HTMLIFrameElement;
|
||||
img: HTMLImageElement;
|
||||
input: HTMLInputElement;
|
||||
ins: HTMLModElement;
|
||||
kbd: HTMLElement;
|
||||
keygen: HTMLElement;
|
||||
label: HTMLLabelElement;
|
||||
legend: HTMLLegendElement;
|
||||
li: HTMLLIElement;
|
||||
link: HTMLLinkElement;
|
||||
main: HTMLElement;
|
||||
map: HTMLMapElement;
|
||||
mark: HTMLElement;
|
||||
menu: HTMLElement;
|
||||
menuitem: HTMLElement;
|
||||
meta: HTMLMetaElement;
|
||||
meter: HTMLMeterElement;
|
||||
nav: HTMLElement;
|
||||
noindex: HTMLElement;
|
||||
noscript: HTMLElement;
|
||||
object: HTMLObjectElement;
|
||||
ol: HTMLOListElement;
|
||||
optgroup: HTMLOptGroupElement;
|
||||
option: HTMLOptionElement;
|
||||
output: HTMLOutputElement;
|
||||
p: HTMLParagraphElement;
|
||||
param: HTMLParamElement;
|
||||
picture: HTMLElement;
|
||||
pre: HTMLPreElement;
|
||||
progress: HTMLProgressElement;
|
||||
q: HTMLQuoteElement;
|
||||
rp: HTMLElement;
|
||||
rt: HTMLElement;
|
||||
ruby: HTMLElement;
|
||||
s: HTMLElement;
|
||||
samp: HTMLElement;
|
||||
search: HTMLElement;
|
||||
slot: HTMLSlotElement;
|
||||
script: HTMLScriptElement;
|
||||
section: HTMLElement;
|
||||
select: HTMLSelectElement;
|
||||
small: HTMLElement;
|
||||
source: HTMLSourceElement;
|
||||
span: HTMLSpanElement;
|
||||
strong: HTMLElement;
|
||||
style: HTMLStyleElement;
|
||||
sub: HTMLElement;
|
||||
summary: HTMLElement;
|
||||
sup: HTMLElement;
|
||||
table: HTMLTableElement;
|
||||
template: HTMLTemplateElement;
|
||||
tbody: HTMLTableSectionElement;
|
||||
td: HTMLTableDataCellElement;
|
||||
textarea: HTMLTextAreaElement;
|
||||
tfoot: HTMLTableSectionElement;
|
||||
th: HTMLTableHeaderCellElement;
|
||||
thead: HTMLTableSectionElement;
|
||||
time: HTMLTimeElement;
|
||||
title: HTMLTitleElement;
|
||||
tr: HTMLTableRowElement;
|
||||
track: HTMLTrackElement;
|
||||
u: HTMLElement;
|
||||
ul: HTMLUListElement;
|
||||
var: HTMLElement;
|
||||
video: HTMLVideoElement;
|
||||
wbr: HTMLElement;
|
||||
webview: HTMLWebViewElement;
|
||||
}
|
||||
|
||||
declare const distance: (a: number, b: number) => number;
|
||||
declare function distance2D(a: Point, b: Point): number;
|
||||
|
||||
export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type FunctionSegment, type HTMLElements, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SegmentTransitionOptions, type SegmentValueTransitionOptions, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceProgressCallback, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, distance, distance2D, inView, scroll, scrollInfo };
|
||||
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-58
@@ -1,58 +0,0 @@
|
||||
import { GroupAnimationWithThen } from 'motion-dom';
|
||||
import { removeItem } from 'motion-utils';
|
||||
import { animateSequence } from './sequence.mjs';
|
||||
import { animateSubject } from './subject.mjs';
|
||||
|
||||
function isSequence(value) {
|
||||
return Array.isArray(value) && value.some(Array.isArray);
|
||||
}
|
||||
/**
|
||||
* Creates an animation function that is optionally scoped
|
||||
* to a specific element.
|
||||
*/
|
||||
function createScopedAnimate(options = {}) {
|
||||
const { scope, reduceMotion, skipAnimations } = options;
|
||||
/**
|
||||
* Implementation
|
||||
*/
|
||||
function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
|
||||
let animations = [];
|
||||
let animationOnComplete;
|
||||
const inherited = {};
|
||||
if (reduceMotion !== undefined)
|
||||
inherited.reduceMotion = reduceMotion;
|
||||
if (skipAnimations !== undefined)
|
||||
inherited.skipAnimations = skipAnimations;
|
||||
if (isSequence(subjectOrSequence)) {
|
||||
const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
|
||||
if (typeof onComplete === "function") {
|
||||
animationOnComplete = onComplete;
|
||||
}
|
||||
animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
|
||||
}
|
||||
else {
|
||||
// Extract top-level onComplete so it doesn't get applied per-value
|
||||
const { onComplete, ...rest } = options || {};
|
||||
if (typeof onComplete === "function") {
|
||||
animationOnComplete = onComplete;
|
||||
}
|
||||
animations = animateSubject(subjectOrSequence, optionsOrKeyframes, { ...inherited, ...rest }, scope);
|
||||
}
|
||||
const animation = new GroupAnimationWithThen(animations);
|
||||
if (animationOnComplete) {
|
||||
animation.finished.then(animationOnComplete);
|
||||
}
|
||||
if (scope) {
|
||||
scope.animations.push(animation);
|
||||
animation.finished.then(() => {
|
||||
removeItem(scope.animations, animation);
|
||||
});
|
||||
}
|
||||
return animation;
|
||||
}
|
||||
return scopedAnimate;
|
||||
}
|
||||
const animate = createScopedAnimate();
|
||||
|
||||
export { animate, createScopedAnimate };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-23
@@ -1,23 +0,0 @@
|
||||
import { resolveElements } from 'motion-dom';
|
||||
import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
|
||||
|
||||
function resolveSubjects(subject, keyframes, scope, selectorCache) {
|
||||
if (subject == null) {
|
||||
return [];
|
||||
}
|
||||
if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
|
||||
return resolveElements(subject, scope, selectorCache);
|
||||
}
|
||||
else if (subject instanceof NodeList) {
|
||||
return Array.from(subject);
|
||||
}
|
||||
else if (Array.isArray(subject)) {
|
||||
return subject.filter((s) => s != null);
|
||||
}
|
||||
else {
|
||||
return [subject];
|
||||
}
|
||||
}
|
||||
|
||||
export { resolveSubjects };
|
||||
//# sourceMappingURL=resolve-subjects.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"resolve-subjects.mjs","sources":["../../../../src/animation/animate/resolve-subjects.ts"],"sourcesContent":["import {\n AnimationScope,\n DOMKeyframesDefinition,\n SelectorCache,\n resolveElements,\n} from \"motion-dom\"\nimport { ObjectTarget } from \"../sequence/types\"\nimport { isDOMKeyframes } from \"../utils/is-dom-keyframes\"\n\nexport function resolveSubjects<O extends {}>(\n subject:\n | string\n | Element\n | Element[]\n | NodeListOf<Element>\n | O\n | O[]\n | null\n | undefined,\n keyframes: DOMKeyframesDefinition | ObjectTarget<O>,\n scope?: AnimationScope,\n selectorCache?: SelectorCache\n) {\n if (subject == null) {\n return []\n }\n\n if (typeof subject === \"string\" && isDOMKeyframes(keyframes)) {\n return resolveElements(subject, scope, selectorCache)\n } else if (subject instanceof NodeList) {\n return Array.from(subject)\n } else if (Array.isArray(subject)) {\n return subject.filter((s) => s != null)\n } else {\n return [subject]\n }\n}\n"],"names":[],"mappings":";;;AASM,SAAU,eAAe,CAC3B,OAQe,EACf,SAAmD,EACnD,KAAsB,EACtB,aAA6B,EAAA;AAE7B,IAAA,IAAI,OAAO,IAAI,IAAI,EAAE;AACjB,QAAA,OAAO,EAAE;IACb;IAEA,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE;QAC1D,OAAO,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC;IACzD;AAAO,SAAA,IAAI,OAAO,YAAY,QAAQ,EAAE;AACpC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAC9B;AAAO,SAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AAC/B,QAAA,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IAC3C;SAAO;QACH,OAAO,CAAC,OAAO,CAAC;IACpB;AACJ;;;;"}
|
||||
Generated
Vendored
-36
@@ -1,36 +0,0 @@
|
||||
import { motionValue, spring } from 'motion-dom';
|
||||
import { createAnimationsFromSequence } from '../sequence/create.mjs';
|
||||
import { animateSubject } from './subject.mjs';
|
||||
|
||||
function animateSequence(sequence, options, scope) {
|
||||
const animations = [];
|
||||
/**
|
||||
* Pre-process: replace function segments with MotionValue segments,
|
||||
* subscribe callbacks immediately
|
||||
*/
|
||||
const processedSequence = sequence.map((segment) => {
|
||||
if (Array.isArray(segment) && typeof segment[0] === "function") {
|
||||
const callback = segment[0];
|
||||
const mv = motionValue(0);
|
||||
mv.on("change", callback);
|
||||
if (segment.length === 1) {
|
||||
return [mv, [0, 1]];
|
||||
}
|
||||
else if (segment.length === 2) {
|
||||
return [mv, [0, 1], segment[1]];
|
||||
}
|
||||
else {
|
||||
return [mv, segment[1], segment[2]];
|
||||
}
|
||||
}
|
||||
return segment;
|
||||
});
|
||||
const animationDefinitions = createAnimationsFromSequence(processedSequence, options, scope, { spring });
|
||||
animationDefinitions.forEach(({ keyframes, transition }, subject) => {
|
||||
animations.push(...animateSubject(subject, keyframes, transition));
|
||||
});
|
||||
return animations;
|
||||
}
|
||||
|
||||
export { animateSequence };
|
||||
//# sourceMappingURL=sequence.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"sequence.mjs","sources":["../../../../src/animation/animate/sequence.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n motionValue,\n spring,\n} from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../sequence/types\"\nimport { animateSubject } from \"./subject\"\n\nexport function animateSequence(\n sequence: AnimationSequence,\n options?: SequenceOptions,\n scope?: AnimationScope\n) {\n const animations: AnimationPlaybackControlsWithThen[] = []\n\n /**\n * Pre-process: replace function segments with MotionValue segments,\n * subscribe callbacks immediately\n */\n const processedSequence = sequence.map((segment) => {\n if (Array.isArray(segment) && typeof segment[0] === \"function\") {\n const callback = segment[0] as (value: any) => void\n const mv = motionValue(0)\n mv.on(\"change\", callback)\n\n if (segment.length === 1) {\n return [mv, [0, 1]] as any\n } else if (segment.length === 2) {\n return [mv, [0, 1], segment[1]] as any\n } else {\n return [mv, segment[1], segment[2]] as any\n }\n }\n return segment\n }) as AnimationSequence\n\n const animationDefinitions = createAnimationsFromSequence(\n processedSequence,\n options,\n scope,\n { spring }\n )\n\n animationDefinitions.forEach(({ keyframes, transition }, subject) => {\n animations.push(...animateSubject(subject, keyframes, transition))\n })\n\n return animations\n}\n"],"names":[],"mappings":";;;;SAUgB,eAAe,CAC3B,QAA2B,EAC3B,OAAyB,EACzB,KAAsB,EAAA;IAEtB,MAAM,UAAU,GAAwC,EAAE;AAE1D;;;AAGG;IACH,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAI;AAC/C,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE;AAC5D,YAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAyB;AACnD,YAAA,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC;AACzB,YAAA,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAEzB,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YAC9B;AAAO,iBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,gBAAA,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC1C;iBAAO;AACH,gBAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC9C;QACJ;AACA,QAAA,OAAO,OAAO;AAClB,IAAA,CAAC,CAAsB;AAEvB,IAAA,MAAM,oBAAoB,GAAG,4BAA4B,CACrD,iBAAiB,EACjB,OAAO,EACP,KAAK,EACL,EAAE,MAAM,EAAE,CACb;AAED,IAAA,oBAAoB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,OAAO,KAAI;AAChE,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AACtE,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,UAAU;AACrB;;;;"}
|
||||
Generated
Vendored
-54
@@ -1,54 +0,0 @@
|
||||
import { animateSingleValue, visualElementStore, animateTarget, isMotionValue } from 'motion-dom';
|
||||
import { invariant } from 'motion-utils';
|
||||
import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';
|
||||
import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
|
||||
import { resolveSubjects } from './resolve-subjects.mjs';
|
||||
|
||||
function isSingleValue(subject, keyframes) {
|
||||
return (isMotionValue(subject) ||
|
||||
typeof subject === "number" ||
|
||||
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
|
||||
}
|
||||
/**
|
||||
* Implementation
|
||||
*/
|
||||
function animateSubject(subject, keyframes, options, scope) {
|
||||
const animations = [];
|
||||
if (isSingleValue(subject, keyframes)) {
|
||||
animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes)
|
||||
? keyframes.default || keyframes
|
||||
: keyframes, options ? options.default || options : options));
|
||||
}
|
||||
else {
|
||||
// Gracefully handle null/undefined subjects (e.g., from querySelector returning null)
|
||||
if (subject == null) {
|
||||
return animations;
|
||||
}
|
||||
const subjects = resolveSubjects(subject, keyframes, scope);
|
||||
const numSubjects = subjects.length;
|
||||
invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
|
||||
for (let i = 0; i < numSubjects; i++) {
|
||||
const thisSubject = subjects[i];
|
||||
const createVisualElement = thisSubject instanceof Element
|
||||
? createDOMVisualElement
|
||||
: createObjectVisualElement;
|
||||
if (!visualElementStore.has(thisSubject)) {
|
||||
createVisualElement(thisSubject);
|
||||
}
|
||||
const visualElement = visualElementStore.get(thisSubject);
|
||||
const transition = { ...options };
|
||||
/**
|
||||
* Resolve stagger function if provided.
|
||||
*/
|
||||
if ("delay" in transition &&
|
||||
typeof transition.delay === "function") {
|
||||
transition.delay = transition.delay(i, numSubjects);
|
||||
}
|
||||
animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
|
||||
}
|
||||
}
|
||||
return animations;
|
||||
}
|
||||
|
||||
export { animateSubject };
|
||||
//# sourceMappingURL=subject.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-110
@@ -1,110 +0,0 @@
|
||||
import { resolveElements, getValueTransition, getAnimationMap, animationMapKey, getComputedStyle, fillWildcards, applyPxDefaults, NativeAnimation } from 'motion-dom';
|
||||
import { invariant, secondsToMilliseconds } from 'motion-utils';
|
||||
|
||||
function animateElements(elementOrSelector, keyframes, options, scope) {
|
||||
// Gracefully handle null/undefined elements (e.g., from querySelector returning null)
|
||||
if (elementOrSelector == null) {
|
||||
return [];
|
||||
}
|
||||
const elements = resolveElements(elementOrSelector, scope);
|
||||
const numElements = elements.length;
|
||||
invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
|
||||
/**
|
||||
* WAAPI doesn't support interrupting animations.
|
||||
*
|
||||
* Therefore, starting animations requires a three-step process:
|
||||
* 1. Stop existing animations (write styles to DOM)
|
||||
* 2. Resolve keyframes (read styles from DOM)
|
||||
* 3. Create new animations (write styles to DOM)
|
||||
*
|
||||
* The hybrid `animate()` function uses AsyncAnimation to resolve
|
||||
* keyframes before creating new animations, which removes style
|
||||
* thrashing. Here, we have much stricter filesize constraints.
|
||||
* Therefore we do this in a synchronous way that ensures that
|
||||
* at least within `animate()` calls there is no style thrashing.
|
||||
*
|
||||
* In the motion-native-animate-mini-interrupt benchmark this
|
||||
* was 80% faster than a single loop.
|
||||
*/
|
||||
const animationDefinitions = [];
|
||||
/**
|
||||
* Step 1: Build options and stop existing animations (write)
|
||||
*/
|
||||
for (let i = 0; i < numElements; i++) {
|
||||
const element = elements[i];
|
||||
const elementTransition = { ...options };
|
||||
/**
|
||||
* Resolve stagger function if provided.
|
||||
*/
|
||||
if (typeof elementTransition.delay === "function") {
|
||||
elementTransition.delay = elementTransition.delay(i, numElements);
|
||||
}
|
||||
for (const valueName in keyframes) {
|
||||
let valueKeyframes = keyframes[valueName];
|
||||
if (!Array.isArray(valueKeyframes)) {
|
||||
valueKeyframes = [valueKeyframes];
|
||||
}
|
||||
const valueOptions = {
|
||||
...getValueTransition(elementTransition, valueName),
|
||||
};
|
||||
valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
|
||||
valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
|
||||
/**
|
||||
* If there's an existing animation playing on this element then stop it
|
||||
* before creating a new one.
|
||||
*/
|
||||
const map = getAnimationMap(element);
|
||||
const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
|
||||
const currentAnimation = map.get(key);
|
||||
currentAnimation && currentAnimation.stop();
|
||||
animationDefinitions.push({
|
||||
map,
|
||||
key,
|
||||
unresolvedKeyframes: valueKeyframes,
|
||||
options: {
|
||||
...valueOptions,
|
||||
element,
|
||||
name: valueName,
|
||||
allowFlatten: !elementTransition.type && !elementTransition.ease,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Step 2: Resolve keyframes (read)
|
||||
*/
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
|
||||
const { element, name, pseudoElement } = animationOptions;
|
||||
if (!pseudoElement && unresolvedKeyframes[0] === null) {
|
||||
unresolvedKeyframes[0] = getComputedStyle(element, name);
|
||||
}
|
||||
fillWildcards(unresolvedKeyframes);
|
||||
applyPxDefaults(unresolvedKeyframes, name);
|
||||
/**
|
||||
* If we only have one keyframe, explicitly read the initial keyframe
|
||||
* from the computed style. This is to ensure consistency with WAAPI behaviour
|
||||
* for restarting animations, for instance .play() after finish, when it
|
||||
* has one vs two keyframes.
|
||||
*/
|
||||
if (!pseudoElement && unresolvedKeyframes.length < 2) {
|
||||
unresolvedKeyframes.unshift(getComputedStyle(element, name));
|
||||
}
|
||||
animationOptions.keyframes = unresolvedKeyframes;
|
||||
}
|
||||
/**
|
||||
* Step 3: Create new animations (write)
|
||||
*/
|
||||
const animations = [];
|
||||
for (let i = 0; i < animationDefinitions.length; i++) {
|
||||
const { map, key, options: animationOptions } = animationDefinitions[i];
|
||||
const animation = new NativeAnimation(animationOptions);
|
||||
map.set(key, animation);
|
||||
animation.finished.finally(() => map.delete(key));
|
||||
animations.push(animation);
|
||||
}
|
||||
return animations;
|
||||
}
|
||||
|
||||
export { animateElements };
|
||||
//# sourceMappingURL=animate-elements.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-14
@@ -1,14 +0,0 @@
|
||||
import { GroupAnimationWithThen } from 'motion-dom';
|
||||
import { createAnimationsFromSequence } from '../../sequence/create.mjs';
|
||||
import { animateElements } from './animate-elements.mjs';
|
||||
|
||||
function animateSequence(definition, options) {
|
||||
const animations = [];
|
||||
createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
|
||||
animations.push(...animateElements(element, keyframes, transition));
|
||||
});
|
||||
return new GroupAnimationWithThen(animations);
|
||||
}
|
||||
|
||||
export { animateSequence };
|
||||
//# sourceMappingURL=animate-sequence.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"animate-sequence.mjs","sources":["../../../../../src/animation/animators/waapi/animate-sequence.ts"],"sourcesContent":["import { AnimationPlaybackControls, GroupAnimationWithThen } from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../../sequence/types\"\nimport { animateElements } from \"./animate-elements\"\n\nexport function animateSequence(\n definition: AnimationSequence,\n options?: SequenceOptions\n) {\n const animations: AnimationPlaybackControls[] = []\n\n createAnimationsFromSequence(definition, options).forEach(\n ({ keyframes, transition }, element: Element) => {\n animations.push(...animateElements(element, keyframes, transition))\n }\n )\n\n return new GroupAnimationWithThen(animations)\n}\n"],"names":[],"mappings":";;;;AAKM,SAAU,eAAe,CAC3B,UAA6B,EAC7B,OAAyB,EAAA;IAEzB,MAAM,UAAU,GAAgC,EAAE;AAElD,IAAA,4BAA4B,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,OAAO,CACrD,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,OAAgB,KAAI;AAC5C,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AACvE,IAAA,CAAC,CACJ;AAED,IAAA,OAAO,IAAI,sBAAsB,CAAC,UAAU,CAAC;AACjD;;;;"}
|
||||
Generated
Vendored
-13
@@ -1,13 +0,0 @@
|
||||
import { GroupAnimationWithThen } from 'motion-dom';
|
||||
import { animateElements } from './animate-elements.mjs';
|
||||
|
||||
const createScopedWaapiAnimate = (scope) => {
|
||||
function scopedAnimate(elementOrSelector, keyframes, options) {
|
||||
return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
|
||||
}
|
||||
return scopedAnimate;
|
||||
};
|
||||
const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
|
||||
|
||||
export { animateMini, createScopedWaapiAnimate };
|
||||
//# sourceMappingURL=animate-style.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"animate-style.mjs","sources":["../../../../../src/animation/animators/waapi/animate-style.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n GroupAnimationWithThen,\n} from \"motion-dom\"\nimport { animateElements } from \"./animate-elements\"\n\nexport const createScopedWaapiAnimate = (scope?: AnimationScope) => {\n function scopedAnimate(\n elementOrSelector: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen {\n return new GroupAnimationWithThen(\n animateElements(\n elementOrSelector,\n keyframes as DOMKeyframesDefinition,\n options,\n scope\n )\n )\n }\n\n return scopedAnimate\n}\n\nexport const animateMini = /*@__PURE__*/ createScopedWaapiAnimate()\n"],"names":[],"mappings":";;;AAUO,MAAM,wBAAwB,GAAG,CAAC,KAAsB,KAAI;AAC/D,IAAA,SAAS,aAAa,CAClB,iBAAoC,EACpC,SAAiC,EACjC,OAAiC,EAAA;AAEjC,QAAA,OAAO,IAAI,sBAAsB,CAC7B,eAAe,CACX,iBAAiB,EACjB,SAAmC,EACnC,OAAO,EACP,KAAK,CACR,CACJ;IACL;AAEA,IAAA,OAAO,aAAa;AACxB;MAEa,WAAW,iBAAiB,wBAAwB;;;;"}
|
||||
Generated
Vendored
-80
@@ -1,80 +0,0 @@
|
||||
import { animateVisualElement, setTarget } from 'motion-dom';
|
||||
import { invariant } from 'motion-utils';
|
||||
|
||||
function stopAnimation(visualElement) {
|
||||
visualElement.values.forEach((value) => value.stop());
|
||||
}
|
||||
function setVariants(visualElement, variantLabels) {
|
||||
const reversedLabels = [...variantLabels].reverse();
|
||||
reversedLabels.forEach((key) => {
|
||||
const variant = visualElement.getVariant(key);
|
||||
variant && setTarget(visualElement, variant);
|
||||
if (visualElement.variantChildren) {
|
||||
visualElement.variantChildren.forEach((child) => {
|
||||
setVariants(child, variantLabels);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function setValues(visualElement, definition) {
|
||||
if (Array.isArray(definition)) {
|
||||
return setVariants(visualElement, definition);
|
||||
}
|
||||
else if (typeof definition === "string") {
|
||||
return setVariants(visualElement, [definition]);
|
||||
}
|
||||
else {
|
||||
setTarget(visualElement, definition);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
function animationControls() {
|
||||
/**
|
||||
* Track whether the host component has mounted.
|
||||
*/
|
||||
let hasMounted = false;
|
||||
/**
|
||||
* A collection of linked component animation controls.
|
||||
*/
|
||||
const subscribers = new Set();
|
||||
const controls = {
|
||||
subscribe(visualElement) {
|
||||
subscribers.add(visualElement);
|
||||
return () => void subscribers.delete(visualElement);
|
||||
},
|
||||
start(definition, transitionOverride) {
|
||||
invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
|
||||
const animations = [];
|
||||
subscribers.forEach((visualElement) => {
|
||||
animations.push(animateVisualElement(visualElement, definition, {
|
||||
transitionOverride,
|
||||
}));
|
||||
});
|
||||
return Promise.all(animations);
|
||||
},
|
||||
set(definition) {
|
||||
invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
|
||||
return subscribers.forEach((visualElement) => {
|
||||
setValues(visualElement, definition);
|
||||
});
|
||||
},
|
||||
stop() {
|
||||
subscribers.forEach((visualElement) => {
|
||||
stopAnimation(visualElement);
|
||||
});
|
||||
},
|
||||
mount() {
|
||||
hasMounted = true;
|
||||
return () => {
|
||||
hasMounted = false;
|
||||
controls.stop();
|
||||
};
|
||||
},
|
||||
};
|
||||
return controls;
|
||||
}
|
||||
|
||||
export { animationControls, setValues };
|
||||
//# sourceMappingURL=animation-controls.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-19
@@ -1,19 +0,0 @@
|
||||
"use client";
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
|
||||
import { createScopedWaapiAnimate } from '../animators/waapi/animate-style.mjs';
|
||||
|
||||
function useAnimateMini() {
|
||||
const scope = useConstant(() => ({
|
||||
current: null, // Will be hydrated by React
|
||||
animations: [],
|
||||
}));
|
||||
const animate = useConstant(() => createScopedWaapiAnimate(scope));
|
||||
useUnmountEffect(() => {
|
||||
scope.animations.forEach((animation) => animation.stop());
|
||||
});
|
||||
return [scope, animate];
|
||||
}
|
||||
|
||||
export { useAnimateMini };
|
||||
//# sourceMappingURL=use-animate-style.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-animate-style.mjs","sources":["../../../../src/animation/hooks/use-animate-style.ts"],"sourcesContent":["\"use client\"\n\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useUnmountEffect } from \"../../utils/use-unmount-effect\"\nimport { createScopedWaapiAnimate } from \"../animators/waapi/animate-style\"\nimport { AnimationScope } from \"motion-dom\"\n\nexport function useAnimateMini<T extends Element = any>() {\n const scope: AnimationScope<T> = useConstant(() => ({\n current: null!, // Will be hydrated by React\n animations: [],\n }))\n\n const animate = useConstant(() => createScopedWaapiAnimate(scope))\n\n useUnmountEffect(() => {\n scope.animations.forEach((animation) => animation.stop())\n })\n\n return [scope, animate] as [AnimationScope<T>, typeof animate]\n}\n"],"names":[],"mappings":";;;;;;AAQI;;AAEI;AACH;AAED;;AAGI;AACJ;AAEA;AACJ;;"}
|
||||
Generated
Vendored
-25
@@ -1,25 +0,0 @@
|
||||
"use client";
|
||||
import { useContext, useMemo } from 'react';
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
|
||||
import { useReducedMotionConfig } from '../../utils/reduced-motion/use-reduced-motion-config.mjs';
|
||||
import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
|
||||
import { createScopedAnimate } from '../animate/index.mjs';
|
||||
|
||||
function useAnimate() {
|
||||
const scope = useConstant(() => ({
|
||||
current: null, // Will be hydrated by React
|
||||
animations: [],
|
||||
}));
|
||||
const reduceMotion = useReducedMotionConfig() ?? undefined;
|
||||
const { skipAnimations } = useContext(MotionConfigContext);
|
||||
const animate = useMemo(() => createScopedAnimate({ scope, reduceMotion, skipAnimations }), [scope, reduceMotion, skipAnimations]);
|
||||
useUnmountEffect(() => {
|
||||
scope.animations.forEach((animation) => animation.stop());
|
||||
scope.animations.length = 0;
|
||||
});
|
||||
return [scope, animate];
|
||||
}
|
||||
|
||||
export { useAnimate };
|
||||
//# sourceMappingURL=use-animate.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-animate.mjs","sources":["../../../../src/animation/hooks/use-animate.ts"],"sourcesContent":["\"use client\"\n\nimport { useContext, useMemo } from \"react\"\nimport { AnimationScope } from \"motion-dom\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useUnmountEffect } from \"../../utils/use-unmount-effect\"\nimport { useReducedMotionConfig } from \"../../utils/reduced-motion/use-reduced-motion-config\"\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { createScopedAnimate } from \"../animate\"\n\nexport function useAnimate<T extends Element = any>() {\n const scope: AnimationScope<T> = useConstant(() => ({\n current: null!, // Will be hydrated by React\n animations: [],\n }))\n\n const reduceMotion = useReducedMotionConfig() ?? undefined\n const { skipAnimations } = useContext(MotionConfigContext)\n\n const animate = useMemo(\n () => createScopedAnimate({ scope, reduceMotion, skipAnimations }),\n [scope, reduceMotion, skipAnimations]\n )\n\n useUnmountEffect(() => {\n scope.animations.forEach((animation) => animation.stop())\n scope.animations.length = 0\n })\n\n return [scope, animate] as [AnimationScope<T>, typeof animate]\n}\n"],"names":[],"mappings":";;;;;;;;;AAWI;;AAEI;AACH;AAED;;;;AASI;AACA;AACJ;AAEA;AACJ;;"}
|
||||
Generated
Vendored
-64
@@ -1,64 +0,0 @@
|
||||
"use client";
|
||||
import { animateVisualElement, VisualElement, createBox } from 'motion-dom';
|
||||
import { useState, useLayoutEffect } from 'react';
|
||||
import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
|
||||
const createObject = () => ({});
|
||||
class StateVisualElement extends VisualElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.measureInstanceViewportBox = createBox;
|
||||
}
|
||||
build() { }
|
||||
resetTransform() { }
|
||||
restoreTransform() { }
|
||||
removeValueFromRenderState() { }
|
||||
renderInstance() { }
|
||||
scrapeMotionValuesFromProps() {
|
||||
return createObject();
|
||||
}
|
||||
getBaseTargetFromProps() {
|
||||
return undefined;
|
||||
}
|
||||
readValueFromInstance(_state, key, options) {
|
||||
return options.initialState[key] || 0;
|
||||
}
|
||||
sortInstanceNodePosition() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
const useVisualState = makeUseVisualState({
|
||||
scrapeMotionValuesFromProps: createObject,
|
||||
createRenderState: createObject,
|
||||
});
|
||||
/**
|
||||
* This is not an officially supported API and may be removed
|
||||
* on any version.
|
||||
*/
|
||||
function useAnimatedState(initialState) {
|
||||
const [animationState, setAnimationState] = useState(initialState);
|
||||
const visualState = useVisualState({}, false);
|
||||
const element = useConstant(() => {
|
||||
return new StateVisualElement({
|
||||
props: {
|
||||
onUpdate: (v) => {
|
||||
setAnimationState({ ...v });
|
||||
},
|
||||
},
|
||||
visualState,
|
||||
presenceContext: null,
|
||||
}, { initialState });
|
||||
});
|
||||
useLayoutEffect(() => {
|
||||
element.mount({});
|
||||
return () => element.unmount();
|
||||
}, [element]);
|
||||
const startAnimation = useConstant(() => (animationDefinition) => {
|
||||
return animateVisualElement(element, animationDefinition);
|
||||
});
|
||||
return [animationState, startAnimation];
|
||||
}
|
||||
|
||||
export { useAnimatedState };
|
||||
//# sourceMappingURL=use-animated-state.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-animated-state.mjs","sources":["../../../../src/animation/hooks/use-animated-state.ts"],"sourcesContent":["\"use client\"\n\nimport {\n animateVisualElement,\n createBox,\n ResolvedValues,\n TargetAndTransition,\n VisualElement,\n} from \"motion-dom\"\nimport { useLayoutEffect, useState } from \"react\"\nimport { makeUseVisualState } from \"../../motion/utils/use-visual-state\"\nimport { useConstant } from \"../../utils/use-constant\"\n\ninterface AnimatedStateOptions {\n initialState: ResolvedValues\n}\n\nconst createObject = () => ({})\n\nclass StateVisualElement extends VisualElement<\n ResolvedValues,\n {},\n AnimatedStateOptions\n> {\n type: \"state\"\n build() {}\n measureInstanceViewportBox = createBox\n resetTransform() {}\n restoreTransform() {}\n removeValueFromRenderState() {}\n renderInstance() {}\n scrapeMotionValuesFromProps() {\n return createObject()\n }\n getBaseTargetFromProps() {\n return undefined\n }\n\n readValueFromInstance(\n _state: ResolvedValues,\n key: string,\n options: AnimatedStateOptions\n ) {\n return options.initialState[key] || 0\n }\n\n sortInstanceNodePosition() {\n return 0\n }\n}\n\nconst useVisualState = makeUseVisualState({\n scrapeMotionValuesFromProps: createObject,\n createRenderState: createObject,\n})\n\n/**\n * This is not an officially supported API and may be removed\n * on any version.\n */\nexport function useAnimatedState(initialState: any) {\n const [animationState, setAnimationState] = useState(initialState)\n const visualState = useVisualState({}, false)\n\n const element = useConstant(() => {\n return new StateVisualElement(\n {\n props: {\n onUpdate: (v) => {\n setAnimationState({ ...v })\n },\n },\n visualState,\n presenceContext: null,\n },\n { initialState }\n )\n })\n\n useLayoutEffect(() => {\n element.mount({})\n return () => element.unmount()\n }, [element])\n\n const startAnimation = useConstant(\n () => (animationDefinition: TargetAndTransition) => {\n return animateVisualElement(element, animationDefinition)\n }\n )\n\n return [animationState, startAnimation]\n}\n"],"names":[],"mappings":";;;;;;AAiBA;AAEA;AAAA;;;;AAMI;AAEA;AACA;AACA;AACA;;;;;AAKI;;AAGJ;;;;AASI;;AAEP;AAED;AACI;AACA;AACH;AAED;;;AAGG;AACG;;;AAIF;;AAGY;AACI;AACI;;AAEP;;AAED;AACH;AAGT;;AAGI;AACA;AACJ;;AAIQ;AACJ;AAGJ;AACJ;;"}
|
||||
Generated
Vendored
-43
@@ -1,43 +0,0 @@
|
||||
"use client";
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
|
||||
import { animationControls } from './animation-controls.mjs';
|
||||
|
||||
/**
|
||||
* Creates `LegacyAnimationControls`, which can be used to manually start, stop
|
||||
* and sequence animations on one or more components.
|
||||
*
|
||||
* The returned `LegacyAnimationControls` should be passed to the `animate` property
|
||||
* of the components you want to animate.
|
||||
*
|
||||
* These components can then be animated with the `start` method.
|
||||
*
|
||||
* ```jsx
|
||||
* import * as React from 'react'
|
||||
* import { motion, useAnimation } from 'framer-motion'
|
||||
*
|
||||
* export function MyComponent(props) {
|
||||
* const controls = useAnimation()
|
||||
*
|
||||
* controls.start({
|
||||
* x: 100,
|
||||
* transition: { duration: 0.5 },
|
||||
* })
|
||||
*
|
||||
* return <motion.div animate={controls} />
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @returns Animation controller with `start` and `stop` methods
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function useAnimationControls() {
|
||||
const controls = useConstant(animationControls);
|
||||
useIsomorphicLayoutEffect(controls.mount, []);
|
||||
return controls;
|
||||
}
|
||||
const useAnimation = useAnimationControls;
|
||||
|
||||
export { useAnimation, useAnimationControls };
|
||||
//# sourceMappingURL=use-animation.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-animation.mjs","sources":["../../../../src/animation/hooks/use-animation.ts"],"sourcesContent":["\"use client\"\n\nimport { LegacyAnimationControls } from \"motion-dom\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { animationControls } from \"./animation-controls\"\n\n/**\n * Creates `LegacyAnimationControls`, which can be used to manually start, stop\n * and sequence animations on one or more components.\n *\n * The returned `LegacyAnimationControls` should be passed to the `animate` property\n * of the components you want to animate.\n *\n * These components can then be animated with the `start` method.\n *\n * ```jsx\n * import * as React from 'react'\n * import { motion, useAnimation } from 'framer-motion'\n *\n * export function MyComponent(props) {\n * const controls = useAnimation()\n *\n * controls.start({\n * x: 100,\n * transition: { duration: 0.5 },\n * })\n *\n * return <motion.div animate={controls} />\n * }\n * ```\n *\n * @returns Animation controller with `start` and `stop` methods\n *\n * @public\n */\nexport function useAnimationControls(): LegacyAnimationControls {\n const controls = useConstant(animationControls)\n\n useIsomorphicLayoutEffect(controls.mount, [])\n\n return controls\n}\n\nexport const useAnimation = useAnimationControls\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;;AAEC;AAEA;AAEA;AACJ;AAEO;;"}
|
||||
Generated
Vendored
-39
@@ -1,39 +0,0 @@
|
||||
import { appearAnimationStore } from './store.mjs';
|
||||
import { appearStoreId } from './store-id.mjs';
|
||||
|
||||
function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
|
||||
const storeId = appearStoreId(elementId, valueName);
|
||||
const optimisedAnimation = appearAnimationStore.get(storeId);
|
||||
if (!optimisedAnimation) {
|
||||
return null;
|
||||
}
|
||||
const { animation, startTime } = optimisedAnimation;
|
||||
function cancelAnimation() {
|
||||
window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
|
||||
}
|
||||
/**
|
||||
* We can cancel the animation once it's finished now that we've synced
|
||||
* with Motion.
|
||||
*
|
||||
* Prefer onfinish over finished as onfinish is backwards compatible with
|
||||
* older browsers.
|
||||
*/
|
||||
animation.onfinish = cancelAnimation;
|
||||
if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
|
||||
/**
|
||||
* If the startTime is null, this animation is the Paint Ready detection animation
|
||||
* and we can cancel it immediately without handoff.
|
||||
*
|
||||
* Or if we've already handed off the animation then we're now interrupting it.
|
||||
* In which case we need to cancel it.
|
||||
*/
|
||||
cancelAnimation();
|
||||
return null;
|
||||
}
|
||||
else {
|
||||
return startTime;
|
||||
}
|
||||
}
|
||||
|
||||
export { handoffOptimizedAppearAnimation };
|
||||
//# sourceMappingURL=handoff.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"handoff.mjs","sources":["../../../../src/animation/optimized-appear/handoff.ts"],"sourcesContent":["import type { Batcher } from \"motion-dom\"\nimport { appearAnimationStore } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\nexport function handoffOptimizedAppearAnimation(\n elementId: string,\n valueName: string,\n frame: Batcher\n): number | null {\n const storeId = appearStoreId(elementId, valueName)\n const optimisedAnimation = appearAnimationStore.get(storeId)\n\n if (!optimisedAnimation) {\n return null\n }\n\n const { animation, startTime } = optimisedAnimation\n\n function cancelAnimation() {\n window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame)\n }\n\n /**\n * We can cancel the animation once it's finished now that we've synced\n * with Motion.\n *\n * Prefer onfinish over finished as onfinish is backwards compatible with\n * older browsers.\n */\n animation.onfinish = cancelAnimation\n\n if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {\n /**\n * If the startTime is null, this animation is the Paint Ready detection animation\n * and we can cancel it immediately without handoff.\n *\n * Or if we've already handed off the animation then we're now interrupting it.\n * In which case we need to cancel it.\n */\n cancelAnimation()\n return null\n } else {\n return startTime\n }\n}\n"],"names":[],"mappings":";;;SAIgB,+BAA+B,CAC3C,SAAiB,EACjB,SAAiB,EACjB,KAAc,EAAA;IAEd,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IACnD,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC;IAE5D,IAAI,CAAC,kBAAkB,EAAE;AACrB,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,kBAAkB;AAEnD,IAAA,SAAS,eAAe,GAAA;QACpB,MAAM,CAAC,8BAA8B,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;IACxE;AAEA;;;;;;AAMG;AACH,IAAA,SAAS,CAAC,QAAQ,GAAG,eAAe;AAEpC,IAAA,IAAI,SAAS,KAAK,IAAI,IAAI,MAAM,CAAC,uBAAuB,GAAG,SAAS,CAAC,EAAE;AACnE;;;;;;AAMG;AACH,QAAA,eAAe,EAAE;AACjB,QAAA,OAAO,IAAI;IACf;SAAO;AACH,QAAA,OAAO,SAAS;IACpB;AACJ;;;;"}
|
||||
Generated
Vendored
-170
@@ -1,170 +0,0 @@
|
||||
import { optimizedAppearDataId, startWaapiAnimation, getOptimisedAppearId } from 'motion-dom';
|
||||
import { noop } from 'motion-utils';
|
||||
import { handoffOptimizedAppearAnimation } from './handoff.mjs';
|
||||
import { appearAnimationStore, appearComplete } from './store.mjs';
|
||||
import { appearStoreId } from './store-id.mjs';
|
||||
|
||||
/**
|
||||
* A single time to use across all animations to manually set startTime
|
||||
* and ensure they're all in sync.
|
||||
*/
|
||||
let startFrameTime;
|
||||
/**
|
||||
* A dummy animation to detect when Chrome is ready to start
|
||||
* painting the page and hold off from triggering the real animation
|
||||
* until then. We only need one animation to detect paint ready.
|
||||
*
|
||||
* https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
|
||||
*/
|
||||
let readyAnimation;
|
||||
/**
|
||||
* Keep track of animations that were suspended vs cancelled so we
|
||||
* can easily resume them when we're done measuring layout.
|
||||
*/
|
||||
const suspendedAnimations = new Set();
|
||||
function resumeSuspendedAnimations() {
|
||||
suspendedAnimations.forEach((data) => {
|
||||
data.animation.play();
|
||||
data.animation.startTime = data.startTime;
|
||||
});
|
||||
suspendedAnimations.clear();
|
||||
}
|
||||
function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
|
||||
// Prevent optimised appear animations if Motion has already started animating.
|
||||
if (window.MotionIsMounted) {
|
||||
return;
|
||||
}
|
||||
const id = element.dataset[optimizedAppearDataId];
|
||||
if (!id)
|
||||
return;
|
||||
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
||||
const storeId = appearStoreId(id, name);
|
||||
if (!readyAnimation) {
|
||||
readyAnimation = startWaapiAnimation(element, name, [keyframes[0], keyframes[0]],
|
||||
/**
|
||||
* 10 secs is basically just a super-safe duration to give Chrome
|
||||
* long enough to get the animation ready.
|
||||
*/
|
||||
{ duration: 10000, ease: "linear" });
|
||||
appearAnimationStore.set(storeId, {
|
||||
animation: readyAnimation,
|
||||
startTime: null,
|
||||
});
|
||||
/**
|
||||
* If there's no readyAnimation then there's been no instantiation
|
||||
* of handoff animations.
|
||||
*/
|
||||
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
||||
window.MotionHasOptimisedAnimation = (elementId, valueName) => {
|
||||
if (!elementId)
|
||||
return false;
|
||||
/**
|
||||
* Keep a map of elementIds that have started animating. We check
|
||||
* via ID instead of Element because of hydration errors and
|
||||
* pre-hydration checks. We also actively record IDs as they start
|
||||
* animating rather than simply checking for data-appear-id as
|
||||
* this attrbute might be present but not lead to an animation, for
|
||||
* instance if the element's appear animation is on a different
|
||||
* breakpoint.
|
||||
*/
|
||||
if (!valueName) {
|
||||
return appearComplete.has(elementId);
|
||||
}
|
||||
const animationId = appearStoreId(elementId, valueName);
|
||||
return Boolean(appearAnimationStore.get(animationId));
|
||||
};
|
||||
window.MotionHandoffMarkAsComplete = (elementId) => {
|
||||
if (appearComplete.has(elementId)) {
|
||||
appearComplete.set(elementId, true);
|
||||
}
|
||||
};
|
||||
window.MotionHandoffIsComplete = (elementId) => {
|
||||
return appearComplete.get(elementId) === true;
|
||||
};
|
||||
/**
|
||||
* We only need to cancel transform animations as
|
||||
* they're the ones that will interfere with the
|
||||
* layout animation measurements.
|
||||
*/
|
||||
window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
|
||||
const animationId = appearStoreId(elementId, valueName);
|
||||
const data = appearAnimationStore.get(animationId);
|
||||
if (!data)
|
||||
return;
|
||||
if (frame && canResume === undefined) {
|
||||
/**
|
||||
* Wait until the end of the subsequent frame to cancel the animation
|
||||
* to ensure we don't remove the animation before the main thread has
|
||||
* had a chance to resolve keyframes and render.
|
||||
*/
|
||||
frame.postRender(() => {
|
||||
frame.postRender(() => {
|
||||
data.animation.cancel();
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
data.animation.cancel();
|
||||
}
|
||||
if (frame && canResume) {
|
||||
suspendedAnimations.add(data);
|
||||
frame.render(resumeSuspendedAnimations);
|
||||
}
|
||||
else {
|
||||
appearAnimationStore.delete(animationId);
|
||||
/**
|
||||
* If there are no more animations left, we can remove the cancel function.
|
||||
* This will let us know when we can stop checking for conflicting layout animations.
|
||||
*/
|
||||
if (!appearAnimationStore.size) {
|
||||
window.MotionCancelOptimisedAnimation = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
window.MotionCheckAppearSync = (visualElement, valueName, value) => {
|
||||
const appearId = getOptimisedAppearId(visualElement);
|
||||
if (!appearId)
|
||||
return;
|
||||
const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
|
||||
const externalAnimationValue = visualElement.props.values?.[valueName];
|
||||
if (!valueIsOptimised || !externalAnimationValue)
|
||||
return;
|
||||
const removeSyncCheck = value.on("change", (latestValue) => {
|
||||
if (externalAnimationValue.get() !== latestValue) {
|
||||
window.MotionCancelOptimisedAnimation?.(appearId, valueName);
|
||||
removeSyncCheck();
|
||||
}
|
||||
});
|
||||
return removeSyncCheck;
|
||||
};
|
||||
}
|
||||
const startAnimation = () => {
|
||||
readyAnimation.cancel();
|
||||
const appearAnimation = startWaapiAnimation(element, name, keyframes, options);
|
||||
/**
|
||||
* Record the time of the first started animation. We call performance.now() once
|
||||
* here and once in handoff to ensure we're getting
|
||||
* close to a frame-locked time. This keeps all animations in sync.
|
||||
*/
|
||||
if (startFrameTime === undefined) {
|
||||
startFrameTime = performance.now();
|
||||
}
|
||||
appearAnimation.startTime = startFrameTime;
|
||||
appearAnimationStore.set(storeId, {
|
||||
animation: appearAnimation,
|
||||
startTime: startFrameTime,
|
||||
});
|
||||
if (onReady)
|
||||
onReady(appearAnimation);
|
||||
};
|
||||
appearComplete.set(id, false);
|
||||
if (readyAnimation.ready) {
|
||||
readyAnimation.ready.then(startAnimation).catch(noop);
|
||||
}
|
||||
else {
|
||||
startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
export { startOptimizedAppearAnimation };
|
||||
//# sourceMappingURL=start.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-9
@@ -1,9 +0,0 @@
|
||||
import { transformProps } from 'motion-dom';
|
||||
|
||||
const appearStoreId = (elementId, valueName) => {
|
||||
const key = transformProps.has(valueName) ? "transform" : valueName;
|
||||
return `${elementId}: ${key}`;
|
||||
};
|
||||
|
||||
export { appearStoreId };
|
||||
//# sourceMappingURL=store-id.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"store-id.mjs","sources":["../../../../src/animation/optimized-appear/store-id.ts"],"sourcesContent":["import { transformProps } from \"motion-dom\"\n\nexport const appearStoreId = (elementId: string, valueName: string) => {\n const key = transformProps.has(valueName) ? \"transform\" : valueName\n\n return `${elementId}: ${key}`\n}\n"],"names":[],"mappings":";;MAEa,aAAa,GAAG,CAAC,SAAiB,EAAE,SAAiB,KAAI;AAClE,IAAA,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,WAAW,GAAG,SAAS;AAEnE,IAAA,OAAO,CAAA,EAAG,SAAS,CAAA,EAAA,EAAK,GAAG,EAAE;AACjC;;;;"}
|
||||
Generated
Vendored
-5
@@ -1,5 +0,0 @@
|
||||
const appearAnimationStore = new Map();
|
||||
const appearComplete = new Map();
|
||||
|
||||
export { appearAnimationStore, appearComplete };
|
||||
//# sourceMappingURL=store.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"store.mjs","sources":["../../../../src/animation/optimized-appear/store.ts"],"sourcesContent":["export interface AppearStoreEntry {\n animation: Animation\n startTime: number | null\n}\n\nexport type AppearElementId = string\n\nexport type IsComplete = boolean\n\nexport const appearAnimationStore = new Map<AppearElementId, AppearStoreEntry>()\n\nexport const appearComplete = new Map<AppearElementId, IsComplete>()\n"],"names":[],"mappings":"AASO,MAAM,oBAAoB,GAAG,IAAI,GAAG;AAEpC,MAAM,cAAc,GAAG,IAAI,GAAG;;;;"}
|
||||
Generated
Vendored
-308
@@ -1,308 +0,0 @@
|
||||
import { isMotionValue, defaultOffset, isGenerator, createGeneratorEasing, fillOffset } from 'motion-dom';
|
||||
import { progress, secondsToMilliseconds, warning, reverseEasing, getEasingForSegment } from 'motion-utils';
|
||||
import { resolveSubjects } from '../animate/resolve-subjects.mjs';
|
||||
import { calculateRepeatDuration } from './utils/calc-repeat-duration.mjs';
|
||||
import { calcNextTime } from './utils/calc-time.mjs';
|
||||
import { addKeyframes } from './utils/edit.mjs';
|
||||
import { normalizeTimes } from './utils/normalize-times.mjs';
|
||||
import { compareByTime } from './utils/sort.mjs';
|
||||
|
||||
const defaultSegmentEasing = "easeInOut";
|
||||
const MAX_REPEAT = 20;
|
||||
function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
|
||||
const defaultDuration = defaultTransition.duration || 0.3;
|
||||
const animationDefinitions = new Map();
|
||||
const sequences = new Map();
|
||||
const elementCache = {};
|
||||
const timeLabels = new Map();
|
||||
let prevTime = 0;
|
||||
let currentTime = 0;
|
||||
let totalDuration = 0;
|
||||
/**
|
||||
* Build the timeline by mapping over the sequence array and converting
|
||||
* the definitions into keyframes and offsets with absolute time values.
|
||||
* These will later get converted into relative offsets in a second pass.
|
||||
*/
|
||||
for (let i = 0; i < sequence.length; i++) {
|
||||
const segment = sequence[i];
|
||||
/**
|
||||
* If this is a timeline label, mark it and skip the rest of this iteration.
|
||||
*/
|
||||
if (typeof segment === "string") {
|
||||
timeLabels.set(segment, currentTime);
|
||||
continue;
|
||||
}
|
||||
else if (!Array.isArray(segment)) {
|
||||
timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
|
||||
continue;
|
||||
}
|
||||
let [subject, keyframes, transition = {}] = segment;
|
||||
/**
|
||||
* If a relative or absolute time value has been specified we need to resolve
|
||||
* it in relation to the currentTime.
|
||||
*/
|
||||
if (transition.at !== undefined) {
|
||||
currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
|
||||
}
|
||||
/**
|
||||
* Keep track of the maximum duration in this definition. This will be
|
||||
* applied to currentTime once the definition has been parsed.
|
||||
*/
|
||||
let maxDuration = 0;
|
||||
const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
|
||||
const valueKeyframesAsList = keyframesAsList(valueKeyframes);
|
||||
const { delay = 0, times = defaultOffset(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
|
||||
let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
|
||||
/**
|
||||
* Resolve stagger() if defined.
|
||||
*/
|
||||
const calculatedDelay = typeof delay === "function"
|
||||
? delay(elementIndex, numSubjects)
|
||||
: delay;
|
||||
/**
|
||||
* If this animation should and can use a spring, generate a spring easing function.
|
||||
*/
|
||||
const numKeyframes = valueKeyframesAsList.length;
|
||||
const createGenerator = isGenerator(type)
|
||||
? type
|
||||
: generators?.[type || "keyframes"];
|
||||
if (numKeyframes <= 2 && createGenerator) {
|
||||
/**
|
||||
* As we're creating an easing function from a spring,
|
||||
* ideally we want to generate it using the real distance
|
||||
* between the two keyframes. However this isn't always
|
||||
* possible - in these situations we use 0-100.
|
||||
*/
|
||||
let absoluteDelta = 100;
|
||||
if (numKeyframes === 2 &&
|
||||
isNumberKeyframesArray(valueKeyframesAsList)) {
|
||||
const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
|
||||
absoluteDelta = Math.abs(delta);
|
||||
}
|
||||
const springTransition = {
|
||||
...defaultTransition,
|
||||
...remainingTransition,
|
||||
};
|
||||
if (duration !== undefined) {
|
||||
springTransition.duration = secondsToMilliseconds(duration);
|
||||
}
|
||||
const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
|
||||
ease = springEasing.ease;
|
||||
duration = springEasing.duration;
|
||||
}
|
||||
duration ?? (duration = defaultDuration);
|
||||
const startTime = currentTime + calculatedDelay;
|
||||
/**
|
||||
* If there's only one time offset of 0, fill in a second with length 1
|
||||
*/
|
||||
if (times.length === 1 && times[0] === 0) {
|
||||
times[1] = 1;
|
||||
}
|
||||
/**
|
||||
* Fill out if offset if fewer offsets than keyframes
|
||||
*/
|
||||
const remainder = times.length - valueKeyframesAsList.length;
|
||||
remainder > 0 && fillOffset(times, remainder);
|
||||
/**
|
||||
* If only one value has been set, ie [1], push a null to the start of
|
||||
* the keyframe array. This will let us mark a keyframe at this point
|
||||
* that will later be hydrated with the previous value.
|
||||
*/
|
||||
valueKeyframesAsList.length === 1 &&
|
||||
valueKeyframesAsList.unshift(null);
|
||||
/**
|
||||
* Segments can't express `repeat: Infinity` or very large
|
||||
* counts — they'd leave dead time after the segment or
|
||||
* explode the keyframe array. Ignore with a warning.
|
||||
*/
|
||||
if (repeat) {
|
||||
warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
|
||||
}
|
||||
if (repeat && repeat < MAX_REPEAT) {
|
||||
/**
|
||||
* Express repeatDelay in units of a single iteration's duration
|
||||
* so it can be added to the per-iteration time offsets below
|
||||
* before they're normalized to 0-1.
|
||||
*/
|
||||
const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
|
||||
duration = calculateRepeatDuration(duration, repeat, repeatDelay);
|
||||
const originalKeyframes = [...valueKeyframesAsList];
|
||||
const originalTimes = [...times];
|
||||
ease = Array.isArray(ease) ? [...ease] : [ease];
|
||||
const originalEase = [...ease];
|
||||
/**
|
||||
* For reverse/mirror, alternate iterations play the segment
|
||||
* backwards. mirror matches JSAnimation's mirroredGenerator:
|
||||
* reversed keyframes, easings unchanged. reverse matches
|
||||
* JSAnimation's iterationProgress = 1 - p: reversed
|
||||
* keyframes, easing array reversed AND each function easing
|
||||
* mapped through reverseEasing (string easings unchanged —
|
||||
* they're resolved later by the keyframes engine).
|
||||
*/
|
||||
const isFlipping = repeatType === "reverse" || repeatType === "mirror";
|
||||
let flippedKeyframes = originalKeyframes;
|
||||
let flippedEases = originalEase;
|
||||
if (isFlipping) {
|
||||
flippedKeyframes = [...originalKeyframes].reverse();
|
||||
if (repeatType === "reverse") {
|
||||
flippedEases = [...originalEase]
|
||||
.reverse()
|
||||
.map((e) => typeof e === "function"
|
||||
? reverseEasing(e)
|
||||
: e);
|
||||
}
|
||||
}
|
||||
for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
|
||||
const isFlipped = isFlipping && repeatIndex % 2 === 0;
|
||||
const iterKeyframes = isFlipped
|
||||
? flippedKeyframes
|
||||
: originalKeyframes;
|
||||
const iterEase = isFlipped ? flippedEases : originalEase;
|
||||
const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
|
||||
/**
|
||||
* If repeatDelay is set, hold the previous iteration's
|
||||
* final value through the delay by inserting a keyframe
|
||||
* at the moment the next iteration begins.
|
||||
*/
|
||||
if (repeatDelayUnits > 0) {
|
||||
valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
|
||||
times.push(iterStartOffset);
|
||||
ease.push("linear");
|
||||
}
|
||||
valueKeyframesAsList.push(...iterKeyframes);
|
||||
for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
|
||||
times.push(originalTimes[keyframeIndex] + iterStartOffset);
|
||||
ease.push(keyframeIndex === 0
|
||||
? "linear"
|
||||
: getEasingForSegment(iterEase, keyframeIndex - 1));
|
||||
}
|
||||
}
|
||||
normalizeTimes(times, repeat, repeatDelayUnits);
|
||||
}
|
||||
const targetTime = startTime + duration;
|
||||
/**
|
||||
* Add keyframes, mapping offsets to absolute time.
|
||||
*/
|
||||
addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
|
||||
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
||||
totalDuration = Math.max(targetTime, totalDuration);
|
||||
};
|
||||
if (isMotionValue(subject)) {
|
||||
const subjectSequence = getSubjectSequence(subject, sequences);
|
||||
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
||||
}
|
||||
else {
|
||||
const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
|
||||
const numSubjects = subjects.length;
|
||||
/**
|
||||
* For every element in this segment, process the defined values.
|
||||
*/
|
||||
for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
|
||||
/**
|
||||
* Cast necessary, but we know these are of this type
|
||||
*/
|
||||
keyframes = keyframes;
|
||||
transition = transition;
|
||||
const thisSubject = subjects[subjectIndex];
|
||||
const subjectSequence = getSubjectSequence(thisSubject, sequences);
|
||||
for (const key in keyframes) {
|
||||
resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
|
||||
}
|
||||
}
|
||||
}
|
||||
prevTime = currentTime;
|
||||
currentTime += maxDuration;
|
||||
}
|
||||
/**
|
||||
* For every element and value combination create a new animation.
|
||||
*/
|
||||
sequences.forEach((valueSequences, element) => {
|
||||
for (const key in valueSequences) {
|
||||
const valueSequence = valueSequences[key];
|
||||
/**
|
||||
* Arrange all the keyframes in ascending time order.
|
||||
*/
|
||||
valueSequence.sort(compareByTime);
|
||||
const keyframes = [];
|
||||
const valueOffset = [];
|
||||
const valueEasing = [];
|
||||
/**
|
||||
* For each keyframe, translate absolute times into
|
||||
* relative offsets based on the total duration of the timeline.
|
||||
*/
|
||||
for (let i = 0; i < valueSequence.length; i++) {
|
||||
const { at, value, easing } = valueSequence[i];
|
||||
keyframes.push(value);
|
||||
valueOffset.push(progress(0, totalDuration, at));
|
||||
valueEasing.push(easing || "easeOut");
|
||||
}
|
||||
/**
|
||||
* If the first keyframe doesn't land on offset: 0
|
||||
* provide one by duplicating the initial keyframe. This ensures
|
||||
* it snaps to the first keyframe when the animation starts.
|
||||
*/
|
||||
if (valueOffset[0] !== 0) {
|
||||
valueOffset.unshift(0);
|
||||
keyframes.unshift(keyframes[0]);
|
||||
valueEasing.unshift(defaultSegmentEasing);
|
||||
}
|
||||
/**
|
||||
* If the last keyframe doesn't land on offset: 1
|
||||
* provide one with a null wildcard value. This will ensure it
|
||||
* stays static until the end of the animation.
|
||||
*/
|
||||
if (valueOffset[valueOffset.length - 1] !== 1) {
|
||||
valueOffset.push(1);
|
||||
keyframes.push(null);
|
||||
}
|
||||
if (!animationDefinitions.has(element)) {
|
||||
animationDefinitions.set(element, {
|
||||
keyframes: {},
|
||||
transition: {},
|
||||
});
|
||||
}
|
||||
const definition = animationDefinitions.get(element);
|
||||
definition.keyframes[key] = keyframes;
|
||||
/**
|
||||
* Exclude `type` from defaultTransition since springs have been
|
||||
* converted to duration-based easing functions in resolveValueSequence.
|
||||
* Including `type: "spring"` would cause JSAnimation to error when
|
||||
* the merged keyframes array has more than 2 keyframes.
|
||||
*/
|
||||
const { type: _type, ...remainingDefaultTransition } = defaultTransition;
|
||||
definition.transition[key] = {
|
||||
...remainingDefaultTransition,
|
||||
duration: totalDuration,
|
||||
ease: valueEasing,
|
||||
times: valueOffset,
|
||||
...sequenceTransition,
|
||||
};
|
||||
}
|
||||
});
|
||||
return animationDefinitions;
|
||||
}
|
||||
function getSubjectSequence(subject, sequences) {
|
||||
!sequences.has(subject) && sequences.set(subject, {});
|
||||
return sequences.get(subject);
|
||||
}
|
||||
function getValueSequence(name, sequences) {
|
||||
if (!sequences[name])
|
||||
sequences[name] = [];
|
||||
return sequences[name];
|
||||
}
|
||||
function keyframesAsList(keyframes) {
|
||||
return Array.isArray(keyframes) ? keyframes : [keyframes];
|
||||
}
|
||||
function getValueTransition(transition, key) {
|
||||
return transition && transition[key]
|
||||
? {
|
||||
...transition,
|
||||
...transition[key],
|
||||
}
|
||||
: { ...transition };
|
||||
}
|
||||
const isNumber = (keyframe) => typeof keyframe === "number";
|
||||
const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
|
||||
|
||||
export { createAnimationsFromSequence, getValueTransition };
|
||||
//# sourceMappingURL=create.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-6
@@ -1,6 +0,0 @@
|
||||
function calculateRepeatDuration(duration, repeat, repeatDelay) {
|
||||
return duration * (repeat + 1) + repeatDelay * repeat;
|
||||
}
|
||||
|
||||
export { calculateRepeatDuration };
|
||||
//# sourceMappingURL=calc-repeat-duration.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"calc-repeat-duration.mjs","sources":["../../../../../src/animation/sequence/utils/calc-repeat-duration.ts"],"sourcesContent":["export function calculateRepeatDuration(\n duration: number,\n repeat: number,\n repeatDelay: number\n): number {\n return duration * (repeat + 1) + repeatDelay * repeat\n}\n"],"names":[],"mappings":"SAAgB,uBAAuB,CACnC,QAAgB,EAChB,MAAc,EACd,WAAmB,EAAA;IAEnB,OAAO,QAAQ,IAAI,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,MAAM;AACzD;;;;"}
|
||||
Generated
Vendored
-24
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* Given a absolute or relative time definition and current/prev time state of the sequence,
|
||||
* calculate an absolute time for the next keyframes.
|
||||
*/
|
||||
function calcNextTime(current, next, prev, labels) {
|
||||
if (typeof next === "number") {
|
||||
return next;
|
||||
}
|
||||
else if (next.startsWith("-") || next.startsWith("+")) {
|
||||
return Math.max(0, current + parseFloat(next));
|
||||
}
|
||||
else if (next === "<") {
|
||||
return prev;
|
||||
}
|
||||
else if (next.startsWith("<")) {
|
||||
return Math.max(0, prev + parseFloat(next.slice(1)));
|
||||
}
|
||||
else {
|
||||
return labels.get(next) ?? current;
|
||||
}
|
||||
}
|
||||
|
||||
export { calcNextTime };
|
||||
//# sourceMappingURL=calc-time.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"calc-time.mjs","sources":["../../../../../src/animation/sequence/utils/calc-time.ts"],"sourcesContent":["import { SequenceTime } from \"../types\"\n\n/**\n * Given a absolute or relative time definition and current/prev time state of the sequence,\n * calculate an absolute time for the next keyframes.\n */\nexport function calcNextTime(\n current: number,\n next: SequenceTime,\n prev: number,\n labels: Map<string, number>\n): number {\n if (typeof next === \"number\") {\n return next\n } else if (next.startsWith(\"-\") || next.startsWith(\"+\")) {\n return Math.max(0, current + parseFloat(next))\n } else if (next === \"<\") {\n return prev\n } else if (next.startsWith(\"<\")) {\n return Math.max(0, prev + parseFloat(next.slice(1)))\n } else {\n return labels.get(next) ?? current\n }\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACG,SAAU,YAAY,CACxB,OAAe,EACf,IAAkB,EAClB,IAAY,EACZ,MAA2B,EAAA;AAE3B,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC1B,QAAA,OAAO,IAAI;IACf;AAAO,SAAA,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACrD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAClD;AAAO,SAAA,IAAI,IAAI,KAAK,GAAG,EAAE;AACrB,QAAA,OAAO,IAAI;IACf;AAAO,SAAA,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD;SAAO;QACH,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,OAAO;IACtC;AACJ;;;;"}
|
||||
Generated
Vendored
-31
@@ -1,31 +0,0 @@
|
||||
import { mixNumber } from 'motion-dom';
|
||||
import { getEasingForSegment, removeItem } from 'motion-utils';
|
||||
|
||||
function eraseKeyframes(sequence, startTime, endTime) {
|
||||
for (let i = 0; i < sequence.length; i++) {
|
||||
const keyframe = sequence[i];
|
||||
if (keyframe.at > startTime && keyframe.at < endTime) {
|
||||
removeItem(sequence, keyframe);
|
||||
// If we remove this item we have to push the pointer back one
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
|
||||
/**
|
||||
* Erase every existing value between currentTime and targetTime,
|
||||
* this will essentially splice this timeline into any currently
|
||||
* defined ones.
|
||||
*/
|
||||
eraseKeyframes(sequence, startTime, endTime);
|
||||
for (let i = 0; i < keyframes.length; i++) {
|
||||
sequence.push({
|
||||
value: keyframes[i],
|
||||
at: mixNumber(startTime, endTime, offset[i]),
|
||||
easing: getEasingForSegment(easing, i),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export { addKeyframes, eraseKeyframes };
|
||||
//# sourceMappingURL=edit.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"edit.mjs","sources":["../../../../../src/animation/sequence/utils/edit.ts"],"sourcesContent":["import { mixNumber, UnresolvedValueKeyframe } from \"motion-dom\"\nimport { Easing, getEasingForSegment, removeItem } from \"motion-utils\"\nimport type { ValueSequence } from \"../types\"\n\nexport function eraseKeyframes(\n sequence: ValueSequence,\n startTime: number,\n endTime: number\n): void {\n for (let i = 0; i < sequence.length; i++) {\n const keyframe = sequence[i]\n\n if (keyframe.at > startTime && keyframe.at < endTime) {\n removeItem(sequence, keyframe)\n\n // If we remove this item we have to push the pointer back one\n i--\n }\n }\n}\n\nexport function addKeyframes(\n sequence: ValueSequence,\n keyframes: UnresolvedValueKeyframe[],\n easing: Easing | Easing[],\n offset: number[],\n startTime: number,\n endTime: number\n): void {\n /**\n * Erase every existing value between currentTime and targetTime,\n * this will essentially splice this timeline into any currently\n * defined ones.\n */\n eraseKeyframes(sequence, startTime, endTime)\n\n for (let i = 0; i < keyframes.length; i++) {\n sequence.push({\n value: keyframes[i],\n at: mixNumber(startTime, endTime, offset[i]),\n easing: getEasingForSegment(easing, i),\n })\n }\n}\n"],"names":[],"mappings":";;;SAIgB,cAAc,CAC1B,QAAuB,EACvB,SAAiB,EACjB,OAAe,EAAA;AAEf,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACtC,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE5B,QAAA,IAAI,QAAQ,CAAC,EAAE,GAAG,SAAS,IAAI,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE;AAClD,YAAA,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAG9B,YAAA,CAAC,EAAE;QACP;IACJ;AACJ;AAEM,SAAU,YAAY,CACxB,QAAuB,EACvB,SAAoC,EACpC,MAAyB,EACzB,MAAgB,EAChB,SAAiB,EACjB,OAAe,EAAA;AAEf;;;;AAIG;AACH,IAAA,cAAc,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC;AAE5C,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,QAAQ,CAAC,IAAI,CAAC;AACV,YAAA,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;YACnB,EAAE,EAAE,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5C,YAAA,MAAM,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;AACzC,SAAA,CAAC;IACN;AACJ;;;;"}
|
||||
Generated
Vendored
-18
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Take an array of times that represent repeated keyframes. For instance
|
||||
* if we have original times of [0, 0.5, 1] then our repeated times will
|
||||
* be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
|
||||
* down to a 0-1 scale.
|
||||
*
|
||||
* `repeatDelayUnits` is the repeatDelay expressed in units of a single
|
||||
* iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.
|
||||
*/
|
||||
function normalizeTimes(times, repeat, repeatDelayUnits = 0) {
|
||||
const totalUnits = repeat + 1 + repeat * repeatDelayUnits;
|
||||
for (let i = 0; i < times.length; i++) {
|
||||
times[i] = times[i] / totalUnits;
|
||||
}
|
||||
}
|
||||
|
||||
export { normalizeTimes };
|
||||
//# sourceMappingURL=normalize-times.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"normalize-times.mjs","sources":["../../../../../src/animation/sequence/utils/normalize-times.ts"],"sourcesContent":["/**\n * Take an array of times that represent repeated keyframes. For instance\n * if we have original times of [0, 0.5, 1] then our repeated times will\n * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back\n * down to a 0-1 scale.\n *\n * `repeatDelayUnits` is the repeatDelay expressed in units of a single\n * iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.\n */\nexport function normalizeTimes(\n times: number[],\n repeat: number,\n repeatDelayUnits = 0\n): void {\n const totalUnits = repeat + 1 + repeat * repeatDelayUnits\n for (let i = 0; i < times.length; i++) {\n times[i] = times[i] / totalUnits\n }\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;AAQG;AACG,SAAU,cAAc,CAC1B,KAAe,EACf,MAAc,EACd,gBAAgB,GAAG,CAAC,EAAA;IAEpB,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,gBAAgB;AACzD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACnC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU;IACpC;AACJ;;;;"}
|
||||
Generated
Vendored
-15
@@ -1,15 +0,0 @@
|
||||
function compareByTime(a, b) {
|
||||
if (a.at === b.at) {
|
||||
if (a.value === null)
|
||||
return 1;
|
||||
if (b.value === null)
|
||||
return -1;
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return a.at - b.at;
|
||||
}
|
||||
}
|
||||
|
||||
export { compareByTime };
|
||||
//# sourceMappingURL=sort.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"sort.mjs","sources":["../../../../../src/animation/sequence/utils/sort.ts"],"sourcesContent":["import { AbsoluteKeyframe } from \"../types\"\n\nexport function compareByTime(\n a: AbsoluteKeyframe,\n b: AbsoluteKeyframe\n): number {\n if (a.at === b.at) {\n if (a.value === null) return 1\n if (b.value === null) return -1\n return 0\n } else {\n return a.at - b.at\n }\n}\n"],"names":[],"mappings":"AAEM,SAAU,aAAa,CACzB,CAAmB,EACnB,CAAmB,EAAA;IAEnB,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE;AACf,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO,CAAC;AAC9B,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI;YAAE,OAAO,EAAE;AAC/B,QAAA,OAAO,CAAC;IACZ;SAAO;AACH,QAAA,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE;IACtB;AACJ;;;;"}
|
||||
Generated
Vendored
-41
@@ -1,41 +0,0 @@
|
||||
import { isSVGElement, isSVGSVGElement, SVGVisualElement, HTMLVisualElement, visualElementStore, ObjectVisualElement } from 'motion-dom';
|
||||
|
||||
function createDOMVisualElement(element) {
|
||||
const options = {
|
||||
presenceContext: null,
|
||||
props: {},
|
||||
visualState: {
|
||||
renderState: {
|
||||
transform: {},
|
||||
transformOrigin: {},
|
||||
style: {},
|
||||
vars: {},
|
||||
attrs: {},
|
||||
},
|
||||
latestValues: {},
|
||||
},
|
||||
};
|
||||
const node = isSVGElement(element) && !isSVGSVGElement(element)
|
||||
? new SVGVisualElement(options)
|
||||
: new HTMLVisualElement(options);
|
||||
node.mount(element);
|
||||
visualElementStore.set(element, node);
|
||||
}
|
||||
function createObjectVisualElement(subject) {
|
||||
const options = {
|
||||
presenceContext: null,
|
||||
props: {},
|
||||
visualState: {
|
||||
renderState: {
|
||||
output: {},
|
||||
},
|
||||
latestValues: {},
|
||||
},
|
||||
};
|
||||
const node = new ObjectVisualElement(options);
|
||||
node.mount(subject);
|
||||
visualElementStore.set(subject, node);
|
||||
}
|
||||
|
||||
export { createDOMVisualElement, createObjectVisualElement };
|
||||
//# sourceMappingURL=create-visual-element.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/animation/utils/create-visual-element.ts"],"sourcesContent":["import {\n HTMLVisualElement,\n isSVGElement,\n isSVGSVGElement,\n ObjectVisualElement,\n SVGVisualElement,\n visualElementStore,\n} from \"motion-dom\"\n\nexport function createDOMVisualElement(element: HTMLElement | SVGElement) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n transform: {},\n transformOrigin: {},\n style: {},\n vars: {},\n attrs: {},\n },\n latestValues: {},\n },\n }\n const node =\n isSVGElement(element) && !isSVGSVGElement(element)\n ? new SVGVisualElement(options)\n : new HTMLVisualElement(options)\n\n node.mount(element as any)\n\n visualElementStore.set(element, node)\n}\n\nexport function createObjectVisualElement(subject: Object) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n output: {},\n },\n latestValues: {},\n },\n }\n const node = new ObjectVisualElement(options)\n\n node.mount(subject)\n\n visualElementStore.set(subject, node)\n}\n"],"names":[],"mappings":";;AASM,SAAU,sBAAsB,CAAC,OAAiC,EAAA;AACpE,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE;AACT,YAAA,WAAW,EAAE;AACT,gBAAA,SAAS,EAAE,EAAE;AACb,gBAAA,eAAe,EAAE,EAAE;AACnB,gBAAA,KAAK,EAAE,EAAE;AACT,gBAAA,IAAI,EAAE,EAAE;AACR,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;KACJ;IACD,MAAM,IAAI,GACN,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO;AAC7C,UAAE,IAAI,gBAAgB,CAAC,OAAO;AAC9B,UAAE,IAAI,iBAAiB,CAAC,OAAO,CAAC;AAExC,IAAA,IAAI,CAAC,KAAK,CAAC,OAAc,CAAC;AAE1B,IAAA,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC;AACzC;AAEM,SAAU,yBAAyB,CAAC,OAAe,EAAA;AACrD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE;AACT,YAAA,WAAW,EAAE;AACT,gBAAA,MAAM,EAAE,EAAE;AACb,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;KACJ;AACD,IAAA,MAAM,IAAI,GAAG,IAAI,mBAAmB,CAAC,OAAO,CAAC;AAE7C,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAEnB,IAAA,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC;AACzC;;;;"}
|
||||
Generated
Vendored
-6
@@ -1,6 +0,0 @@
|
||||
function isDOMKeyframes(keyframes) {
|
||||
return typeof keyframes === "object" && !Array.isArray(keyframes);
|
||||
}
|
||||
|
||||
export { isDOMKeyframes };
|
||||
//# sourceMappingURL=is-dom-keyframes.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"is-dom-keyframes.mjs","sources":["../../../../src/animation/utils/is-dom-keyframes.ts"],"sourcesContent":["import { DOMKeyframesDefinition } from \"motion-dom\"\n\nexport function isDOMKeyframes(\n keyframes: unknown\n): keyframes is DOMKeyframesDefinition {\n return typeof keyframes === \"object\" && !Array.isArray(keyframes)\n}\n"],"names":[],"mappings":"AAEM,SAAU,cAAc,CAC1B,SAAkB,EAAA;AAElB,IAAA,OAAO,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;AACrE;;;;"}
|
||||
Generated
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
export { MotionA as a, MotionAbbr as abbr, MotionAddress as address, MotionAnimate as animate, MotionArea as area, MotionArticle as article, MotionAside as aside, MotionAudio as audio, MotionB as b, MotionBase as base, MotionBdi as bdi, MotionBdo as bdo, MotionBig as big, MotionBlockquote as blockquote, MotionBody as body, MotionButton as button, MotionCanvas as canvas, MotionCaption as caption, MotionCircle as circle, MotionCite as cite, MotionClipPath as clipPath, MotionCode as code, MotionCol as col, MotionColgroup as colgroup, MotionData as data, MotionDatalist as datalist, MotionDd as dd, MotionDefs as defs, MotionDel as del, MotionDesc as desc, MotionDetails as details, MotionDfn as dfn, MotionDialog as dialog, MotionDiv as div, MotionDl as dl, MotionDt as dt, MotionEllipse as ellipse, MotionEm as em, MotionEmbed as embed, MotionFeBlend as feBlend, MotionFeColorMatrix as feColorMatrix, MotionFeComponentTransfer as feComponentTransfer, MotionFeComposite as feComposite, MotionFeConvolveMatrix as feConvolveMatrix, MotionFeDiffuseLighting as feDiffuseLighting, MotionFeDisplacementMap as feDisplacementMap, MotionFeDistantLight as feDistantLight, MotionFeDropShadow as feDropShadow, MotionFeFlood as feFlood, MotionFeFuncA as feFuncA, MotionFeFuncB as feFuncB, MotionFeFuncG as feFuncG, MotionFeFuncR as feFuncR, MotionFeGaussianBlur as feGaussianBlur, MotionFeImage as feImage, MotionFeMerge as feMerge, MotionFeMergeNode as feMergeNode, MotionFeMorphology as feMorphology, MotionFeOffset as feOffset, MotionFePointLight as fePointLight, MotionFeSpecularLighting as feSpecularLighting, MotionFeSpotLight as feSpotLight, MotionFeTile as feTile, MotionFeTurbulence as feTurbulence, MotionFieldset as fieldset, MotionFigcaption as figcaption, MotionFigure as figure, MotionFilter as filter, MotionFooter as footer, MotionForeignObject as foreignObject, MotionForm as form, MotionG as g, MotionH1 as h1, MotionH2 as h2, MotionH3 as h3, MotionH4 as h4, MotionH5 as h5, MotionH6 as h6, MotionHead as head, MotionHeader as header, MotionHgroup as hgroup, MotionHr as hr, MotionHtml as html, MotionI as i, MotionIframe as iframe, MotionImage as image, MotionImg as img, MotionInput as input, MotionIns as ins, MotionKbd as kbd, MotionKeygen as keygen, MotionLabel as label, MotionLegend as legend, MotionLi as li, MotionLine as line, MotionLinearGradient as linearGradient, MotionLink as link, MotionMain as main, MotionMap as map, MotionMark as mark, MotionMarker as marker, MotionMask as mask, MotionMenu as menu, MotionMenuitem as menuitem, MotionMetadata as metadata, MotionMeter as meter, MotionNav as nav, MotionObject as object, MotionOl as ol, MotionOptgroup as optgroup, MotionOption as option, MotionOutput as output, MotionP as p, MotionParam as param, MotionPath as path, MotionPattern as pattern, MotionPicture as picture, MotionPolygon as polygon, MotionPolyline as polyline, MotionPre as pre, MotionProgress as progress, MotionQ as q, MotionRadialGradient as radialGradient, MotionRect as rect, MotionRp as rp, MotionRt as rt, MotionRuby as ruby, MotionS as s, MotionSamp as samp, MotionScript as script, MotionSection as section, MotionSelect as select, MotionSmall as small, MotionSource as source, MotionSpan as span, MotionStop as stop, MotionStrong as strong, MotionStyle as style, MotionSub as sub, MotionSummary as summary, MotionSup as sup, MotionSvg as svg, MotionSymbol as symbol, MotionTable as table, MotionTbody as tbody, MotionTd as td, MotionText as text, MotionTextPath as textPath, MotionTextarea as textarea, MotionTfoot as tfoot, MotionTh as th, MotionThead as thead, MotionTime as time, MotionTitle as title, MotionTr as tr, MotionTrack as track, MotionTspan as tspan, MotionU as u, MotionUl as ul, MotionUse as use, MotionVideo as video, MotionView as view, MotionWbr as wbr, MotionWebview as webview } from './render/components/motion/elements.mjs';
|
||||
//# sourceMappingURL=client.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"client.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
||||
Generated
Vendored
-112
@@ -1,112 +0,0 @@
|
||||
"use client";
|
||||
import { jsx } from 'react/jsx-runtime';
|
||||
import { isHTMLElement } from 'motion-dom';
|
||||
import * as React from 'react';
|
||||
import { useId, useRef, useContext, useInsertionEffect } from 'react';
|
||||
import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
|
||||
import { useComposedRefs } from '../../utils/use-composed-ref.mjs';
|
||||
|
||||
/**
|
||||
* Measurement functionality has to be within a separate component
|
||||
* to leverage snapshot lifecycle.
|
||||
*/
|
||||
class PopChildMeasure extends React.Component {
|
||||
getSnapshotBeforeUpdate(prevProps) {
|
||||
const element = this.props.childRef.current;
|
||||
if (isHTMLElement(element) && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
|
||||
const parent = element.offsetParent;
|
||||
const parentWidth = isHTMLElement(parent)
|
||||
? parent.offsetWidth || 0
|
||||
: 0;
|
||||
const parentHeight = isHTMLElement(parent)
|
||||
? parent.offsetHeight || 0
|
||||
: 0;
|
||||
const computedStyle = getComputedStyle(element);
|
||||
const size = this.props.sizeRef.current;
|
||||
size.height = parseFloat(computedStyle.height);
|
||||
size.width = parseFloat(computedStyle.width);
|
||||
size.top = element.offsetTop;
|
||||
size.left = element.offsetLeft;
|
||||
size.right = parentWidth - size.width - size.left;
|
||||
size.bottom = parentHeight - size.height - size.top;
|
||||
size.direction = computedStyle.direction;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
/**
|
||||
* Required with getSnapshotBeforeUpdate to stop React complaining.
|
||||
*/
|
||||
componentDidUpdate() { }
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
function PopChild({ children, isPresent, anchorX, anchorY, root, pop }) {
|
||||
const id = useId();
|
||||
const ref = useRef(null);
|
||||
const size = useRef({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
direction: "ltr",
|
||||
});
|
||||
const { nonce } = useContext(MotionConfigContext);
|
||||
/**
|
||||
* In React 19, refs are passed via props.ref instead of element.ref.
|
||||
* We check props.ref first (React 19) and fall back to element.ref (React 18).
|
||||
*/
|
||||
const childRef = children.props?.ref ??
|
||||
children?.ref;
|
||||
const composedRef = useComposedRefs(ref, childRef);
|
||||
/**
|
||||
* We create and inject a style block so we can apply this explicit
|
||||
* sizing in a non-destructive manner by just deleting the style block.
|
||||
*
|
||||
* We can't apply size via render as the measurement happens
|
||||
* in getSnapshotBeforeUpdate (post-render), likewise if we apply the
|
||||
* styles directly on the DOM node, we might be overwriting
|
||||
* styles set via the style prop.
|
||||
*/
|
||||
useInsertionEffect(() => {
|
||||
const { width, height, top, left, right, bottom, direction } = size.current;
|
||||
if (isPresent || pop === false || !ref.current || !width || !height)
|
||||
return;
|
||||
const isRTL = direction === "rtl";
|
||||
const x = anchorX === "left"
|
||||
? (isRTL ? `right: ${right}` : `left: ${left}`)
|
||||
: (isRTL ? `left: ${left}` : `right: ${right}`);
|
||||
const y = anchorY === "bottom" ? `bottom: ${bottom}` : `top: ${top}`;
|
||||
ref.current.dataset.motionPopId = id;
|
||||
const style = document.createElement("style");
|
||||
if (nonce)
|
||||
style.nonce = nonce;
|
||||
const parent = root ?? document.head;
|
||||
parent.appendChild(style);
|
||||
if (style.sheet) {
|
||||
style.sheet.insertRule(`
|
||||
[data-motion-pop-id="${id}"] {
|
||||
position: absolute !important;
|
||||
width: ${width}px !important;
|
||||
height: ${height}px !important;
|
||||
${x}px !important;
|
||||
${y}px !important;
|
||||
}
|
||||
`);
|
||||
}
|
||||
return () => {
|
||||
ref.current?.removeAttribute("data-motion-pop-id");
|
||||
if (parent.contains(style)) {
|
||||
parent.removeChild(style);
|
||||
}
|
||||
};
|
||||
}, [isPresent]);
|
||||
return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, pop: pop, children: pop === false
|
||||
? children
|
||||
: React.cloneElement(children, { ref: composedRef }) }));
|
||||
}
|
||||
|
||||
export { PopChild };
|
||||
//# sourceMappingURL=PopChild.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-63
@@ -1,63 +0,0 @@
|
||||
"use client";
|
||||
import { jsx } from 'react/jsx-runtime';
|
||||
import * as React from 'react';
|
||||
import { useId, useMemo } from 'react';
|
||||
import { PresenceContext } from '../../context/PresenceContext.mjs';
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
import { PopChild } from './PopChild.mjs';
|
||||
|
||||
const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, anchorY, root }) => {
|
||||
const presenceChildren = useConstant(newChildrenMap);
|
||||
const id = useId();
|
||||
let isReusedContext = true;
|
||||
let context = useMemo(() => {
|
||||
isReusedContext = false;
|
||||
return {
|
||||
id,
|
||||
initial,
|
||||
isPresent,
|
||||
custom,
|
||||
onExitComplete: (childId) => {
|
||||
presenceChildren.set(childId, true);
|
||||
for (const isComplete of presenceChildren.values()) {
|
||||
if (!isComplete)
|
||||
return; // can stop searching when any is incomplete
|
||||
}
|
||||
onExitComplete && onExitComplete();
|
||||
},
|
||||
register: (childId) => {
|
||||
presenceChildren.set(childId, false);
|
||||
return () => presenceChildren.delete(childId);
|
||||
},
|
||||
};
|
||||
}, [isPresent, presenceChildren, onExitComplete]);
|
||||
/**
|
||||
* If the presence of a child affects the layout of the components around it,
|
||||
* we want to make a new context value to ensure they get re-rendered
|
||||
* so they can detect that layout change.
|
||||
*/
|
||||
if (presenceAffectsLayout && isReusedContext) {
|
||||
context = { ...context };
|
||||
}
|
||||
useMemo(() => {
|
||||
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
||||
}, [isPresent]);
|
||||
/**
|
||||
* If there's no `motion` components to fire exit animations, we want to remove this
|
||||
* component immediately.
|
||||
*/
|
||||
React.useEffect(() => {
|
||||
!isPresent &&
|
||||
!presenceChildren.size &&
|
||||
onExitComplete &&
|
||||
onExitComplete();
|
||||
}, [isPresent]);
|
||||
children = (jsx(PopChild, { pop: mode === "popLayout", isPresent: isPresent, anchorX: anchorX, anchorY: anchorY, root: root, children: children }));
|
||||
return (jsx(PresenceContext.Provider, { value: context, children: children }));
|
||||
};
|
||||
function newChildrenMap() {
|
||||
return new Map();
|
||||
}
|
||||
|
||||
export { PresenceChild };
|
||||
//# sourceMappingURL=PresenceChild.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"PresenceChild.mjs","sources":["../../../../src/components/AnimatePresence/PresenceChild.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useId, useMemo } from \"react\"\nimport {\n PresenceContext,\n type PresenceContextProps,\n} from \"../../context/PresenceContext\"\nimport { VariantLabels } from \"../../motion/types\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { PopChild } from \"./PopChild\"\n\ninterface PresenceChildProps {\n children: React.ReactElement\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n mode: \"sync\" | \"popLayout\" | \"wait\"\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n custom,\n presenceAffectsLayout,\n mode,\n anchorX,\n anchorY,\n root\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId()\n\n let isReusedContext = true\n let context = useMemo((): PresenceContextProps => {\n isReusedContext = false\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) return // can stop searching when any is incomplete\n }\n\n onExitComplete && onExitComplete()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n }, [isPresent, presenceChildren, onExitComplete])\n\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n if (presenceAffectsLayout && isReusedContext) {\n context = { ...context }\n }\n\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete()\n }, [isPresent])\n\n children = (\n <PopChild pop={mode === \"popLayout\"} isPresent={isPresent} anchorX={anchorX} anchorY={anchorY} root={root}>\n {children}\n </PopChild>\n )\n\n return (\n <PresenceContext.Provider value={context}>\n {children}\n </PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO;AAYH;AACA;;AAGA;;;;;;;AAOQ;AACI;;AAGI;AAAiB;;;;AAKzB;AACI;;;;;AAMZ;;;;AAIG;AACH;AACI;;;AAIA;AACJ;AAEA;;;AAGG;AACH;AACI;;;AAGI;AACR;AAEA;AAMA;AAKJ;AAEA;;AAEA;;"}
|
||||
Generated
Vendored
-176
@@ -1,176 +0,0 @@
|
||||
"use client";
|
||||
import { jsx, Fragment } from 'react/jsx-runtime';
|
||||
import { useMemo, useRef, useState, useContext } from 'react';
|
||||
import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
|
||||
import { useConstant } from '../../utils/use-constant.mjs';
|
||||
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
|
||||
import { PresenceChild } from './PresenceChild.mjs';
|
||||
import { usePresence } from './use-presence.mjs';
|
||||
import { onlyElements, getChildKey } from './utils.mjs';
|
||||
|
||||
/**
|
||||
* `AnimatePresence` enables the animation of components that have been removed from the tree.
|
||||
*
|
||||
* When adding/removing more than a single child, every child **must** be given a unique `key` prop.
|
||||
*
|
||||
* Any `motion` components that have an `exit` property defined will animate out when removed from
|
||||
* the tree.
|
||||
*
|
||||
* ```jsx
|
||||
* import { motion, AnimatePresence } from 'framer-motion'
|
||||
*
|
||||
* export const Items = ({ items }) => (
|
||||
* <AnimatePresence>
|
||||
* {items.map(item => (
|
||||
* <motion.div
|
||||
* key={item.id}
|
||||
* initial={{ opacity: 0 }}
|
||||
* animate={{ opacity: 1 }}
|
||||
* exit={{ opacity: 0 }}
|
||||
* />
|
||||
* ))}
|
||||
* </AnimatePresence>
|
||||
* )
|
||||
* ```
|
||||
*
|
||||
* You can sequence exit animations throughout a tree using variants.
|
||||
*
|
||||
* If a child contains multiple `motion` components with `exit` props, it will only unmount the child
|
||||
* once all `motion` components have finished animating out. Likewise, any components using
|
||||
* `usePresence` all need to call `safeToRemove`.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", anchorY = "top", root }) => {
|
||||
const [isParentPresent, safeToRemove] = usePresence(propagate);
|
||||
/**
|
||||
* Filter any children that aren't ReactElements. We can only track components
|
||||
* between renders with a props.key.
|
||||
*/
|
||||
const presentChildren = useMemo(() => onlyElements(children), [children]);
|
||||
/**
|
||||
* Track the keys of the currently rendered children. This is used to
|
||||
* determine which children are exiting.
|
||||
*/
|
||||
const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
|
||||
/**
|
||||
* If `initial={false}` we only want to pass this to components in the first render.
|
||||
*/
|
||||
const isInitialRender = useRef(true);
|
||||
/**
|
||||
* A ref containing the currently present children. When all exit animations
|
||||
* are complete, we use this to re-render the component with the latest children
|
||||
* *committed* rather than the latest children *rendered*.
|
||||
*/
|
||||
const pendingPresentChildren = useRef(presentChildren);
|
||||
/**
|
||||
* Track which exiting children have finished animating out.
|
||||
*/
|
||||
const exitComplete = useConstant(() => new Map());
|
||||
/**
|
||||
* Track which components are currently processing exit to prevent duplicate processing.
|
||||
*/
|
||||
const exitingComponents = useRef(new Set());
|
||||
/**
|
||||
* Save children to render as React state. To ensure this component is concurrent-safe,
|
||||
* we check for exiting children via an effect.
|
||||
*/
|
||||
const [diffedChildren, setDiffedChildren] = useState(presentChildren);
|
||||
const [renderedChildren, setRenderedChildren] = useState(presentChildren);
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
isInitialRender.current = false;
|
||||
pendingPresentChildren.current = presentChildren;
|
||||
/**
|
||||
* Update complete status of exiting children.
|
||||
*/
|
||||
for (let i = 0; i < renderedChildren.length; i++) {
|
||||
const key = getChildKey(renderedChildren[i]);
|
||||
if (!presentKeys.includes(key)) {
|
||||
if (exitComplete.get(key) !== true) {
|
||||
exitComplete.set(key, false);
|
||||
}
|
||||
}
|
||||
else {
|
||||
exitComplete.delete(key);
|
||||
exitingComponents.current.delete(key);
|
||||
}
|
||||
}
|
||||
}, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
|
||||
const exitingChildren = [];
|
||||
if (presentChildren !== diffedChildren) {
|
||||
let nextChildren = [...presentChildren];
|
||||
/**
|
||||
* Loop through all the currently rendered components and decide which
|
||||
* are exiting.
|
||||
*/
|
||||
for (let i = 0; i < renderedChildren.length; i++) {
|
||||
const child = renderedChildren[i];
|
||||
const key = getChildKey(child);
|
||||
if (!presentKeys.includes(key)) {
|
||||
nextChildren.splice(i, 0, child);
|
||||
exitingChildren.push(child);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* If we're in "wait" mode, and we have exiting children, we want to
|
||||
* only render these until they've all exited.
|
||||
*/
|
||||
if (mode === "wait" && exitingChildren.length) {
|
||||
nextChildren = exitingChildren;
|
||||
}
|
||||
setRenderedChildren(onlyElements(nextChildren));
|
||||
setDiffedChildren(presentChildren);
|
||||
/**
|
||||
* Early return to ensure once we've set state with the latest diffed
|
||||
* children, we can immediately re-render.
|
||||
*/
|
||||
return null;
|
||||
}
|
||||
if (process.env.NODE_ENV !== "production" &&
|
||||
mode === "wait" &&
|
||||
renderedChildren.length > 1) {
|
||||
console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
|
||||
}
|
||||
/**
|
||||
* If we've been provided a forceRender function by the LayoutGroupContext,
|
||||
* we can use it to force a re-render amongst all surrounding components once
|
||||
* all components have finished animating out.
|
||||
*/
|
||||
const { forceRender } = useContext(LayoutGroupContext);
|
||||
return (jsx(Fragment, { children: renderedChildren.map((child) => {
|
||||
const key = getChildKey(child);
|
||||
const isPresent = propagate && !isParentPresent
|
||||
? false
|
||||
: presentChildren === renderedChildren ||
|
||||
presentKeys.includes(key);
|
||||
const onExit = () => {
|
||||
if (exitingComponents.current.has(key)) {
|
||||
return;
|
||||
}
|
||||
if (exitComplete.has(key)) {
|
||||
exitingComponents.current.add(key);
|
||||
exitComplete.set(key, true);
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
let isEveryExitComplete = true;
|
||||
exitComplete.forEach((isExitComplete) => {
|
||||
if (!isExitComplete)
|
||||
isEveryExitComplete = false;
|
||||
});
|
||||
if (isEveryExitComplete) {
|
||||
forceRender?.();
|
||||
setRenderedChildren(pendingPresentChildren.current);
|
||||
propagate && safeToRemove?.();
|
||||
onExitComplete && onExitComplete();
|
||||
}
|
||||
};
|
||||
return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
|
||||
? undefined
|
||||
: false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, anchorY: anchorY, children: child }, key));
|
||||
}) }));
|
||||
};
|
||||
|
||||
export { AnimatePresence };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
-1
File diff suppressed because one or more lines are too long
Generated
Vendored
-11
@@ -1,11 +0,0 @@
|
||||
"use client";
|
||||
import { useContext } from 'react';
|
||||
import { PresenceContext } from '../../context/PresenceContext.mjs';
|
||||
|
||||
function usePresenceData() {
|
||||
const context = useContext(PresenceContext);
|
||||
return context ? context.custom : undefined;
|
||||
}
|
||||
|
||||
export { usePresenceData };
|
||||
//# sourceMappingURL=use-presence-data.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-presence-data.mjs","sources":["../../../../src/components/AnimatePresence/use-presence-data.ts"],"sourcesContent":["\"use client\"\n\nimport { useContext } from \"react\"\nimport { PresenceContext } from \"../../context/PresenceContext\"\n\nexport function usePresenceData() {\n const context = useContext(PresenceContext)\n return context ? context.custom : undefined\n}\n"],"names":[],"mappings":";;;;;AAMI;;AAEJ;;"}
|
||||
Generated
Vendored
-72
@@ -1,72 +0,0 @@
|
||||
"use client";
|
||||
import { useContext, useId, useEffect, useCallback } from 'react';
|
||||
import { PresenceContext } from '../../context/PresenceContext.mjs';
|
||||
|
||||
/**
|
||||
* When a component is the child of `AnimatePresence`, it can use `usePresence`
|
||||
* to access information about whether it's still present in the React tree.
|
||||
*
|
||||
* ```jsx
|
||||
* import { usePresence } from "framer-motion"
|
||||
*
|
||||
* export const Component = () => {
|
||||
* const [isPresent, safeToRemove] = usePresence()
|
||||
*
|
||||
* useEffect(() => {
|
||||
* !isPresent && setTimeout(safeToRemove, 1000)
|
||||
* }, [isPresent])
|
||||
*
|
||||
* return <div />
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If `isPresent` is `false`, it means that a component has been removed from the tree,
|
||||
* but `AnimatePresence` won't really remove it until `safeToRemove` has been called.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function usePresence(subscribe = true) {
|
||||
const context = useContext(PresenceContext);
|
||||
if (context === null)
|
||||
return [true, null];
|
||||
const { isPresent, onExitComplete, register } = context;
|
||||
// It's safe to call the following hooks conditionally (after an early return) because the context will always
|
||||
// either be null or non-null for the lifespan of the component.
|
||||
const id = useId();
|
||||
useEffect(() => {
|
||||
if (subscribe) {
|
||||
return register(id);
|
||||
}
|
||||
}, [subscribe]);
|
||||
const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
|
||||
return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
|
||||
}
|
||||
/**
|
||||
* Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
|
||||
* There is no `safeToRemove` function.
|
||||
*
|
||||
* ```jsx
|
||||
* import { useIsPresent } from "framer-motion"
|
||||
*
|
||||
* export const Component = () => {
|
||||
* const isPresent = useIsPresent()
|
||||
*
|
||||
* useEffect(() => {
|
||||
* !isPresent && console.log("I've been removed!")
|
||||
* }, [isPresent])
|
||||
*
|
||||
* return <div />
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function useIsPresent() {
|
||||
return isPresent(useContext(PresenceContext));
|
||||
}
|
||||
function isPresent(context) {
|
||||
return context === null ? true : context.isPresent;
|
||||
}
|
||||
|
||||
export { isPresent, useIsPresent, usePresence };
|
||||
//# sourceMappingURL=use-presence.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"use-presence.mjs","sources":["../../../../src/components/AnimatePresence/use-presence.ts"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useContext, useEffect, useId } from \"react\"\nimport {\n PresenceContext,\n PresenceContextProps,\n} from \"../../context/PresenceContext\"\n\nexport type SafeToRemove = () => void\n\ntype AlwaysPresent = [true, null]\n\ntype Present = [true]\n\ntype NotPresent = [false, SafeToRemove]\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n * !isPresent && setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n *\n * return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed from the tree,\n * but `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nexport function usePresence(\n subscribe: boolean = true\n): AlwaysPresent | Present | NotPresent {\n const context = useContext(PresenceContext)\n\n if (context === null) return [true, null]\n\n const { isPresent, onExitComplete, register } = context\n\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n\n const id = useId()\n useEffect(() => {\n if (subscribe) {\n return register(id)\n }\n }, [subscribe])\n\n const safeToRemove = useCallback(\n () => subscribe && onExitComplete && onExitComplete(id),\n [id, onExitComplete, subscribe]\n )\n\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true]\n}\n\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return <div />\n * }\n * ```\n *\n * @public\n */\nexport function useIsPresent() {\n return isPresent(useContext(PresenceContext))\n}\n\nexport function isPresent(context: PresenceContextProps | null) {\n return context === null ? true : context.isPresent\n}\n"],"names":[],"mappings":";;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACG;AAGF;;AAEsB;;;;AAOtB;;;AAGQ;;AAER;;AAOA;AACJ;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;;AAEC;AACJ;AAEM;AACF;AACJ;;"}
|
||||
Generated
Vendored
-15
@@ -1,15 +0,0 @@
|
||||
import { Children, isValidElement } from 'react';
|
||||
|
||||
const getChildKey = (child) => child.key || "";
|
||||
function onlyElements(children) {
|
||||
const filtered = [];
|
||||
// We use forEach here instead of map as map mutates the component key by preprending `.$`
|
||||
Children.forEach(children, (child) => {
|
||||
if (isValidElement(child))
|
||||
filtered.push(child);
|
||||
});
|
||||
return filtered;
|
||||
}
|
||||
|
||||
export { getChildKey, onlyElements };
|
||||
//# sourceMappingURL=utils.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"utils.mjs","sources":["../../../../src/components/AnimatePresence/utils.ts"],"sourcesContent":["import { isValidElement, Children, ReactElement, ReactNode } from \"react\"\n\nexport type ComponentKey = string | number\n\nexport const getChildKey = (child: ReactElement<any>): ComponentKey =>\n child.key || \"\"\n\nexport function onlyElements(children: ReactNode): ReactElement<any>[] {\n const filtered: ReactElement<any>[] = []\n\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child) => {\n if (isValidElement(child)) filtered.push(child)\n })\n\n return filtered\n}\n"],"names":[],"mappings":";;AAIO,MAAM,WAAW,GAAG,CAAC,KAAwB,KAChD,KAAK,CAAC,GAAG,IAAI;AAEX,SAAU,YAAY,CAAC,QAAmB,EAAA;IAC5C,MAAM,QAAQ,GAAwB,EAAE;;IAGxC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;QACjC,IAAI,cAAc,CAAC,KAAK,CAAC;AAAE,YAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACnD,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,QAAQ;AACnB;;;;"}
|
||||
Generated
Vendored
-17
@@ -1,17 +0,0 @@
|
||||
"use client";
|
||||
import { jsx } from 'react/jsx-runtime';
|
||||
import { invariant } from 'motion-utils';
|
||||
import * as React from 'react';
|
||||
import { useConstant } from '../utils/use-constant.mjs';
|
||||
import { LayoutGroup } from './LayoutGroup/index.mjs';
|
||||
|
||||
let id = 0;
|
||||
const AnimateSharedLayout = ({ children }) => {
|
||||
React.useEffect(() => {
|
||||
invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
|
||||
}, []);
|
||||
return (jsx(LayoutGroup, { id: useConstant(() => `asl-${id++}`), children: children }));
|
||||
};
|
||||
|
||||
export { AnimateSharedLayout };
|
||||
//# sourceMappingURL=AnimateSharedLayout.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"AnimateSharedLayout.mjs","sources":["../../../src/components/AnimateSharedLayout.tsx"],"sourcesContent":["\"use client\"\n\nimport { invariant } from \"motion-utils\"\nimport * as React from \"react\"\nimport { useConstant } from \"../utils/use-constant\"\nimport { LayoutGroup } from \"./LayoutGroup\"\n\nlet id = 0\nexport const AnimateSharedLayout: React.FunctionComponent<\n React.PropsWithChildren<unknown>\n> = ({ children }: React.PropsWithChildren<{}>) => {\n React.useEffect(() => {\n invariant(\n false,\n \"AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations\"\n )\n }, [])\n\n return (\n <LayoutGroup id={useConstant(() => `asl-${id++}`)}>\n {children}\n </LayoutGroup>\n )\n}\n"],"names":[],"mappings":";;;;;;;AAOA;;AAII;AACI;;;AAWR;;"}
|
||||
Generated
Vendored
-33
@@ -1,33 +0,0 @@
|
||||
"use client";
|
||||
import { jsx } from 'react/jsx-runtime';
|
||||
import { useContext, useRef, useMemo } from 'react';
|
||||
import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
|
||||
import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
|
||||
import { useForceUpdate } from '../../utils/use-force-update.mjs';
|
||||
import { nodeGroup } from 'motion-dom';
|
||||
|
||||
const shouldInheritGroup = (inherit) => inherit === true;
|
||||
const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
|
||||
const LayoutGroup = ({ children, id, inherit = true }) => {
|
||||
const layoutGroupContext = useContext(LayoutGroupContext);
|
||||
const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
|
||||
const [forceRender, key] = useForceUpdate();
|
||||
const context = useRef(null);
|
||||
const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
|
||||
if (context.current === null) {
|
||||
if (shouldInheritId(inherit) && upstreamId) {
|
||||
id = id ? upstreamId + "-" + id : upstreamId;
|
||||
}
|
||||
context.current = {
|
||||
id,
|
||||
group: shouldInheritGroup(inherit)
|
||||
? layoutGroupContext.group || nodeGroup()
|
||||
: nodeGroup(),
|
||||
};
|
||||
}
|
||||
const memoizedContext = useMemo(() => ({ ...context.current, forceRender }), [key]);
|
||||
return (jsx(LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
|
||||
};
|
||||
|
||||
export { LayoutGroup };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"index.mjs","sources":["../../../../src/components/LayoutGroup/index.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { MutableRefObject, useContext, useMemo, useRef } from \"react\"\nimport {\n LayoutGroupContext,\n LayoutGroupContextProps,\n} from \"../../context/LayoutGroupContext\"\nimport { DeprecatedLayoutGroupContext } from \"../../context/DeprecatedLayoutGroupContext\"\nimport { nodeGroup } from \"../../projection\"\nimport { useForceUpdate } from \"../../utils/use-force-update\"\n\ntype InheritOption = boolean | \"id\"\n\nexport interface Props {\n id?: string\n inherit?: InheritOption\n}\n\nconst shouldInheritGroup = (inherit: InheritOption) => inherit === true\nconst shouldInheritId = (inherit: InheritOption) =>\n shouldInheritGroup(inherit === true) || inherit === \"id\"\n\nexport const LayoutGroup: React.FunctionComponent<\n React.PropsWithChildren<Props>\n> = ({ children, id, inherit = true }) => {\n const layoutGroupContext = useContext(LayoutGroupContext)\n const deprecatedLayoutGroupContext = useContext(\n DeprecatedLayoutGroupContext\n )\n const [forceRender, key] = useForceUpdate()\n const context = useRef(\n null\n ) as MutableRefObject<LayoutGroupContextProps | null>\n\n const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext\n if (context.current === null) {\n if (shouldInheritId(inherit) && upstreamId) {\n id = id ? upstreamId + \"-\" + id : upstreamId\n }\n\n context.current = {\n id,\n group: shouldInheritGroup(inherit)\n ? layoutGroupContext.group || nodeGroup()\n : nodeGroup(),\n }\n }\n\n const memoizedContext = useMemo(\n () => ({ ...context.current, forceRender }),\n [key]\n )\n\n return (\n <LayoutGroupContext.Provider value={memoizedContext}>\n {children}\n </LayoutGroupContext.Provider>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAmBA;AACA;AAGO;AAGH;AACA;;AAIA;AAIA;AACA;AACI;AACI;;;;AAKA;AACI;;;;;AAUZ;AAKJ;;"}
|
||||
Generated
Vendored
-69
@@ -1,69 +0,0 @@
|
||||
"use client";
|
||||
import { jsx } from 'react/jsx-runtime';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { LazyContext } from '../../context/LazyContext.mjs';
|
||||
import { loadFeatures } from '../../motion/features/load-features.mjs';
|
||||
|
||||
/**
|
||||
* Used in conjunction with the `m` component to reduce bundle size.
|
||||
*
|
||||
* `m` is a version of the `motion` component that only loads functionality
|
||||
* critical for the initial render.
|
||||
*
|
||||
* `LazyMotion` can then be used to either synchronously or asynchronously
|
||||
* load animation and gesture support.
|
||||
*
|
||||
* ```jsx
|
||||
* // Synchronous loading
|
||||
* import { LazyMotion, m, domAnimation } from "framer-motion"
|
||||
*
|
||||
* function App() {
|
||||
* return (
|
||||
* <LazyMotion features={domAnimation}>
|
||||
* <m.div animate={{ scale: 2 }} />
|
||||
* </LazyMotion>
|
||||
* )
|
||||
* }
|
||||
*
|
||||
* // Asynchronous loading
|
||||
* import { LazyMotion, m } from "framer-motion"
|
||||
*
|
||||
* function App() {
|
||||
* return (
|
||||
* <LazyMotion features={() => import('./path/to/domAnimation')}>
|
||||
* <m.div animate={{ scale: 2 }} />
|
||||
* </LazyMotion>
|
||||
* )
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function LazyMotion({ children, features, strict = false }) {
|
||||
const [, setIsLoaded] = useState(!isLazyBundle(features));
|
||||
const loadedRenderer = useRef(undefined);
|
||||
/**
|
||||
* If this is a synchronous load, load features immediately
|
||||
*/
|
||||
if (!isLazyBundle(features)) {
|
||||
const { renderer, ...loadedFeatures } = features;
|
||||
loadedRenderer.current = renderer;
|
||||
loadFeatures(loadedFeatures);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (isLazyBundle(features)) {
|
||||
features().then(({ renderer, ...loadedFeatures }) => {
|
||||
loadFeatures(loadedFeatures);
|
||||
loadedRenderer.current = renderer;
|
||||
setIsLoaded(true);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
return (jsx(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
|
||||
}
|
||||
function isLazyBundle(features) {
|
||||
return typeof features === "function";
|
||||
}
|
||||
|
||||
export { LazyMotion };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
-1
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"index.mjs","sources":["../../../../src/components/LazyMotion/index.tsx"],"sourcesContent":["\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { LazyContext } from \"../../context/LazyContext\"\nimport { loadFeatures } from \"../../motion/features/load-features\"\nimport { FeatureBundle, LazyFeatureBundle } from \"../../motion/features/types\"\nimport { CreateVisualElement } from \"../../render/types\"\nimport { LazyProps } from \"./types\"\n\n/**\n * Used in conjunction with the `m` component to reduce bundle size.\n *\n * `m` is a version of the `motion` component that only loads functionality\n * critical for the initial render.\n *\n * `LazyMotion` can then be used to either synchronously or asynchronously\n * load animation and gesture support.\n *\n * ```jsx\n * // Synchronous loading\n * import { LazyMotion, m, domAnimation } from \"framer-motion\"\n *\n * function App() {\n * return (\n * <LazyMotion features={domAnimation}>\n * <m.div animate={{ scale: 2 }} />\n * </LazyMotion>\n * )\n * }\n *\n * // Asynchronous loading\n * import { LazyMotion, m } from \"framer-motion\"\n *\n * function App() {\n * return (\n * <LazyMotion features={() => import('./path/to/domAnimation')}>\n * <m.div animate={{ scale: 2 }} />\n * </LazyMotion>\n * )\n * }\n * ```\n *\n * @public\n */\nexport function LazyMotion({ children, features, strict = false }: LazyProps) {\n const [, setIsLoaded] = useState(!isLazyBundle(features))\n const loadedRenderer = useRef<undefined | CreateVisualElement>(undefined)\n\n /**\n * If this is a synchronous load, load features immediately\n */\n if (!isLazyBundle(features)) {\n const { renderer, ...loadedFeatures } = features\n loadedRenderer.current = renderer\n loadFeatures(loadedFeatures)\n }\n\n useEffect(() => {\n if (isLazyBundle(features)) {\n features().then(({ renderer, ...loadedFeatures }) => {\n loadFeatures(loadedFeatures)\n loadedRenderer.current = renderer\n setIsLoaded(true)\n })\n }\n }, [])\n\n return (\n <LazyContext.Provider\n value={{ renderer: loadedRenderer.current, strict }}\n >\n {children}\n </LazyContext.Provider>\n )\n}\n\nfunction isLazyBundle(\n features: FeatureBundle | LazyFeatureBundle\n): features is LazyFeatureBundle {\n return typeof features === \"function\"\n}\n"],"names":[],"mappings":";;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACG;AACF;AACA;AAEA;;AAEG;AACH;;AAEI;;;;AAKA;AACI;;AAEI;;AAEJ;;;;AAWZ;AAEA;AAGI;AACJ;;"}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user