diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 18e32e5b9d..0000000000
--- a/.babelrc
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "presets": [
- [
- "@babel/preset-env",
- {
- "loose": true,
- "modules": false,
- "targets": ">1%, not dead, not ie 11, not op_mini all"
- }
- ],
- "@babel/preset-react",
- "@babel/preset-typescript"
- ],
- "plugins": [
- ["@babel/proposal-class-properties", { "loose": true }],
- ["@babel/plugin-proposal-object-rest-spread", { "loose": true }],
- ["transform-react-remove-prop-types", { "removeImport": true }]
- ],
- "env": {
- "test": {
- "plugins": ["@babel/transform-modules-commonjs"]
- }
- }
-}
diff --git a/.gitignore b/.gitignore
index 68d5b34e39..421d8e6afc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,16 @@
+dist/
+.bic_cache
+.rpt2_cache/
node_modules/
coverage/
-dist/
Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/
.DS_Store
-.vscode
-.docz/
package-lock.json
-coverage/
+report.*.json
.idea
+*.log
+/docs/
+/examples/
diff --git a/.meta b/.meta
new file mode 100644
index 0000000000..c64d50981c
--- /dev/null
+++ b/.meta
@@ -0,0 +1,6 @@
+{
+ "projects": {
+ "docs": "https://github.com/react-spring/react-spring.io.git",
+ "examples": "https://github.com/react-spring/react-spring-examples.git"
+ }
+}
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000000..397b4a7624
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1 @@
+*.log
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..431bd54b58
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+ "arrowParens": "avoid",
+ "jsxBracketSameLine": true,
+ "printWidth": 80,
+ "semi": false,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}
diff --git a/.size-snapshot.json b/.size-snapshot.json
deleted file mode 100644
index d3f0c1aa86..0000000000
--- a/.size-snapshot.json
+++ /dev/null
@@ -1,242 +0,0 @@
-{
- "dist/addons.js": {
- "bundled": 9443,
- "minified": 5181,
- "gzipped": 1800,
- "treeshaked": {
- "rollup": {
- "code": 4695,
- "import_statements": 279
- },
- "webpack": {
- "code": 5869
- }
- }
- },
- "dist/addons.umd.js": {
- "bundled": 11277,
- "minified": 5334,
- "gzipped": 1999
- },
- "dist/web.js": {
- "bundled": 63030,
- "minified": 30004,
- "gzipped": 10925,
- "treeshaked": {
- "rollup": {
- "code": 11455,
- "import_statements": 242
- },
- "webpack": {
- "code": 12615
- }
- }
- },
- "dist/web.umd.js": {
- "bundled": 82763,
- "minified": 32482,
- "gzipped": 11641
- },
- "dist/native.js": {
- "bundled": 60162,
- "minified": 28083,
- "gzipped": 9943,
- "treeshaked": {
- "rollup": {
- "code": 8256,
- "import_statements": 180
- },
- "webpack": {
- "code": 10763
- }
- }
- },
- "dist/universal.js": {
- "bundled": 47599,
- "minified": 21373,
- "gzipped": 7136,
- "treeshaked": {
- "rollup": {
- "code": 1235,
- "import_statements": 128
- },
- "webpack": {
- "code": 4615
- }
- }
- },
- "dist/konva.js": {
- "bundled": 58652,
- "minified": 27228,
- "gzipped": 9850,
- "treeshaked": {
- "rollup": {
- "code": 8974,
- "import_statements": 242
- },
- "webpack": {
- "code": 10128
- }
- }
- },
- "dist/hooks.js": {
- "bundled": 71628,
- "minified": 33389,
- "gzipped": 11200,
- "treeshaked": {
- "rollup": {
- "code": 12806,
- "import_statements": 362
- },
- "webpack": {
- "code": 14060
- }
- }
- },
- "dist/hooks.umd.js": {
- "bundled": 89934,
- "minified": 35216,
- "gzipped": 12303
- },
- "dist/native-hooks.js": {
- "bundled": 73025,
- "minified": 34369,
- "gzipped": 10627,
- "treeshaked": {
- "rollup": {
- "code": 10032,
- "import_statements": 345
- },
- "webpack": {
- "code": 25161
- }
- }
- },
- "dist/web-hooks.js": {
- "bundled": 71543,
- "minified": 33114,
- "gzipped": 11122,
- "treeshaked": {
- "rollup": {
- "code": 12742,
- "import_statements": 362
- },
- "webpack": {
- "code": 13996
- }
- }
- },
- "dist/renderprops.js": {
- "bundled": 66797,
- "minified": 32950,
- "gzipped": 11394
- },
- "dist/renderprops-addons.js": {
- "bundled": 8318,
- "minified": 5069,
- "gzipped": 1763
- },
- "dist/renderprops-addons.umd.js": {
- "bundled": 11301,
- "minified": 5358,
- "gzipped": 2008
- },
- "dist/renderprops-native.js": {
- "bundled": 61366,
- "minified": 29741,
- "gzipped": 9942
- },
- "dist/renderprops-universal.js": {
- "bundled": 49095,
- "minified": 23185,
- "gzipped": 7226
- },
- "dist/renderprops-konva.js": {
- "bundled": 60176,
- "minified": 29110,
- "gzipped": 9928
- },
- "dist/web.cjs.js": {
- "bundled": 71300,
- "minified": 33678,
- "gzipped": 11478
- },
- "dist/native.cjs.js": {
- "bundled": 68913,
- "minified": 31943,
- "gzipped": 10481
- },
- "dist/renderprops.cjs.js": {
- "bundled": 77392,
- "minified": 36683,
- "gzipped": 11921
- },
- "dist/renderprops-addons.cjs.js": {
- "bundled": 9833,
- "minified": 5495,
- "gzipped": 1892
- },
- "dist/renderprops-native.cjs.js": {
- "bundled": 72258,
- "minified": 33567,
- "gzipped": 10465
- },
- "dist/renderprops-universal.cjs.js": {
- "bundled": 59269,
- "minified": 26754,
- "gzipped": 7738
- },
- "dist/renderprops-konva.cjs.js": {
- "bundled": 70422,
- "minified": 32717,
- "gzipped": 10442
- },
- "dist/universal.cjs.js": {
- "bundled": 55540,
- "minified": 24914,
- "gzipped": 7679
- },
- "dist/test.js": {
- "bundled": 32365,
- "minified": 14259,
- "gzipped": 4783,
- "treeshaked": {
- "rollup": {
- "code": 523,
- "import_statements": 128
- },
- "webpack": {
- "code": 2095
- }
- }
- },
- "dist/test.cjs.js": {
- "bundled": 40723,
- "minified": 17987,
- "gzipped": 5405
- },
- "dist/konva.cjs.js": {
- "bundled": 66634,
- "minified": 30800,
- "gzipped": 10382
- },
- "dist/three.js": {
- "bundled": 59009,
- "minified": 27202,
- "gzipped": 9778,
- "treeshaked": {
- "rollup": {
- "code": 10383,
- "import_statements": 344
- },
- "webpack": {
- "code": 11593
- }
- }
- },
- "dist/three.cjs.js": {
- "bundled": 67071,
- "minified": 30837,
- "gzipped": 10309
- }
-}
diff --git a/.travis.yml b/.travis.yml
index 98d32a7e7e..d5ed9bc783 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,6 @@
language: node_js
node_js:
- - stable
\ No newline at end of file
+ - stable
+script:
+ - yarn test:ts
+ - yarn test
diff --git a/.vscode/react-spring.code-workspace b/.vscode/react-spring.code-workspace
new file mode 100644
index 0000000000..713ac00e18
--- /dev/null
+++ b/.vscode/react-spring.code-workspace
@@ -0,0 +1,28 @@
+{
+ "folders": [
+ {
+ "name": "targets",
+ "path": "../targets"
+ },
+ {
+ "name": "packages",
+ "path": "../packages"
+ },
+ {
+ "name": "examples",
+ "path": "../examples"
+ },
+ {
+ "name": "docs",
+ "path": "../docs"
+ }
+ ],
+ "settings": {
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "files.exclude": {
+ "**/.bic_cache": true,
+ "**/.rpt2_cache": true,
+ "**/node_modules": true
+ }
+ }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..499e33450a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "files.exclude": {
+ "**/.bic_cache": true,
+ "**/.rpt2_cache": true,
+ "**/node_modules": true
+ }
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000..3f4ad162c3
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,69 @@
+# How to Contribute
+
+1. Clone this repository:
+
+```sh
+git clone https://github.com/react-spring/react-spring -b v9
+cd react-spring
+```
+
+2. Install `yarn` (https://yarnpkg.com/en/docs/install)
+
+3. Bootstrap the packages:
+
+```sh
+yarn
+
+# Clone the docs and examples (optional)
+yarn meta git update
+```
+
+4. Link the packages:
+
+```sh
+# Use the .js bundles
+yarn lerna exec 'cd dist && yarn link || exit 0'
+
+# Or use the uncompiled .ts packages
+yarn lerna exec 'yarn link'
+```
+
+5. Link `react-spring` to your project:
+
+```sh
+cd ~/my-project
+yarn link react-spring
+```
+
+6. Let's get cooking! 👨🏻🍳🥓
+
+## Guidelines
+
+Be sure your commit messages follow this specification: https://www.conventionalcommits.org/en/v1.0.0-beta.4/
+
+### Duplicate `react` errors
+
+React 16.8+ has global state to support its "hooks" feature, so you need to ensure only one copy of `react` exists in your program. Otherwise, you'll most likely see [this error](https://reactjs.org/warnings/invalid-hook-call-warning.html). Please try the following solutions, and let us know if it still doesn't work for you.
+
+- **For `create-react-app` users:** Follow this guide: https://github.com/facebook/react/issues/13991#issuecomment-496383268
+
+- **For `webpack` users:** Add an alias to `webpack.config.js` like this:
+ ```js
+ alias: {
+ react: path.resolve('node_modules/react'),
+ }
+ ```
+
+# Publishing
+
+To publish a new version:
+
+```
+yarn release
+```
+
+To publish a **canary** version:
+
+```
+yarn release --canary
+```
diff --git a/LICENSE b/LICENSE
index cf07ab9d07..d0ab013be3 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2018 Paul Henschel
+Copyright (c) 2018-present Paul Henschel, Alec Larson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/readme.md b/README.md
similarity index 80%
rename from readme.md
rename to README.md
index f2c8db0381..e6234982b2 100644
--- a/readme.md
+++ b/README.md
@@ -10,13 +10,14 @@
This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's [animated](https://github.com/animatedjs/animated) and Cheng Lou's [react-motion](https://github.com/chenglou/react-motion). It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.
-[![Build Status](https://travis-ci.org/drcmda/react-spring.svg?branch=master)](https://travis-ci.org/drcmda/react-spring) [![npm version](https://badge.fury.io/js/react-spring.svg)](https://badge.fury.io/js/react-spring) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-spring) [![Backers on Open Collective](https://opencollective.com/react-spring/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-spring/sponsors/badge.svg)](#sponsors)
+[![Build Status](https://travis-ci.org/react-spring/react-spring.svg?branch=master)](https://travis-ci.org/react-spring/react-spring) [![npm version](https://badge.fury.io/js/react-spring.svg)](https://badge.fury.io/js/react-spring) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-spring) [![Backers on Open Collective](https://opencollective.com/react-spring/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-spring/sponsors/badge.svg)](#sponsors)
### Installation
npm install react-spring
### Documentation and Examples
+
More info about the project can be found [here](https://www.react-spring.io).
Examples and tutorials can be found [here](https://www.react-spring.io/docs/hooks/basics).
@@ -25,15 +26,15 @@ Examples and tutorials can be found [here](https://www.react-spring.io/docs/hook
## Why springs and not durations
-The principle you will be working with is called a `spring`, it *does not have a defined curve or a set duration*. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.
+The principle you will be working with is called a `spring`, it _does not have a defined curve or a set duration_. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.
-We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) [expressed it once](https://twitter.com/andy_matuschak/status/566736015188963328): *Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity*.
+We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) [expressed it once](https://twitter.com/andy_matuschak/status/566736015188963328): _Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity_.
-Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch [this video](https://www.youtube.com/embed/1tavDv5hXpo?controls=1&start=370).
+Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch [this video](https://www.youtube.com/embed/1tavDv5hXpo?controls=1&start=370).
### What others say
@@ -49,7 +50,7 @@ Springs change that, animation becomes easy and approachable, everything you do
-And [many others](https://github.com/drcmda/react-spring/network/dependents) ...
+And [many others](https://github.com/react-spring/react-spring/network/dependents) ...
## Funding
@@ -88,6 +89,6 @@ Thank you to all our backers! 🙏
This project exists thanks to all the people who contribute.
-
+
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000..ac3cd50035
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ presets: [
+ '@babel/typescript',
+ '@babel/react',
+ [
+ '@babel/env',
+ {
+ exclude: [
+ 'transform-async-to-generator',
+ 'transform-classes',
+ 'transform-regenerator',
+ ],
+ },
+ ],
+ ],
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..dffe8c4186
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,67 @@
+const fs = require('fs-extra')
+const path = require('path')
+const { recrawl } = require('recrawl-sync')
+const { pathsToModuleNameMapper } = require('ts-jest/utils')
+
+const testMatch = ['**/*.test.*']
+const ignoredPaths = ['.*', 'node_modules']
+const findTests = recrawl({
+ only: testMatch,
+ skip: ignoredPaths,
+})
+
+const PJ = 'package.json'
+const { packages } = fs.readJsonSync(PJ).workspaces
+const findProjects = recrawl({
+ only: packages.map(glob => path.join(glob, PJ)),
+ skip: ignoredPaths,
+})
+
+module.exports = {
+ projects: getProjects(),
+ watchPlugins: [
+ 'jest-watch-typeahead/filename',
+ 'jest-watch-typeahead/testname',
+ ],
+}
+
+function getProjects() {
+ return findProjects('.')
+ .map(jsonPath => path.resolve(jsonPath, '..'))
+ .filter(dir => findTests(dir).length > 0)
+ .map(createConfig)
+}
+
+function createConfig(rootDir) {
+ const { compilerOptions } = fs.readJsonSync(
+ path.join(rootDir, 'tsconfig.json')
+ )
+ return {
+ rootDir,
+ setupFilesAfterEnv:
+ rootDir.indexOf('shared') < 0
+ ? [path.join(__dirname, 'packages/core/test/setup.ts')]
+ : [],
+ testMatch,
+ testEnvironment: 'jsdom',
+ testPathIgnorePatterns: ['.+/(types|__snapshots__)/.+'],
+ modulePathIgnorePatterns: ['dist'],
+ moduleNameMapper: {
+ ...getModuleNameMapper(compilerOptions.paths),
+ '^react$': '/../../node_modules/react',
+ },
+ collectCoverageFrom: ['src/**/*'],
+ coverageDirectory: './coverage',
+ coverageReporters: ['json', 'html', 'text'],
+ timers: 'fake',
+ }
+}
+
+function getModuleNameMapper(paths) {
+ if (!paths) return
+ const map = pathsToModuleNameMapper(paths)
+ for (const key in map) {
+ map[key] = map[key].replace('./', '/')
+ }
+ return map
+}
diff --git a/lerna.json b/lerna.json
new file mode 100644
index 0000000000..0d80608e84
--- /dev/null
+++ b/lerna.json
@@ -0,0 +1,24 @@
+{
+ "version": "9.0.0-rc.3",
+ "npmClient": "yarn",
+ "useWorkspaces": true,
+ "registry": "https://registry.npmjs.org",
+ "ignoreChanges": [
+ "**/__tests__/**",
+ "**/__snapshots__/**",
+ "**/*.test.*",
+ "**/*.md"
+ ],
+ "command": {
+ "version": {
+ "changelog": false,
+ "conventionalCommits": true,
+ "message": "%v",
+ "push": false
+ },
+ "publish": {
+ "contents": "dist",
+ "ignoreScripts": true
+ }
+ }
+}
diff --git a/package.json b/package.json
index ef6ed6a754..094e38bc64 100644
--- a/package.json
+++ b/package.json
@@ -1,134 +1,101 @@
{
- "name": "react-spring",
- "version": "8.0.20",
- "description": "A set of spring-physics based animation primitives",
- "main": "web.cjs.js",
- "module": "web.js",
- "react-native": "native.js",
+ "name": "@react-spring/lerna",
"private": true,
+ "description": "Cross-platform animation engine for React",
+ "keywords": [
+ "animated",
+ "animation",
+ "hooks",
+ "motion",
+ "react",
+ "react-native",
+ "spring",
+ "typescript",
+ "velocity"
+ ],
+ "homepage": "https://github.com/react-spring/react-spring#readme",
+ "bugs": {
+ "url": "https://github.com/react-spring/react-spring/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/react-spring/react-spring.git"
+ },
+ "license": "MIT",
+ "author": "Paul Henschel",
+ "contributors": [
+ "Alec Larson (https://github.com/aleclarson)"
+ ],
"sideEffects": false,
+ "workspaces": {
+ "packages": [
+ "packages/*",
+ "targets/*"
+ ],
+ "nohoist": [
+ "**"
+ ]
+ },
"scripts": {
- "prebuild": "rimraf dist",
- "docz": "docz dev",
- "docz:build": "docz build && cp .docz/dist/index.html .docz/dist/200.html && cp examples/CNAME .docz/dist/CNAME",
- "build": "npm-run-all --parallel copy rollup",
- "copy": "copyfiles -f package.json readme.md LICENSE.md \"types/*\" dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined;\"",
- "rollup": "rollup -c",
- "prepare": "npm run build",
+ "build": "bic",
+ "clean": "lerna exec --parallel --no-bail -- rimraf node_modules dist .rpt2_cache .bic_cache",
+ "prepare": "node ./scripts/prepare.js && bic && yarn test:ts",
+ "release": "node ./scripts/release.js",
"test": "jest",
- "test:dev": "jest --watch --no-coverage",
- "test:coverage:watch": "jest --watch",
- "test:ts": "tsc --noEmit",
- "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mEnjoy react-spring? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/react-spring/donate\\u001b[0m')\""
+ "test:cov": "jest --coverage",
+ "test:ts": "cd packages/react-spring && tsc -p . --noEmit"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
- "prettier": {
- "semi": false,
- "trailingComma": "es5",
- "singleQuote": true,
- "jsxBracketSameLine": true,
- "tabWidth": 2,
- "printWidth": 80
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/drcmda/react-spring.git"
- },
- "keywords": [
- "react",
- "motion",
- "animated",
- "animation",
- "spring"
- ],
- "author": "Paul Henschel",
- "contributors": [
- "Alec Larson (https://github.com/aleclarson)"
- ],
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/drcmda/react-spring/issues"
+ "dependencies": {
+ "@babel/runtime": "^7.3.1"
},
- "homepage": "https://github.com/drcmda/react-spring#readme",
"devDependencies": {
- "@babel/core": "7.2.2",
- "@babel/plugin-proposal-class-properties": "7.3.0",
- "@babel/plugin-proposal-do-expressions": "7.2.0",
- "@babel/plugin-proposal-object-rest-spread": "7.3.2",
- "@babel/plugin-transform-modules-commonjs": "7.2.0",
- "@babel/plugin-transform-parameters": "7.2.0",
- "@babel/plugin-transform-runtime": "7.2.0",
- "@babel/plugin-transform-template-literals": "7.2.0",
- "@babel/preset-env": "7.3.1",
- "@babel/preset-react": "7.0.0",
- "@babel/preset-typescript": "^7.1.0",
- "@types/jest": "^24.0.0",
- "@types/mock-raf": "^1.0.2",
- "@types/react": "16.8.2",
- "babel-core": "7.0.0-bridge.0",
- "babel-jest": "24.1.0",
- "babel-plugin-transform-react-remove-prop-types": "0.4.24",
- "babel-polyfill": "6.26.0",
- "copyfiles": "2.1.0",
- "enzyme": "3.8.0",
- "enzyme-adapter-react-16": "1.9.1",
+ "@babel/core": "~7.9.0",
+ "@babel/plugin-proposal-class-properties": "~7.8.3",
+ "@babel/plugin-proposal-object-rest-spread": "~7.9.5",
+ "@babel/plugin-transform-modules-commonjs": "~7.9.0",
+ "@babel/plugin-transform-runtime": "~7.9.0",
+ "@babel/preset-env": "~7.9.5",
+ "@babel/preset-react": "~7.9.4",
+ "@babel/preset-typescript": "~7.9.0",
+ "@rollup/plugin-commonjs": "^11.1.0",
+ "@rollup/plugin-node-resolve": "^7.1.3",
+ "@types/jest": "^24.0.13",
+ "@types/react": "^16.8.19",
+ "build-if-changed": "^1.5.0",
+ "chalk": "^2.4.2",
+ "enquirer": "^2.3.2",
+ "execa": "^2.0.4",
+ "flush-microtasks": "^1.0.1",
+ "fs-extra": "7.0.1",
"husky": "1.3.1",
- "jest": "24.1.0",
- "json": "9.0.6",
- "konva": "^2.6.0",
- "mock-raf": "1.0.1",
- "npm-run-all": "4.1.5",
- "prettier": "1.16.4",
+ "jest": "^25.1.0",
+ "jest-watch-typeahead": "^0.3.1",
+ "lerna": "3.15.0",
+ "meta": "^1.2.19",
+ "mock-raf": "npm:@react-spring/mock-raf",
+ "prettier": "^2.0.5",
"pretty-quick": "1.10.0",
- "react": "16.8.1",
- "react-dom": "16.8.1",
- "react-konva": "^16.8.0",
- "react-native": "^0.58.4",
- "react-test-renderer": "16.8.1",
- "react-testing-library": "5.6.1",
+ "react": "~16.9.0",
+ "recrawl-sync": "^1.2.2",
"rimraf": "2.6.3",
- "rollup": "1.1.2",
- "rollup-plugin-babel": "4.3.2",
- "rollup-plugin-commonjs": "9.2.0",
- "rollup-plugin-node-resolve": "4.0.0",
- "rollup-plugin-size-snapshot": "0.8.0",
- "rollup-plugin-uglify": "6.0.2",
- "typescript": "3.3.3"
- },
- "peerDependencies": {
- "react": ">= 16.8.0",
- "react-dom": ">= 16.8.0"
- },
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "prop-types": "^15.5.8"
+ "rollup": "^2.7.6",
+ "rollup-plugin-babel": "^4.4.0",
+ "rollup-plugin-dts": "^1.4.0",
+ "rollup-plugin-terser": "5.0.0",
+ "sade": "^1.6.1",
+ "sort-package-json": "1.22.1",
+ "spec.ts": "1.1.3",
+ "ts-jest": "24.2.0",
+ "typescript": "3.8.3",
+ "typescript-rewrite-paths": "^1.2.0"
},
- "jest": {
- "testPathIgnorePatterns": [
- "/node_modules/",
- "jest",
- "legacy"
- ],
- "testRegex": "test.(js|ts|tsx)$",
- "coverageDirectory": "./coverage/",
- "collectCoverage": true,
- "coverageReporters": [
- "json",
- "html",
- "text",
- "text-summary"
- ],
- "collectCoverageFrom": [
- "src/**/*.js",
- "!test/"
- ],
- "setupFilesAfterEnv": [
- "/setupTests.js"
- ]
+ "publishConfig": {
+ "access": "public"
},
"collective": {
"type": "opencollective",
diff --git a/src/animated/LICENSE b/packages/animated/LICENSE
similarity index 99%
rename from src/animated/LICENSE
rename to packages/animated/LICENSE
index 5930f2b8d8..188fb2b0bd 100644
--- a/src/animated/LICENSE
+++ b/packages/animated/LICENSE
@@ -18,4 +18,4 @@ 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.
\ No newline at end of file
+SOFTWARE.
diff --git a/packages/animated/README.md b/packages/animated/README.md
new file mode 100644
index 0000000000..8a91ac8058
--- /dev/null
+++ b/packages/animated/README.md
@@ -0,0 +1,3 @@
+# @react-spring/animated
+
+Fork of [animated](https://github.com/animatedjs/animated)
diff --git a/packages/animated/package.json b/packages/animated/package.json
new file mode 100644
index 0000000000..f57b82f549
--- /dev/null
+++ b/packages/animated/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "@react-spring/animated",
+ "version": "9.0.0-rc.3",
+ "description": "Animated component props for React",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "rollup -c"
+ },
+ "dependencies": {
+ "react-layout-effect": "^1.0.1",
+ "shared": "link:../shared"
+ },
+ "publishConfig": {
+ "directory": "dist"
+ }
+}
diff --git a/packages/animated/rollup.config.js b/packages/animated/rollup.config.js
new file mode 100644
index 0000000000..66cee09cf3
--- /dev/null
+++ b/packages/animated/rollup.config.js
@@ -0,0 +1,3 @@
+import { bundle } from '../../rollup.config'
+
+export default bundle()
diff --git a/packages/animated/src/Animated.ts b/packages/animated/src/Animated.ts
new file mode 100644
index 0000000000..108f221394
--- /dev/null
+++ b/packages/animated/src/Animated.ts
@@ -0,0 +1,45 @@
+import { defineHidden } from 'shared'
+import { AnimatedValue } from './AnimatedValue'
+
+const $node: any = Symbol.for('Animated:node')
+
+export const isAnimated = (value: any): value is Animated =>
+ !!value && value[$node] === value
+
+/** Get the owner's `Animated` node. */
+export const getAnimated = (owner: any): Animated | undefined =>
+ owner && owner[$node]
+
+/** Set the owner's `Animated` node. */
+export const setAnimated = (owner: any, node: Animated) =>
+ defineHidden(owner, $node, node)
+
+/** Get every `AnimatedValue` in the owner's `Animated` node. */
+export const getPayload = (owner: any): AnimatedValue[] | undefined =>
+ owner && owner[$node] && owner[$node].getPayload()
+
+export abstract class Animated {
+ /** The cache of animated values */
+ protected payload?: Payload
+
+ constructor() {
+ // This makes "isAnimated" return true.
+ setAnimated(this, this)
+ }
+
+ /** Get the current value. Pass `true` for only animated values. */
+ abstract getValue(animated?: boolean): T
+
+ /** Set the current value. */
+ abstract setValue(value: T): void
+
+ /** Reset any animation state. */
+ abstract reset(goal?: T): void
+
+ /** Get every `AnimatedValue` used by this node. */
+ getPayload(): Payload {
+ return this.payload || []
+ }
+}
+
+export type Payload = readonly AnimatedValue[]
diff --git a/packages/animated/src/AnimatedArray.ts b/packages/animated/src/AnimatedArray.ts
new file mode 100644
index 0000000000..572256a655
--- /dev/null
+++ b/packages/animated/src/AnimatedArray.ts
@@ -0,0 +1,50 @@
+import { isAnimatedString, each } from 'shared'
+import { AnimatedObject } from './AnimatedObject'
+import { AnimatedString } from './AnimatedString'
+import { AnimatedValue } from './AnimatedValue'
+
+type Value = number | string
+type Source = AnimatedValue[]
+
+/** An array of animated nodes */
+export class AnimatedArray<
+ T extends ReadonlyArray = Value[]
+> extends AnimatedObject {
+ protected source!: Source
+ constructor(from: T, to?: T) {
+ super(null)
+ super.setValue(this._makeAnimated(from, to))
+ }
+
+ static create>(from: T, to?: T) {
+ return new AnimatedArray(from, to)
+ }
+
+ getValue(): T {
+ return this.source.map(node => node.getValue()) as any
+ }
+
+ setValue(newValue: T | null) {
+ const payload = this.getPayload()
+ // Reuse the payload when lengths are equal.
+ if (newValue && newValue.length == payload.length) {
+ each(payload, (node, i) => node.setValue(newValue[i]))
+ } else {
+ // Remake the payload when length changes.
+ this.source = this._makeAnimated(newValue)
+ this.payload = this._makePayload(this.source)
+ }
+ }
+
+ /** Convert the `from` and `to` values to an array of `Animated` nodes */
+ protected _makeAnimated(from: T | null, to: T = from!) {
+ return from
+ ? from.map((from, i) =>
+ (isAnimatedString(from) ? AnimatedString : AnimatedValue).create(
+ from,
+ to[i]
+ )
+ )
+ : []
+ }
+}
diff --git a/packages/animated/src/AnimatedObject.ts b/packages/animated/src/AnimatedObject.ts
new file mode 100644
index 0000000000..de06263e97
--- /dev/null
+++ b/packages/animated/src/AnimatedObject.ts
@@ -0,0 +1,66 @@
+import { Lookup, each, getFluidConfig } from 'shared'
+import { Animated, isAnimated, getPayload } from './Animated'
+import { AnimatedValue } from './AnimatedValue'
+import { TreeContext } from './context'
+
+type Source = Lookup | null
+
+/** An object containing `Animated` nodes */
+export class AnimatedObject extends Animated {
+ protected source!: Source
+ constructor(source: Source = null) {
+ super()
+ this.setValue(source)
+ }
+
+ getValue(animated?: boolean): Source {
+ if (!this.source) return null
+ const values: Lookup = {}
+ each(this.source, (source, key) => {
+ if (isAnimated(source)) {
+ values[key] = source.getValue(animated)
+ } else {
+ const config = getFluidConfig(source)
+ if (config) {
+ values[key] = config.get()
+ } else if (!animated) {
+ values[key] = source
+ }
+ }
+ })
+ return values
+ }
+
+ /** Replace the raw object data */
+ setValue(source: Source) {
+ this.source = source
+ this.payload = this._makePayload(source)
+ }
+
+ reset() {
+ if (this.payload) {
+ each(this.payload, node => node.reset())
+ }
+ }
+
+ /** Create a payload set. */
+ protected _makePayload(source: Source) {
+ if (source) {
+ const payload = new Set()
+ each(source, this._addToPayload, payload)
+ return Array.from(payload)
+ }
+ }
+
+ /** Add to a payload set. */
+ protected _addToPayload(this: Set, source: any) {
+ const config = getFluidConfig(source)
+ if (config && TreeContext.current) {
+ TreeContext.current.dependencies.add(source)
+ }
+ const payload = getPayload(source)
+ if (payload) {
+ each(payload, node => this.add(node))
+ }
+ }
+}
diff --git a/packages/animated/src/AnimatedProps.ts b/packages/animated/src/AnimatedProps.ts
new file mode 100644
index 0000000000..4a42a2a414
--- /dev/null
+++ b/packages/animated/src/AnimatedProps.ts
@@ -0,0 +1,40 @@
+import { FluidObserver, FluidEvent } from 'shared'
+import * as G from 'shared/globals'
+
+import { AnimatedObject } from './AnimatedObject'
+import { TreeContext } from './context'
+
+type Props = object & { style?: any }
+
+export class AnimatedProps extends AnimatedObject implements FluidObserver {
+ /** Equals true when an update is scheduled for "end of frame" */
+ dirty = false
+
+ constructor(public update: () => void) {
+ super(null)
+ }
+
+ setValue(props: Props | null, context?: TreeContext) {
+ if (!props) return // The constructor passes null.
+ if (context) {
+ TreeContext.current = context
+ if (props.style) {
+ const { createAnimatedStyle } = context.host
+ props = { ...props, style: createAnimatedStyle(props.style) }
+ }
+ }
+ super.setValue(props)
+ TreeContext.current = null
+ }
+
+ /** @internal */
+ onParentChange({ type }: FluidEvent) {
+ if (!this.dirty && type === 'change') {
+ this.dirty = true
+ G.frameLoop.onFrame(() => {
+ this.dirty = false
+ this.update()
+ })
+ }
+ }
+}
diff --git a/packages/animated/src/AnimatedString.ts b/packages/animated/src/AnimatedString.ts
new file mode 100644
index 0000000000..a09f997f19
--- /dev/null
+++ b/packages/animated/src/AnimatedString.ts
@@ -0,0 +1,49 @@
+import { AnimatedValue } from './AnimatedValue'
+import { is, createInterpolator } from 'shared'
+
+type Value = string | number
+
+export class AnimatedString extends AnimatedValue {
+ protected _value!: number
+ protected _string: string | null = null
+ protected _toString: (input: number) => string
+
+ constructor(from: string, to: string) {
+ super(0)
+ this._toString = createInterpolator({ output: [from, to] })
+ }
+
+ static create(from: T, to: T | null = from): AnimatedValue {
+ if (is.str(from) && is.str(to)) {
+ return new AnimatedString(from, to) as any
+ }
+ throw TypeError('Expected "from" and "to" to be strings')
+ }
+
+ getValue() {
+ let value = this._string
+ return value == null ? (this._string = this._toString(this._value)) : value
+ }
+
+ setValue(value: Value) {
+ if (!is.num(value)) {
+ this._string = value
+ this._value = 1
+ } else if (super.setValue(value)) {
+ this._string = null
+ } else {
+ return false
+ }
+ return true
+ }
+
+ reset(goal?: string) {
+ if (goal) {
+ this._toString = createInterpolator({
+ output: [this.getValue(), goal],
+ })
+ }
+ this._value = 0
+ super.reset()
+ }
+}
diff --git a/packages/animated/src/AnimatedValue.ts b/packages/animated/src/AnimatedValue.ts
new file mode 100644
index 0000000000..e0e468ff5a
--- /dev/null
+++ b/packages/animated/src/AnimatedValue.ts
@@ -0,0 +1,67 @@
+import { is } from 'shared'
+import { Animated, Payload } from './Animated'
+
+/** An animated number or a native attribute value */
+export class AnimatedValue extends Animated {
+ done = true
+ elapsedTime!: number
+ lastPosition!: number
+ lastVelocity?: number | null
+ v0?: number | null
+
+ constructor(protected _value: T) {
+ super()
+ if (is.num(this._value)) {
+ this.lastPosition = this._value
+ }
+ }
+
+ static create(from: T, _to?: T | null) {
+ return new AnimatedValue(from)
+ }
+
+ getPayload(): Payload {
+ return [this]
+ }
+
+ getValue() {
+ return this._value
+ }
+
+ /**
+ * Set the current value and optionally round it.
+ *
+ * The `step` argument does nothing whenever it equals `undefined` or `0`.
+ * It works with fractions and whole numbers. The best use case is (probably)
+ * rounding to the pixel grid with a step of:
+ *
+ * 1 / window.devicePixelRatio
+ */
+ setValue(value: T, step?: number) {
+ if (is.num(value)) {
+ this.lastPosition = value
+ if (step) {
+ value = (Math.round(value / step) * step) as any
+ if (this.done) {
+ this.lastPosition = value as any
+ }
+ }
+ }
+ if (this._value === value) {
+ return false
+ }
+ this._value = value
+ return true
+ }
+
+ reset() {
+ const { done } = this
+ this.done = false
+ if (is.num(this._value)) {
+ this.elapsedTime = 0
+ this.lastPosition = this._value
+ if (done) this.lastVelocity = null
+ this.v0 = null
+ }
+ }
+}
diff --git a/packages/animated/src/context.ts b/packages/animated/src/context.ts
new file mode 100644
index 0000000000..1edac1cb52
--- /dev/null
+++ b/packages/animated/src/context.ts
@@ -0,0 +1,9 @@
+import { FluidValue } from 'shared'
+import { HostConfig } from './createHost'
+
+export type TreeContext = {
+ dependencies: Set
+ host: HostConfig
+}
+
+export const TreeContext: { current: TreeContext | null } = { current: null }
diff --git a/packages/animated/src/createHost.ts b/packages/animated/src/createHost.ts
new file mode 100644
index 0000000000..a17c3d9eab
--- /dev/null
+++ b/packages/animated/src/createHost.ts
@@ -0,0 +1,70 @@
+import { is, each, Lookup } from 'shared'
+import { AnimatableComponent, withAnimated } from './withAnimated'
+import { Animated } from './Animated'
+import { AnimatedObject } from './AnimatedObject'
+
+export interface HostConfig {
+ /** Provide custom logic for native updates */
+ applyAnimatedValues: (node: any, props: Lookup) => boolean | void
+ /** Wrap the `style` prop with an animated node */
+ createAnimatedStyle: (style: Lookup) => Animated
+ /** Intercept props before they're passed to an animated component */
+ getComponentProps: (props: Lookup) => typeof props
+}
+
+// A stub type that gets replaced by @react-spring/web and others.
+type WithAnimated = {
+ (Component: AnimatableComponent): any
+ [key: string]: any
+}
+
+// For storing the animated version on the original component
+const cacheKey = Symbol.for('AnimatedComponent')
+
+export const createHost = (
+ components: AnimatableComponent[] | { [key: string]: AnimatableComponent },
+ {
+ applyAnimatedValues = () => false,
+ createAnimatedStyle = style => new AnimatedObject(style),
+ getComponentProps = props => props,
+ }: Partial = {}
+) => {
+ const hostConfig: HostConfig = {
+ applyAnimatedValues,
+ createAnimatedStyle,
+ getComponentProps,
+ }
+
+ const animated: WithAnimated = (Component: any) => {
+ const displayName = getDisplayName(Component) || 'Anonymous'
+
+ if (is.str(Component)) {
+ Component = withAnimated(Component, hostConfig)
+ } else {
+ Component =
+ Component[cacheKey] ||
+ (Component[cacheKey] = withAnimated(Component, hostConfig))
+ }
+
+ Component.displayName = `Animated(${displayName})`
+ return Component
+ }
+
+ each(components, (Component, key) => {
+ if (!is.str(key)) {
+ key = getDisplayName(Component)!
+ }
+ animated[key] = animated(Component)
+ })
+
+ return {
+ animated,
+ }
+}
+
+const getDisplayName = (arg: AnimatableComponent) =>
+ is.str(arg)
+ ? arg
+ : arg && is.str(arg.displayName)
+ ? arg.displayName
+ : (is.fun(arg) && arg.name) || null
diff --git a/packages/animated/src/index.ts b/packages/animated/src/index.ts
new file mode 100644
index 0000000000..fa9d4fc68e
--- /dev/null
+++ b/packages/animated/src/index.ts
@@ -0,0 +1,8 @@
+export * from './Animated'
+export * from './AnimatedValue'
+export * from './AnimatedString'
+export * from './AnimatedArray'
+export * from './AnimatedObject'
+export * from './AnimatedProps'
+export * from './createHost'
+export * from './types'
diff --git a/packages/animated/src/types.ts b/packages/animated/src/types.ts
new file mode 100644
index 0000000000..04d086d41e
--- /dev/null
+++ b/packages/animated/src/types.ts
@@ -0,0 +1,11 @@
+import { AnimatedArray } from './AnimatedArray'
+import { AnimatedValue } from './AnimatedValue'
+
+export type AnimatedType = Function & {
+ create: (
+ from: any,
+ goal?: any
+ ) => T extends ReadonlyArray
+ ? AnimatedArray
+ : AnimatedValue
+}
diff --git a/packages/animated/src/withAnimated.tsx b/packages/animated/src/withAnimated.tsx
new file mode 100644
index 0000000000..495e65279b
--- /dev/null
+++ b/packages/animated/src/withAnimated.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { forwardRef, useRef, Ref } from 'react'
+import { useLayoutEffect } from 'react-layout-effect'
+import { is, each, useForceUpdate, ElementType, FluidConfig } from 'shared'
+
+import { AnimatedProps } from './AnimatedProps'
+import { HostConfig } from './createHost'
+
+export type AnimatableComponent = string | Exclude
+
+export const withAnimated = (Component: any, host: HostConfig) =>
+ forwardRef((rawProps: any, ref: Ref) => {
+ const instanceRef = useRef(null)
+ const hasInstance: boolean =
+ // Function components must use "forwardRef" to avoid being
+ // re-rendered on every animation frame.
+ !is.fun(Component) ||
+ (Component.prototype && Component.prototype.isReactComponent)
+
+ const forceUpdate = useForceUpdate()
+ const props = new AnimatedProps(() => {
+ const instance = instanceRef.current
+ if (hasInstance && !instance) {
+ return // The wrapped component forgot to forward its ref.
+ }
+
+ const didUpdate = instance
+ ? host.applyAnimatedValues(instance, props.getValue(true)!)
+ : false
+
+ // Re-render the component when native updates fail.
+ if (didUpdate === false) {
+ forceUpdate()
+ }
+ })
+
+ const dependencies = new Set()
+ props.setValue(rawProps, { dependencies, host })
+
+ useLayoutEffect(() => {
+ each(dependencies, dep => dep.addChild(props))
+ return () => each(dependencies, dep => dep.removeChild(props))
+ })
+
+ return (
+ {
+ instanceRef.current = updateRef(ref, value)
+ })
+ }
+ />
+ )
+ })
+
+function updateRef(ref: Ref, value: T) {
+ if (ref) {
+ if (is.fun(ref)) ref(value)
+ else (ref as any).current = value
+ }
+ return value
+}
diff --git a/packages/animated/tsconfig.json b/packages/animated/tsconfig.json
new file mode 100644
index 0000000000..3e78e67e96
--- /dev/null
+++ b/packages/animated/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "include": ["src"],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "lib": ["es2017"],
+ "moduleResolution": "node",
+ "noEmitOnError": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "paths": {
+ "shared": ["./node_modules/shared/src"],
+ "shared/*": ["./node_modules/shared/src/*"]
+ },
+ "preserveSymlinks": true,
+ "sourceMap": true,
+ "strict": true,
+ "target": "esnext",
+ "typeRoots": ["../../node_modules/@types"]
+ }
+}
diff --git a/packages/core/README.md b/packages/core/README.md
new file mode 100644
index 0000000000..b1ae0b7d48
--- /dev/null
+++ b/packages/core/README.md
@@ -0,0 +1,3 @@
+# @react-spring/core
+
+The platform-agnostic core of `react-spring`
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 0000000000..8cad37461a
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "@react-spring/core",
+ "version": "9.0.0-rc.3",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "rollup -c",
+ "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mEnjoy react-spring? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/react-spring/donate\\u001b[0m')\""
+ },
+ "dependencies": {
+ "animated": "link:../animated",
+ "react-layout-effect": "^1.0.1",
+ "shared": "link:../shared",
+ "use-memo-one": "^1.1.0"
+ },
+ "publishConfig": {
+ "directory": "dist"
+ },
+ "devDependencies": {
+ "@testing-library/react": "^9.4.0",
+ "react-dom": "^16.12.0"
+ }
+}
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
new file mode 100644
index 0000000000..66cee09cf3
--- /dev/null
+++ b/packages/core/rollup.config.js
@@ -0,0 +1,3 @@
+import { bundle } from '../../rollup.config'
+
+export default bundle()
diff --git a/packages/core/src/Animation.ts b/packages/core/src/Animation.ts
new file mode 100644
index 0000000000..fd321af6df
--- /dev/null
+++ b/packages/core/src/Animation.ts
@@ -0,0 +1,25 @@
+import { AnimatedValue } from 'animated'
+import { FluidValue } from 'shared'
+import { AnimationConfig } from './AnimationConfig'
+import { OnStart, OnChange } from './types'
+
+const emptyArray: readonly any[] = []
+
+/** @internal */
+type OnRest = (cancel?: boolean) => void
+
+/** An animation being executed by the frameloop */
+export class Animation {
+ changed = false
+ values: readonly AnimatedValue[] = emptyArray
+ toValues: readonly number[] | null = null
+ fromValues: readonly number[] = emptyArray
+
+ to!: T | FluidValue
+ from!: T | FluidValue
+ config = new AnimationConfig()
+ immediate = false
+ onStart?: OnStart
+ onChange?: OnChange
+ onRest: OnRest[] = []
+}
diff --git a/packages/core/src/AnimationConfig.test.ts b/packages/core/src/AnimationConfig.test.ts
new file mode 100644
index 0000000000..5c182641e3
--- /dev/null
+++ b/packages/core/src/AnimationConfig.test.ts
@@ -0,0 +1,101 @@
+import { AnimationConfig, mergeConfig } from './AnimationConfig'
+
+const expo = (t: number) => Math.pow(t, 2)
+
+describe('mergeConfig', () => {
+ it('can merge partial configs', () => {
+ let config = new AnimationConfig()
+ mergeConfig(config, { tension: 0 })
+ mergeConfig(config, { friction: 0 })
+ expect(config).toMatchObject({
+ tension: 0,
+ friction: 0,
+ })
+
+ config = new AnimationConfig()
+ mergeConfig(config, { frequency: 2 })
+ mergeConfig(config, { damping: 0 })
+ expect(config).toMatchObject({
+ frequency: 2,
+ damping: 0,
+ })
+
+ config = new AnimationConfig()
+ mergeConfig(config, { duration: 2000 })
+ mergeConfig(config, { easing: expo })
+ expect(config).toMatchObject({
+ duration: 2000,
+ easing: expo,
+ })
+ })
+
+ it('resets the "duration" when props are incompatible', () => {
+ const config = new AnimationConfig()
+
+ mergeConfig(config, { duration: 1000 })
+ expect(config.duration).toBeDefined()
+
+ mergeConfig(config, { decay: 0.998 })
+ expect(config.duration).toBeUndefined()
+ expect(config.decay).toBe(0.998)
+
+ mergeConfig(config, { duration: 1000 })
+ expect(config.duration).toBeDefined()
+
+ mergeConfig(config, { frequency: 0.5 })
+ expect(config.duration).toBeUndefined()
+ expect(config.frequency).toBe(0.5)
+ })
+
+ it('resets the "decay" when props are incompatible', () => {
+ const config = new AnimationConfig()
+
+ mergeConfig(config, { decay: 0.998 })
+ expect(config.decay).toBeDefined()
+
+ mergeConfig(config, { mass: 2 })
+ expect(config.decay).toBeUndefined()
+ expect(config.mass).toBe(2)
+ })
+
+ it('resets the "frequency" when props are incompatible', () => {
+ const config = new AnimationConfig()
+
+ mergeConfig(config, { frequency: 0.5 })
+ expect(config.frequency).toBeDefined()
+
+ mergeConfig(config, { tension: 0 })
+ expect(config.frequency).toBeUndefined()
+ expect(config.tension).toBe(0)
+ })
+
+ describe('frequency/damping props', () => {
+ it('properly converts to tension/friction', () => {
+ const config = new AnimationConfig()
+ const merged = mergeConfig(config, { frequency: 0.5, damping: 1 })
+ expect(merged.tension).toBe(157.91367041742973)
+ expect(merged.friction).toBe(25.132741228718345)
+ })
+
+ it('works with extreme but valid values', () => {
+ const config = new AnimationConfig()
+ const merged = mergeConfig(config, { frequency: 2.6, damping: 0.1 })
+ expect(merged.tension).toBe(5.840002604194885)
+ expect(merged.friction).toBe(0.483321946706122)
+ })
+
+ it('prevents a damping ratio less than 0', () => {
+ const config = new AnimationConfig()
+ const validConfig = mergeConfig(config, { frequency: 0.5, damping: 0 })
+ const invalidConfig = mergeConfig(config, { frequency: 0.5, damping: -1 })
+ expect(invalidConfig).toMatchObject(validConfig)
+ })
+
+ it('prevents a frequency response less than 0.01', () => {
+ const config = new AnimationConfig()
+ const validConfig = mergeConfig(config, { frequency: 0.01, damping: 1 })
+ const invalidConfig = mergeConfig(config, { frequency: 0, damping: 1 })
+ expect(invalidConfig).toMatchObject(validConfig)
+ })
+ })
+})
diff --git a/packages/core/src/AnimationConfig.ts b/packages/core/src/AnimationConfig.ts
new file mode 100644
index 0000000000..4debf942ec
--- /dev/null
+++ b/packages/core/src/AnimationConfig.ts
@@ -0,0 +1,203 @@
+import { is } from 'shared'
+import { config as configs } from './constants'
+
+const linear = (t: number) => t
+const defaults: any = {
+ ...configs.default,
+ mass: 1,
+ damping: 1,
+ easing: linear,
+ clamp: false,
+}
+
+export class AnimationConfig {
+ /**
+ * With higher tension, the spring will resist bouncing and try harder to stop at its end value.
+ *
+ * When tension is zero, no animation occurs.
+ */
+ tension!: number
+
+ /**
+ * The damping ratio coefficient, or just the damping ratio when `speed` is defined.
+ *
+ * When `speed` is defined, this value should be between 0 and 1.
+ *
+ * Higher friction means the spring will slow down faster.
+ */
+ friction!: number
+
+ /**
+ * The natural frequency (in seconds), which dictates the number of bounces
+ * per second when no damping exists.
+ *
+ * When defined, `tension` is derived from this, and `friction` is derived
+ * from `tension` and `damping`.
+ */
+ frequency?: number
+
+ /**
+ * The damping ratio, which dictates how the spring slows down.
+ *
+ * Set to `0` to never slow down. Set to `1` to slow down without bouncing.
+ * Between `0` and `1` is for you to explore.
+ *
+ * Only works when `frequency` is defined.
+ *
+ * Defaults to 1
+ */
+ damping!: number
+
+ /**
+ * Higher mass means more friction is required to slow down.
+ *
+ * Defaults to 1, which works fine most of the time.
+ */
+ mass!: number
+
+ /**
+ * The initial velocity of one or more values.
+ */
+ velocity: number | number[] = 0
+
+ /**
+ * The smallest velocity before the animation is considered "not moving".
+ *
+ * When undefined, `precision` is used instead.
+ */
+ restVelocity?: number
+
+ /**
+ * The smallest distance from a value before that distance is essentially zero.
+ *
+ * This helps in deciding when a spring is "at rest". The spring must be within
+ * this distance from its final value, and its velocity must be lower than this
+ * value too (unless `restVelocity` is defined).
+ */
+ precision?: number
+
+ /**
+ * For `duration` animations only. Note: The `duration` is not affected
+ * by this property.
+ *
+ * Defaults to `0`, which means "start from the beginning".
+ *
+ * Setting to `1+` makes an immediate animation.
+ *
+ * Setting to `0.5` means "start from the middle of the easing function".
+ *
+ * Any number `>= 0` and `<= 1` makes sense here.
+ */
+ progress?: number
+
+ /**
+ * Animation length in number of milliseconds.
+ */
+ duration?: number
+
+ /**
+ * The animation curve. Only used when `duration` is defined.
+ *
+ * Defaults to quadratic ease-in-out.
+ */
+ easing!: (t: number) => number
+
+ /**
+ * Avoid overshooting by ending abruptly at the goal value.
+ */
+ clamp!: boolean
+
+ /**
+ * When above zero, the spring will bounce instead of overshooting when
+ * exceeding its goal value. Its velocity is multiplied by `-1 + bounce`
+ * whenever its current value equals or exceeds its goal. For example,
+ * setting `bounce` to `0.5` chops the velocity in half on each bounce,
+ * in addition to any friction.
+ */
+ bounce?: number
+
+ /**
+ * "Decay animations" decelerate without an explicit goal value.
+ * Useful for scrolling animations.
+ *
+ * Use `true` for the default exponential decay factor (`0.998`).
+ *
+ * When a `number` between `0` and `1` is given, a lower number makes the
+ * animation slow down faster. And setting to `1` would make an unending
+ * animation.
+ */
+ decay?: boolean | number
+
+ /**
+ * While animating, round to the nearest multiple of this number.
+ * The `from` and `to` values are never rounded, as well as any value
+ * passed to the `set` method of an animated value.
+ */
+ round?: number
+
+ constructor() {
+ Object.assign(this, defaults)
+ }
+}
+
+export function mergeConfig(
+ config: AnimationConfig,
+ newConfig: Partial,
+ defaultConfig?: Partial
+): typeof config
+
+export function mergeConfig(
+ config: any,
+ newConfig: object,
+ defaultConfig?: object
+) {
+ if (defaultConfig) {
+ defaultConfig = { ...defaultConfig }
+ sanitizeConfig(defaultConfig, newConfig)
+ newConfig = { ...defaultConfig, ...newConfig }
+ }
+
+ sanitizeConfig(config, newConfig)
+ Object.assign(config, newConfig)
+
+ for (const key in defaults) {
+ if (config[key] == null) {
+ config[key] = defaults[key]
+ }
+ }
+
+ let { mass, frequency, damping } = config
+ if (!is.und(frequency)) {
+ if (frequency < 0.01) frequency = 0.01
+ if (damping < 0) damping = 0
+ config.tension = Math.pow((2 * Math.PI) / frequency, 2) * mass
+ config.friction = (4 * Math.PI * damping * mass) / frequency
+ }
+
+ return config
+}
+
+// Prevent a config from accidentally overriding new props.
+// This depends on which "config" props take precedence when defined.
+function sanitizeConfig(
+ config: Partial,
+ props: Partial
+) {
+ if (!is.und(props.decay)) {
+ config.duration = undefined
+ } else {
+ const isTensionConfig = !is.und(props.tension) || !is.und(props.friction)
+ if (
+ isTensionConfig ||
+ !is.und(props.frequency) ||
+ !is.und(props.damping) ||
+ !is.und(props.mass)
+ ) {
+ config.duration = undefined
+ config.decay = undefined
+ }
+ if (isTensionConfig) {
+ config.frequency = undefined
+ }
+ }
+}
diff --git a/packages/core/src/AnimationResult.ts b/packages/core/src/AnimationResult.ts
new file mode 100644
index 0000000000..d57f50684b
--- /dev/null
+++ b/packages/core/src/AnimationResult.ts
@@ -0,0 +1,71 @@
+import { SpringPhase } from './SpringPhase'
+import { SpringStopFn } from './types'
+
+/** @internal */
+export interface AnimationTarget {
+ get(): T
+ is(phase: SpringPhase): boolean
+ start(props: any): AsyncResult
+ stop: SpringStopFn
+}
+
+/** The object given to the `onRest` prop and `start` promise. */
+export interface AnimationResult {
+ value: T
+ target?: AnimationTarget
+ /** When true, no animation ever started. */
+ noop?: boolean
+ /** When true, the animation was neither cancelled nor stopped prematurely. */
+ finished?: boolean
+ /** When true, the animation was cancelled before it could finish. */
+ cancelled?: boolean
+}
+
+/** The promised result of an animation. */
+export type AsyncResult = Promise>
+
+/** @internal */
+export const getCombinedResult = (
+ target: AnimationTarget,
+ results: AnimationResult[]
+): AnimationResult =>
+ results.length == 1
+ ? results[0]
+ : results.some(result => result.cancelled)
+ ? getCancelledResult(target)
+ : results.every(result => result.noop)
+ ? getNoopResult(target)
+ : getFinishedResult(
+ target,
+ results.every(result => result.finished)
+ )
+
+/** No-op results are for updates that never start an animation. */
+export const getNoopResult = (
+ target: AnimationTarget,
+ value = target.get()
+) => ({
+ value,
+ noop: true,
+ finished: true,
+ target,
+})
+
+export const getFinishedResult = (
+ target: AnimationTarget,
+ finished: boolean,
+ value = target.get()
+) => ({
+ value,
+ finished,
+ target,
+})
+
+export const getCancelledResult = (
+ target: AnimationTarget,
+ value = target.get()
+) => ({
+ value,
+ cancelled: true,
+ target,
+})
diff --git a/packages/core/src/Controller.test.ts b/packages/core/src/Controller.test.ts
new file mode 100644
index 0000000000..2bd3762f77
--- /dev/null
+++ b/packages/core/src/Controller.test.ts
@@ -0,0 +1,376 @@
+import { Controller } from './Controller'
+import { flushMicroTasks } from 'flush-microtasks'
+
+const frameLength = 1000 / 60
+
+describe('Controller', () => {
+ it('can animate a number', async () => {
+ const ctrl = new Controller({ x: 0 })
+ ctrl.start({ x: 100 })
+
+ await advanceUntilIdle()
+ const frames = getFrames(ctrl)
+ expect(frames).toMatchSnapshot()
+
+ // The first frame should *not* be the from value.
+ expect(frames[0]).not.toEqual({ x: 0 })
+
+ // The last frame should be the goal value.
+ expect(frames.slice(-1)[0]).toEqual({ x: 100 })
+ })
+
+ it('can animate an array of numbers', async () => {
+ const config = { precision: 0.005 }
+ const ctrl = new Controller<{ x: [number, number] }>({ x: [1, 2], config })
+ ctrl.start({ x: [5, 10] })
+
+ await advanceUntilIdle()
+ const frames = getFrames(ctrl)
+ expect(frames).toMatchSnapshot()
+
+ // The last frame should be the goal value.
+ expect(frames.slice(-1)[0]).toEqual({ x: [5, 10] })
+
+ // The 2nd value is always ~2x the 1st value (within the defined precision).
+ const factors = frames.map(frame => frame.x[1] / frame.x[0])
+ expect(
+ factors.every(factor => Math.abs(2 - factor) < config.precision)
+ ).toBeTruthy()
+ })
+
+ describe('when the "to" prop is an async function', () => {
+ it('respects the "cancel" prop', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+ const promise = ctrl.start({
+ to: async next => {
+ while (true) {
+ await next({ x: 1, reset: true })
+ }
+ },
+ })
+
+ const { x } = ctrl.springs
+ await advanceUntilValue(x, 0.5)
+
+ ctrl.start({ cancel: true })
+ await flushMicroTasks()
+
+ expect(ctrl.idle).toBeTruthy()
+ expect((await promise).cancelled).toBeTruthy()
+ })
+
+ it('respects the "stop" method', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+ const promise = ctrl.start({
+ to: async next => {
+ while (true) {
+ await next({ x: 1, reset: true })
+ }
+ },
+ })
+
+ const { x } = ctrl.springs
+ await advanceUntilValue(x, 0.5)
+
+ ctrl.stop()
+
+ expect(ctrl.idle).toBeTruthy()
+ expect((await promise).cancelled).toBeTruthy()
+ })
+
+ describe('when the "to" prop is changed', () => {
+ it('stops the old "to" prop', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+
+ let n = 0
+ const promise = ctrl.start({
+ to: async next => {
+ while (++n < 5) {
+ await next({ x: 1, reset: true })
+ }
+ },
+ })
+
+ await advance()
+ expect(n).toBe(1)
+
+ ctrl.start({
+ to: () => {},
+ })
+
+ await advanceUntilIdle()
+ expect(n).toBe(1)
+
+ expect(await promise).toMatchObject({
+ finished: false,
+ })
+ })
+ })
+
+ // This function is the "to" prop's 1st argument.
+ describe('the "animate" function', () => {
+ it('inherits any default props', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+ const onStart = jest.fn()
+ ctrl.start({
+ onStart,
+ to: async animate => {
+ expect(onStart).toBeCalledTimes(0)
+ await animate({ x: 1 })
+ expect(onStart).toBeCalledTimes(1)
+ await animate({ x: 0 })
+ },
+ })
+ await advanceUntilIdle()
+ expect(onStart).toBeCalledTimes(2)
+ })
+
+ it('can start its own async animation', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+
+ // Call this from inside the nested "to" prop.
+ const nestedFn = jest.fn()
+ // Call this after the nested "to" prop is done.
+ const afterFn = jest.fn()
+
+ ctrl.start({
+ to: async animate => {
+ await animate({
+ to: async animate => {
+ nestedFn()
+ await animate({ x: 1 })
+ },
+ })
+ afterFn()
+ },
+ })
+
+ await advanceUntilIdle()
+ await flushMicroTasks()
+
+ expect(nestedFn).toBeCalledTimes(1)
+ expect(afterFn).toBeCalledTimes(1)
+ })
+ })
+
+ describe('nested async animation', () => {
+ it('stops the parent on bail', async () => {
+ const ctrl = new Controller({ from: { x: 0 } })
+ const { x } = ctrl.springs
+
+ const afterFn = jest.fn()
+ ctrl.start({
+ to: async animate => {
+ await animate({
+ to: async animate => {
+ await animate({ x: 1 })
+ },
+ })
+ afterFn()
+ },
+ })
+
+ await advanceUntilValue(x, 0.5)
+ ctrl.start({ cancel: true })
+ await flushMicroTasks()
+
+ expect(ctrl.idle).toBeTruthy()
+ expect(afterFn).not.toHaveBeenCalled()
+ })
+ })
+
+ it('acts strangely without the "from" prop', async () => {
+ const ctrl = new Controller<{ x: number }>()
+
+ const { springs } = ctrl
+ ctrl.start({
+ to: async update => {
+ // The spring does not exist yet!
+ expect(springs.x).toBeUndefined()
+
+ // Any values passed here are treated as "from" values,
+ // because no "from" prop was ever given.
+ const p1 = update({ x: 1 })
+ // Now the spring exists!
+ expect(springs.x).toBeDefined()
+ // But the spring is idle!
+ expect(springs.x.idle).toBeTruthy()
+
+ // This call *will* start an animation!
+ const p2 = update({ x: 2 })
+ expect(springs.x.idle).toBeFalsy()
+
+ await Promise.all([p1, p2])
+ },
+ })
+
+ await advanceUntilIdle()
+
+ // Since we call `update` twice, frames are generated!
+ expect(getFrames(ctrl)).toMatchSnapshot()
+ })
+ })
+
+ describe('when the "onStart" prop is defined', () => {
+ it('is called once per "start" call maximum', async () => {
+ const ctrl = new Controller({ x: 0, y: 0 })
+
+ const onStart = jest.fn()
+ ctrl.start({
+ x: 1,
+ y: 1,
+ onStart,
+ })
+
+ await advanceUntilIdle()
+ expect(onStart).toBeCalledTimes(1)
+ })
+
+ it('can be different per key', async () => {
+ const ctrl = new Controller({ x: 0, y: 0 })
+
+ const onStart1 = jest.fn()
+ ctrl.start({ x: 1, onStart: onStart1 })
+
+ const onStart2 = jest.fn()
+ ctrl.start({ y: 1, onStart: onStart2 })
+
+ await advanceUntilIdle()
+ expect(onStart1).toBeCalledTimes(1)
+ expect(onStart2).toBeCalledTimes(1)
+ })
+ })
+
+ describe('the "loop" prop', () => {
+ it('can be combined with the "reverse" prop', async () => {
+ const ctrl = new Controller({
+ t: 1,
+ from: { t: 0 },
+ config: { duration: frameLength * 3 },
+ })
+
+ const { t } = ctrl.springs
+ expect(t.get()).toBe(0)
+
+ await advanceUntilIdle()
+ expect(t.get()).toBe(1)
+
+ ctrl.start({
+ loop: { reverse: true },
+ })
+
+ await advanceUntilValue(t, 0)
+ await advanceUntilValue(t, 1)
+ expect(getFrames(t)).toMatchSnapshot()
+ })
+
+ describe('used with multiple values', () => {
+ it('loops all values at the same time', async () => {
+ const ctrl = new Controller()
+
+ ctrl.start({
+ to: { x: 1, y: 1 },
+ from: { x: 0, y: 0 },
+ config: key => ({ frequency: key == 'x' ? 0.3 : 1 }),
+ loop: true,
+ })
+
+ const { x, y } = ctrl.springs
+ for (let i = 0; i < 2; i++) {
+ await advanceUntilValue(y, 1)
+
+ // Both values should equal their "from" value at the same time.
+ expect(x.get()).toBe(x.animation.from)
+ expect(y.get()).toBe(y.animation.from)
+ }
+ })
+ })
+
+ describe('used when "to" is', () => {
+ describe('an async function', () => {
+ it('calls the "to" function repeatedly', async () => {
+ const ctrl = new Controller({ t: 0 })
+ const { t } = ctrl.springs
+
+ let loop = true
+ let times = 2
+
+ // Note: This example is silly, since you could use a for-loop
+ // to more easily achieve the same result, but it tests the ability
+ // to halt a looping script via the "loop" function prop.
+ ctrl.start({
+ loop: () => loop,
+ to: async next => {
+ await next({ t: 1 })
+ await next({ t: 0 })
+
+ if (times--) return
+ loop = false
+ },
+ })
+
+ await advanceUntilValue(t, 1)
+ expect(t.idle).toBeFalsy()
+
+ for (let i = 0; i < 2; i++) {
+ await advanceUntilValue(t, 0)
+ expect(t.idle).toBeFalsy()
+
+ await advanceUntilValue(t, 1)
+ expect(t.idle).toBeFalsy()
+ }
+
+ await advanceUntilValue(t, 0)
+ expect(t.idle).toBeTruthy()
+ })
+ })
+
+ describe('an array', () => {
+ it('repeats the chain of updates', async () => {
+ const ctrl = new Controller({ t: 0 })
+ const { t } = ctrl.springs
+
+ let loop = true
+ const promise = ctrl.start({
+ loop: () => {
+ return loop
+ },
+ from: { t: 0 },
+ to: [{ t: 1 }, { t: 2 }],
+ config: { duration: 3000 / 60 },
+ })
+
+ for (let i = 0; i < 3; i++) {
+ await advanceUntilValue(t, 2)
+ expect(t.idle).toBeFalsy()
+
+ // Run the first frame of the next loop.
+ mockRaf.step()
+ }
+
+ loop = false
+
+ await advanceUntilValue(t, 2)
+ expect(t.idle).toBeTruthy()
+
+ expect(await promise).toMatchObject({
+ value: { t: 2 },
+ finished: true,
+ })
+ })
+ })
+ })
+
+ describe('used on a noop update', () => {
+ it('does not loop', async () => {
+ const ctrl = new Controller({ t: 0 })
+
+ const loop = jest.fn(() => true)
+ ctrl.start({ t: 0, loop })
+
+ await advanceUntilIdle()
+ expect(loop).toBeCalledTimes(0)
+ })
+ })
+ })
+})
diff --git a/packages/core/src/Controller.ts b/packages/core/src/Controller.ts
new file mode 100644
index 0000000000..f275897842
--- /dev/null
+++ b/packages/core/src/Controller.ts
@@ -0,0 +1,423 @@
+import { is, each, flush, OneOrMore, toArray, UnknownProps, noop } from 'shared'
+import * as G from 'shared/globals'
+
+import { Lookup, Falsy } from './types/common'
+import { hasDefaultProp } from './helpers'
+import { FrameValue } from './FrameValue'
+import { SpringPhase, CREATED, ACTIVE, IDLE } from './SpringPhase'
+import { SpringValue, createLoopUpdate, createUpdate } from './SpringValue'
+import {
+ getCombinedResult,
+ AnimationResult,
+ AsyncResult,
+} from './AnimationResult'
+import { runAsync, RunAsyncState, cancelAsync } from './runAsync'
+import { scheduleProps } from './scheduleProps'
+import {
+ ControllerFlushFn,
+ ControllerUpdate,
+ OnRest,
+ SpringValues,
+} from './types'
+
+/** Events batched by the `Controller` class */
+const BATCHED_EVENTS = ['onStart', 'onChange', 'onRest'] as const
+
+let nextId = 1
+
+/** Queue of pending updates for a `Controller` instance. */
+export interface ControllerQueue
+ extends Array<
+ ControllerUpdate & {
+ /** The keys affected by this update. When null, all keys are affected. */
+ keys: string[] | null
+ }
+ > {}
+
+export class Controller
+ implements FrameValue.Observer {
+ readonly id = nextId++
+
+ /** The animated values */
+ springs: SpringValues = {} as any
+
+ /** The queue of props passed to the `update` method. */
+ queue: ControllerQueue = []
+
+ /** Custom handler for flushing update queues */
+ protected _flush?: ControllerFlushFn
+
+ /** These props are used by all future spring values */
+ protected _initialProps?: Lookup
+
+ /** The combined phase of our spring values */
+ protected _phase: SpringPhase = CREATED
+
+ /** The counter for tracking `scheduleProps` calls */
+ protected _lastAsyncId = 0
+
+ /** The values currently being animated */
+ protected _active = new Set()
+
+ /** State used by the `runAsync` function */
+ protected _state: RunAsyncState = {
+ pauseQueue: new Set(),
+ resumeQueue: new Set(),
+ }
+
+ /** The event queues that are flushed once per frame maximum */
+ protected _events = {
+ onStart: new Set(),
+ onChange: new Set(),
+ onRest: new Map(),
+ }
+
+ constructor(
+ props?: ControllerUpdate | null,
+ flush?: ControllerFlushFn
+ ) {
+ this._onFrame = this._onFrame.bind(this)
+ if (flush) {
+ this._flush = flush
+ }
+ if (props) {
+ this.start(props)
+ }
+ }
+
+ /**
+ * Equals `true` when no spring values are in the frameloop, and
+ * no async animation is currently active.
+ */
+ get idle() {
+ return (
+ !this._state.asyncTo &&
+ Object.values(this.springs as Lookup).every(
+ spring => spring.idle
+ )
+ )
+ }
+
+ /** Check the current phase */
+ is(phase: SpringPhase) {
+ return this._phase == phase
+ }
+
+ /** Get the current values of our springs */
+ get(): State & UnknownProps {
+ const values: any = {}
+ this.each((spring, key) => (values[key] = spring.get()))
+ return values
+ }
+
+ /** Push an update onto the queue of each value. */
+ update(props: ControllerUpdate | Falsy) {
+ if (props) this.queue.push(createUpdate(props))
+ return this
+ }
+
+ /**
+ * Start the queued animations for every spring, and resolve the returned
+ * promise once all queued animations have finished or been cancelled.
+ *
+ * When you pass a queue (instead of nothing), that queue is used instead of
+ * the queued animations added with the `update` method, which are left alone.
+ */
+ start(props?: OneOrMore> | null): AsyncResult {
+ const queue = props ? toArray(props).map(createUpdate) : this.queue
+ if (!props) {
+ this.queue = []
+ }
+ if (this._flush) {
+ return this._flush(this, queue)
+ }
+ prepareKeys(this, queue)
+ return flushUpdateQueue(this, queue)
+ }
+
+ /** Stop one animation, some animations, or all animations */
+ stop(keys?: OneOrMore) {
+ if (is.und(keys)) {
+ this.each(spring => spring.stop())
+ cancelAsync(this._state, this._lastAsyncId)
+ } else {
+ const springs = this.springs as Lookup
+ each(toArray(keys), key => springs[key].stop())
+ }
+ return this
+ }
+
+ /** Freeze the active animation in time */
+ pause(keys?: OneOrMore) {
+ if (is.und(keys)) {
+ this.each(spring => spring.pause())
+ } else {
+ const springs = this.springs as Lookup
+ each(toArray(keys), key => springs[key].pause())
+ }
+ return this
+ }
+
+ /** Resume the animation if paused. */
+ resume(keys?: OneOrMore) {
+ if (is.und(keys)) {
+ this.each(spring => spring.resume())
+ } else {
+ const springs = this.springs as Lookup
+ each(toArray(keys), key => springs[key].resume())
+ }
+ return this
+ }
+
+ /** Restart every animation. */
+ reset() {
+ this.each(spring => spring.reset())
+ // TODO: restart async "to" prop
+ return this
+ }
+
+ /** Call a function once per spring value */
+ each(iterator: (spring: SpringValue, key: string) => void) {
+ each(this.springs, iterator as any)
+ }
+
+ /** Destroy every spring in this controller */
+ dispose() {
+ this._state.asyncTo = undefined
+ this.each(spring => spring.dispose())
+ this.springs = {} as any
+ }
+
+ /** @internal Called at the end of every animation frame */
+ protected _onFrame() {
+ const { onStart, onChange, onRest } = this._events
+
+ const isActive = this._active.size > 0
+ if (isActive && this._phase != ACTIVE) {
+ this._phase = ACTIVE
+ flush(onStart, onStart => onStart(this))
+ }
+
+ const values = (onChange.size || (!isActive && onRest.size)) && this.get()
+ flush(onChange, onChange => onChange(values))
+
+ // The "onRest" queue is only flushed when all springs are idle.
+ if (!isActive) {
+ this._phase = IDLE
+ flush(onRest, ([onRest, result]) => {
+ result.value = values
+ onRest(result)
+ })
+ }
+ }
+
+ /** @internal */
+ onParentChange(event: FrameValue.Event) {
+ if (event.type == 'change') {
+ this._active[event.idle ? 'delete' : 'add'](event.parent)
+ G.frameLoop.onFrame(this._onFrame)
+ }
+ }
+}
+
+/**
+ * Warning: Props might be mutated.
+ */
+export function flushUpdateQueue(
+ ctrl: Controller,
+ queue: ControllerQueue
+) {
+ return Promise.all(
+ queue.map(props => flushUpdate(ctrl, props))
+ ).then(results => getCombinedResult(ctrl, results))
+}
+
+/**
+ * Warning: Props might be mutated.
+ *
+ * Process a single set of props using the given controller.
+ *
+ * The returned promise resolves to `true` once the update is
+ * applied and any animations it starts are finished without being
+ * stopped or cancelled.
+ */
+export function flushUpdate(
+ ctrl: Controller,
+ props: ControllerQueue[number],
+ isLoop?: boolean
+): AsyncResult {
+ const { to, loop, onRest } = props
+
+ // Looping must be handled in this function, or else the values
+ // would end up looping out-of-sync in many common cases.
+ if (loop) {
+ props.loop = false
+ }
+
+ const asyncTo = is.arr(to) || is.fun(to) ? to : undefined
+ if (asyncTo) {
+ props.to = undefined
+ props.onRest = undefined
+ } else {
+ // For certain events, use batching to prevent multiple calls per frame.
+ // However, batching is avoided when the `to` prop is async, because any
+ // event props are used as default props instead.
+ each(BATCHED_EVENTS, key => {
+ const handler: any = props[key]
+ if (is.fun(handler)) {
+ const queue = ctrl['_events'][key]
+ if (queue instanceof Set) {
+ props[key] = () => queue.add(handler)
+ } else {
+ props[key] = (({ finished, cancelled }: AnimationResult) => {
+ const result = queue.get(handler)
+ if (result) {
+ if (!finished) result.finished = false
+ if (cancelled) result.cancelled = true
+ } else {
+ // The "value" is set before the "handler" is called.
+ queue.set(handler, {
+ value: null,
+ finished,
+ cancelled,
+ })
+ }
+ }) as any
+ }
+ }
+ })
+ }
+
+ const keys = props.keys || Object.keys(ctrl.springs)
+ const promises = keys.map(key => ctrl.springs[key]!.start(props as any))
+
+ // Schedule the "asyncTo" if defined.
+ const state = ctrl['_state']
+ if (asyncTo) {
+ promises.push(
+ scheduleProps(++ctrl['_lastAsyncId'], {
+ props,
+ state,
+ actions: {
+ pause: noop,
+ resume: noop,
+ start(props, resolve) {
+ props.onRest = onRest as any
+ if (!props.cancel) {
+ resolve(runAsync(asyncTo, props, state, ctrl))
+ }
+ // Prevent `cancel: true` from ending the current `runAsync` call,
+ // except when the default `cancel` prop is being set.
+ else if (hasDefaultProp(props, 'cancel')) {
+ cancelAsync(state, props.callId)
+ }
+ },
+ },
+ })
+ )
+ }
+ // Respect the `cancel` prop when no keys are affected.
+ else if (!props.keys && props.cancel === true) {
+ cancelAsync(state, ctrl['_lastAsyncId'])
+ }
+
+ return Promise.all(promises).then(results => {
+ const result = getCombinedResult(ctrl, results)
+ if (loop && result.finished && !(isLoop && result.noop)) {
+ const nextProps = createLoopUpdate(props, loop, to)
+ if (nextProps) {
+ prepareKeys(ctrl, [nextProps])
+ return flushUpdate(ctrl, nextProps, true)
+ }
+ }
+ return result
+ })
+}
+
+/**
+ * From an array of updates, get the map of `SpringValue` objects
+ * by their keys. Springs are created when any update wants to
+ * animate a new key.
+ *
+ * Springs created by `getSprings` are neither cached nor observed
+ * until they're given to `setSprings`.
+ */
+export function getSprings(
+ ctrl: Controller,
+ props?: OneOrMore>
+) {
+ const springs = { ...ctrl.springs }
+ if (props) {
+ each(toArray(props), (props: any) => {
+ if (is.und(props.keys)) {
+ props = createUpdate(props)
+ }
+ if (!is.obj(props.to)) {
+ // Avoid passing array/function to each spring.
+ props = { ...props, to: undefined }
+ }
+ prepareSprings(springs as any, props, key => {
+ return createSpring(key)
+ })
+ })
+ }
+ return springs
+}
+
+/**
+ * Tell a controller to manage the given `SpringValue` objects
+ * whose key is not already in use.
+ */
+export function setSprings(
+ ctrl: Controller,
+ springs: SpringValues
+) {
+ each(springs, (spring, key) => {
+ if (!ctrl.springs[key]) {
+ ctrl.springs[key] = spring
+ spring.addChild(ctrl)
+ }
+ })
+}
+
+function createSpring(key: string, observer?: FrameValue.Observer) {
+ const spring = new SpringValue()
+ spring.key = key
+ if (observer) {
+ spring.addChild(observer)
+ }
+ return spring
+}
+
+/**
+ * Ensure spring objects exist for each defined key.
+ *
+ * Using the `props`, the `Animated` node of each `SpringValue` may
+ * be created or updated.
+ */
+function prepareSprings(
+ springs: SpringValues,
+ props: ControllerQueue[number],
+ create: (key: string) => SpringValue
+) {
+ if (props.keys) {
+ each(props.keys, key => {
+ const spring = springs[key] || (springs[key] = create(key))
+ spring['_prepareNode'](props)
+ })
+ }
+}
+
+/**
+ * Ensure spring objects exist for each defined key, and attach the
+ * `ctrl` to them for observation.
+ *
+ * The queue is expected to contain `createUpdate` results.
+ */
+function prepareKeys(ctrl: Controller, queue: ControllerQueue[number][]) {
+ each(queue, props => {
+ prepareSprings(ctrl.springs, props, key => {
+ return createSpring(key, ctrl)
+ })
+ })
+}
diff --git a/packages/core/src/FrameValue.ts b/packages/core/src/FrameValue.ts
new file mode 100644
index 0000000000..75996ddeee
--- /dev/null
+++ b/packages/core/src/FrameValue.ts
@@ -0,0 +1,186 @@
+import { each, InterpolatorArgs, FluidValue, FluidObserver } from 'shared'
+import { getAnimated } from 'animated'
+import { deprecateInterpolate } from 'shared/deprecations'
+import * as G from 'shared/globals'
+
+import { Interpolation } from './Interpolation'
+
+export const isFrameValue = (value: any): value is FrameValue =>
+ value instanceof FrameValue
+
+let nextId = 1
+
+/**
+ * A kind of `FluidValue` that manages an `AnimatedValue` node.
+ *
+ * Its underlying value can be accessed and even observed.
+ */
+export abstract class FrameValue
+ extends FluidValue>
+ implements FluidObserver {
+ readonly id = nextId++
+
+ abstract key?: string
+ abstract get idle(): boolean
+
+ protected _priority = 0
+ protected _children = new Set>()
+
+ get priority() {
+ return this._priority
+ }
+ set priority(priority: number) {
+ if (this._priority != priority) {
+ this._priority = priority
+ this._onPriorityChange(priority)
+ }
+ }
+
+ /** Get the current value */
+ get(): T {
+ const node = getAnimated(this)
+ return node && node.getValue()
+ }
+
+ /** Create a spring that maps our value to another value */
+ to(...args: InterpolatorArgs) {
+ return G.to(this, args) as Interpolation
+ }
+
+ /** @deprecated Use the `to` method instead. */
+ interpolate(...args: InterpolatorArgs) {
+ deprecateInterpolate()
+ return G.to(this, args) as Interpolation
+ }
+
+ /** @internal */
+ abstract advance(dt: number): void
+
+ /** @internal */
+ addChild(child: FrameValue.Observer): void {
+ if (!this._children.size) this._attach()
+ this._children.add(child)
+ }
+
+ /** @internal */
+ removeChild(child: FrameValue.Observer): void {
+ this._children.delete(child)
+ if (!this._children.size) this._detach()
+ }
+
+ /** @internal */
+ onParentChange({ type }: FrameValue.Event) {
+ if (this.idle) {
+ // Start animating when a parent does.
+ if (type == 'start') {
+ this._reset()
+ this._start()
+ }
+ }
+ // Reset our animation state when a parent does, but only when
+ // our animation is active.
+ else if (type == 'reset') {
+ this._reset()
+ }
+ }
+
+ /** Called when the first child is added. */
+ protected _attach() {}
+
+ /** Called when the last child is removed. */
+ protected _detach() {}
+
+ /**
+ * Reset our animation state (eg: start values, velocity, etc)
+ * and tell our children to do the same.
+ *
+ * This is called when our goal value is changed during (or before)
+ * an animation.
+ */
+ protected _reset() {
+ this._emit({
+ type: 'reset',
+ parent: this,
+ })
+ }
+
+ /**
+ * Start animating if possible.
+ *
+ * Note: Be sure to call `_reset` first, or the animation will break.
+ * This method would like to call `_reset` for you, but that would
+ * interfere with paused animations.
+ */
+ protected _start() {
+ this._emit({
+ type: 'start',
+ parent: this,
+ })
+ }
+
+ /** Tell our children about our new value */
+ protected _onChange(value: T, idle = false) {
+ this._emit({
+ type: 'change',
+ parent: this,
+ value,
+ idle,
+ })
+ }
+
+ /** Tell our children about our new priority */
+ protected _onPriorityChange(priority: number) {
+ if (!this.idle) {
+ // Make the frameloop aware of our new priority.
+ G.frameLoop.start(this)
+ }
+ this._emit({
+ type: 'priority',
+ parent: this,
+ priority,
+ })
+ }
+
+ protected _emit(event: FrameValue.Event) {
+ // Clone "_children" so it can be safely mutated inside the loop.
+ each(Array.from(this._children), child => {
+ child.onParentChange(event)
+ })
+ }
+}
+
+export declare namespace FrameValue {
+ /** A parent changed its value */
+ interface ChangeEvent {
+ type: 'change'
+ value: T
+ idle: boolean
+ }
+
+ /** A parent changed its priority */
+ interface PriorityEvent {
+ type: 'priority'
+ priority: number
+ }
+
+ /** A parent reset the internal state of its current animation */
+ interface ResetEvent {
+ type: 'reset'
+ }
+
+ /** A parent entered the frameloop */
+ interface StartEvent {
+ type: 'start'
+ }
+
+ /** Events sent to children of `FrameValue` objects */
+ export type Event = { parent: FrameValue } & (
+ | ChangeEvent
+ | PriorityEvent
+ | ResetEvent
+ | StartEvent
+ )
+
+ /** An object that handles `FrameValue` events */
+ export type Observer = FluidObserver>
+}
diff --git a/packages/core/src/Interpolation.test.ts b/packages/core/src/Interpolation.test.ts
new file mode 100644
index 0000000000..9e53f36f21
--- /dev/null
+++ b/packages/core/src/Interpolation.test.ts
@@ -0,0 +1,13 @@
+describe('Interpolation', () => {
+ it.todo('can use a SpringValue')
+ it.todo('can use another Interpolation')
+ it.todo('can use a non-animated FluidValue')
+
+ describe('when multiple inputs change in the same frame', () => {
+ it.todo('only computes its value once')
+ })
+
+ describe('when an input resets its animation', () => {
+ it.todo('computes its value before the first frame')
+ })
+})
diff --git a/packages/core/src/Interpolation.ts b/packages/core/src/Interpolation.ts
new file mode 100644
index 0000000000..97922b244b
--- /dev/null
+++ b/packages/core/src/Interpolation.ts
@@ -0,0 +1,158 @@
+import {
+ is,
+ each,
+ isEqual,
+ toArray,
+ FluidValue,
+ createInterpolator,
+ InterpolatorArgs,
+ InterpolatorFn,
+ OneOrMore,
+ Arrify,
+} from 'shared'
+import * as G from 'shared/globals'
+
+import { FrameValue, isFrameValue } from './FrameValue'
+import {
+ getAnimated,
+ setAnimated,
+ AnimatedValue,
+ AnimatedArray,
+ AnimatedType,
+ getPayload,
+} from 'animated'
+
+/**
+ * An `Interpolation` is a memoized value that's computed whenever one of its
+ * `FluidValue` dependencies has its value changed.
+ *
+ * Other `FrameValue` objects can depend on this. For example, passing an
+ * `Interpolation` as the `to` prop of a `useSpring` call will trigger an
+ * animation toward the memoized value.
+ */
+export class Interpolation extends FrameValue {
+ /** Useful for debugging. */
+ key?: string
+
+ /** Equals false when in the frameloop */
+ idle = true
+
+ /** The function that maps inputs values to output */
+ readonly calc: InterpolatorFn
+
+ constructor(
+ /** The source of input values */
+ readonly source: OneOrMore,
+ args: InterpolatorArgs
+ ) {
+ super()
+ this.calc = createInterpolator(...args)
+
+ const value = this._get()
+ const nodeType: AnimatedType = is.arr(value) ? AnimatedArray : AnimatedValue
+
+ // Assume the computed value never changes type.
+ setAnimated(this, nodeType.create(value))
+ }
+
+ advance(_dt?: number) {
+ const value = this._get()
+ const oldValue = this.get()
+ if (!isEqual(value, oldValue)) {
+ getAnimated(this)!.setValue(value)
+ this._onChange(value, this.idle)
+ }
+ }
+
+ protected _get() {
+ const inputs: Arrify = is.arr(this.source)
+ ? this.source.map(node => node.get())
+ : (toArray(this.source.get()) as any)
+
+ return this.calc(...inputs)
+ }
+
+ protected _reset() {
+ each(getPayload(this)!, node => node.reset())
+ super._reset()
+ }
+
+ protected _start() {
+ this.idle = false
+
+ super._start()
+
+ if (G.skipAnimation) {
+ this.idle = true
+ this.advance()
+ } else {
+ G.frameLoop.start(this)
+ }
+ }
+
+ protected _attach() {
+ // Start observing our "source" once we have an observer.
+ let idle = true
+ let priority = 1
+ each(toArray(this.source), source => {
+ if (isFrameValue(source)) {
+ if (!source.idle) idle = false
+ priority = Math.max(priority, source.priority + 1)
+ }
+ source.addChild(this)
+ })
+ this.priority = priority
+ if (!idle) {
+ this._reset()
+ this._start()
+ }
+ }
+
+ protected _detach() {
+ // Stop observing our "source" once we have no observers.
+ each(toArray(this.source), source => {
+ source.removeChild(this)
+ })
+ // This removes us from the frameloop.
+ this.idle = true
+ }
+
+ /** @internal */
+ onParentChange(event: FrameValue.Event) {
+ // Ensure our start value respects our parent values, in case
+ // any of their animations were restarted with the "reset" prop.
+ if (event.type == 'start') {
+ this.advance()
+ }
+ // Change events are useful for (1) reacting to non-animated parents
+ // and (2) reacting to the last change in a parent animation.
+ else if (event.type == 'change') {
+ // If we're idle, we know for sure that this change is *not*
+ // caused by an animation.
+ if (this.idle) {
+ this.advance()
+ }
+ // Leave the frameloop when all parents are done animating.
+ else if (event.idle) {
+ this.idle = toArray(this.source).every(
+ (source: any) => source.idle !== false
+ )
+ if (this.idle) {
+ this.advance()
+ each(getPayload(this)!, node => {
+ node.done = true
+ })
+ }
+ }
+ }
+ // Ensure our priority is greater than all parents, which means
+ // our value won't be updated until our parents have updated.
+ else if (event.type == 'priority') {
+ this.priority = toArray(this.source).reduce(
+ (max, source: any) => Math.max(max, (source.priority || 0) + 1),
+ 0
+ )
+ }
+ super.onParentChange(event)
+ }
+}
diff --git a/packages/core/src/SpringContext.test.tsx b/packages/core/src/SpringContext.test.tsx
new file mode 100644
index 0000000000..9bed95538e
--- /dev/null
+++ b/packages/core/src/SpringContext.test.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+import { SpringContext } from './SpringContext'
+import { SpringValue } from './SpringValue'
+import { useSpring } from './hooks'
+
+describe('SpringContext', () => {
+ let t: SpringValue
+
+ const Child = () => {
+ t = useSpring({ t: 1, from: { t: 0 } }).t
+ return null
+ }
+
+ const update = createUpdater(props => (
+
+
+
+ ))
+
+ it('can cancel current animations', () => {
+ update({})
+ mockRaf.step()
+ expect(t.idle).toBeFalsy()
+ update({ cancel: true })
+ expect(t.idle).toBeTruthy()
+ })
+ it('can cancel future animations', async () => {
+ update({ cancel: true })
+ expect(t.idle).toBeTruthy()
+ const { cancelled } = await t.start(100)
+ expect(cancelled).toBeTruthy()
+ expect(t.idle).toBeTruthy()
+ expect(t.goal).toBe(0)
+ })
+
+ it('can pause current animations', () => {
+ update({})
+ mockRaf.step()
+ expect(t.idle).toBeFalsy()
+
+ update({ pause: true })
+ expect(t.idle).toBeTruthy()
+ expect(t.goal).toBe(1)
+
+ update({ pause: false })
+ expect(t.idle).toBeFalsy()
+ expect(t.goal).toBe(1)
+ })
+ it('can pause future animations', () => {
+ // Paused right away.
+ update({ pause: true })
+ expect(t.idle).toBeTruthy()
+ expect(t.goal).toBeUndefined()
+
+ // This update is paused too.
+ t.start(2)
+ expect(t.idle).toBeTruthy()
+ expect(t.goal).toBeUndefined()
+
+ // Let it roll.
+ update({ pause: false })
+ expect(t.idle).toBeFalsy()
+ // The `goal` is not 2, because the `useSpring` hook is
+ // executed by the SpringContext update.
+ expect(t.goal).toBe(1)
+ })
+
+ it('can make current animations immediate', () => {
+ update({})
+ mockRaf.step()
+ expect(t.idle).toBeFalsy()
+
+ update({ immediate: true })
+ mockRaf.step()
+
+ expect(t.idle).toBeTruthy()
+ expect(t.get()).toBe(1)
+ })
+ it('can make future animations immediate', () => {
+ update({ immediate: true })
+ mockRaf.step()
+
+ expect(t.idle).toBeTruthy()
+ expect(t.get()).toBe(1)
+
+ t.start(2)
+ mockRaf.step()
+
+ expect(t.idle).toBeTruthy()
+ expect(t.get()).toBe(2)
+ })
+})
+
+function createUpdater(Component: React.ComponentType) {
+ let result: RenderResult | undefined
+ afterEach(() => {
+ result = undefined
+ })
+ return (props: SpringContext) => {
+ const elem =
+ if (result) result.rerender(elem)
+ else result = render(elem)
+ return result
+ }
+}
diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx
new file mode 100644
index 0000000000..f8117c41c6
--- /dev/null
+++ b/packages/core/src/SpringContext.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { useContext, PropsWithChildren } from 'react'
+import { SpringConfig } from './types'
+import { useMemo } from './helpers'
+
+/**
+ * This context affects all new and existing `SpringValue` objects
+ * created with the hook API or the renderprops API.
+ */
+export interface SpringContext {
+ /** Pause all new and existing animations. */
+ pause?: boolean
+ /** Cancel all new and existing animations. */
+ cancel?: boolean
+ /** Force all new and existing animations to be immediate. */
+ immediate?: boolean
+ /** Set the default `config` prop for future animations. */
+ config?: SpringConfig
+}
+
+const ctx = React.createContext({})
+
+export const SpringContext = ({
+ children,
+ ...props
+}: PropsWithChildren) => {
+ const inherited = useContext(ctx)
+
+ // Memoize the context to avoid unwanted renders.
+ props = useMemo(() => ({ ...inherited, ...props }), [
+ inherited,
+ props.pause,
+ props.cancel,
+ props.immediate,
+ props.config,
+ ])
+
+ const { Provider } = ctx
+ return {children}
+}
+
+SpringContext.Provider = ctx.Provider
+SpringContext.Consumer = ctx.Consumer
+
+/** Get the current values of nearest `SpringContext` component. */
+export const useSpringContext = () => useContext(ctx)
diff --git a/packages/core/src/SpringHandle.ts b/packages/core/src/SpringHandle.ts
new file mode 100644
index 0000000000..d0465d9f8a
--- /dev/null
+++ b/packages/core/src/SpringHandle.ts
@@ -0,0 +1,54 @@
+import { each, Lookup, UnknownProps } from 'shared'
+import { Controller } from './Controller'
+import { getProps } from './helpers'
+import {
+ SpringStartFn,
+ SpringStopFn,
+ SpringPauseFn,
+ SpringResumeFn,
+ SpringsUpdate,
+} from './types'
+
+/**
+ * The object attached to the `ref` prop by the `useSprings` hook.
+ *
+ * The `T` parameter should only contain animated props.
+ */
+export interface SpringHandle {
+ controllers: ReadonlyArray>
+ update: (props: SpringsUpdate) => SpringHandle
+ start: SpringStartFn
+ stop: SpringStopFn
+ pause: SpringPauseFn
+ resume: SpringResumeFn
+}
+
+/** Create an imperative API for manipulating an array of `Controller` objects. */
+export const SpringHandle = {
+ create: (getControllers: () => Controller[]): SpringHandle => ({
+ get controllers() {
+ return getControllers()
+ },
+ update(props) {
+ each(getControllers(), (ctrl, i) => {
+ ctrl.update(getProps(props, i, ctrl))
+ })
+ return this
+ },
+ async start(props) {
+ const results = await Promise.all(
+ getControllers().map((ctrl, i) => {
+ const update = getProps(props, i, ctrl)
+ return ctrl.start(update)
+ })
+ )
+ return {
+ value: results.map(result => result.value),
+ finished: results.every(result => result.finished),
+ }
+ },
+ stop: keys => each(getControllers(), ctrl => ctrl.stop(keys)),
+ pause: keys => each(getControllers(), ctrl => ctrl.pause(keys)),
+ resume: keys => each(getControllers(), ctrl => ctrl.resume(keys)),
+ }),
+}
diff --git a/packages/core/src/SpringPhase.ts b/packages/core/src/SpringPhase.ts
new file mode 100644
index 0000000000..cf424475fd
--- /dev/null
+++ b/packages/core/src/SpringPhase.ts
@@ -0,0 +1,22 @@
+// TODO: use "const enum" when Babel supports it
+export type SpringPhase =
+ | typeof DISPOSED
+ | typeof CREATED
+ | typeof IDLE
+ | typeof PAUSED
+ | typeof ACTIVE
+
+/** The spring has not animated yet */
+export const CREATED = 'CREATED'
+
+/** The spring has animated before */
+export const IDLE = 'IDLE'
+
+/** The spring is animating */
+export const ACTIVE = 'ACTIVE'
+
+/** The spring is frozen in time */
+export const PAUSED = 'PAUSED'
+
+/** The spring cannot be animated */
+export const DISPOSED = 'DISPOSED'
diff --git a/packages/core/src/SpringValue.test.ts b/packages/core/src/SpringValue.test.ts
new file mode 100644
index 0000000000..c3573afe76
--- /dev/null
+++ b/packages/core/src/SpringValue.test.ts
@@ -0,0 +1,715 @@
+import { SpringValue } from './SpringValue'
+import { FrameValue } from './FrameValue'
+import { flushMicroTasks } from 'flush-microtasks'
+import { Globals } from 'shared'
+
+const frameLength = 1000 / 60
+
+describe('SpringValue', () => {
+ it('can animate a number', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, {
+ config: { duration: 10 * frameLength },
+ })
+ await advanceUntilIdle()
+ const frames = getFrames(spring)
+ expect(frames).toMatchSnapshot()
+ })
+
+ it('can animate a string', async () => {
+ const spring = new SpringValue()
+ const promise = spring.start({
+ to: '10px 20px',
+ from: '0px 0px',
+ config: { duration: 10 * frameLength },
+ })
+ await advanceUntilIdle()
+ const frames = getFrames(spring)
+ expect(frames).toMatchSnapshot()
+ const { finished } = await promise
+ expect(finished).toBeTruthy()
+ })
+
+ // FIXME: This test fails.
+ xit('animates a number the same as a numeric string', async () => {
+ const spring1 = new SpringValue(0)
+ spring1.start(10)
+
+ await advanceUntilIdle()
+ const frames = getFrames(spring1).map(n => n + 'px')
+
+ const spring2 = new SpringValue('0px')
+ spring2.start('10px')
+
+ await advanceUntilIdle()
+ expect(frames).toEqual(getFrames(spring2))
+ })
+
+ // FIXME: This test fails.
+ xit('can animate an array of numbers', async () => {
+ const spring = new SpringValue()
+ spring.start({
+ to: [10, 20],
+ from: [0, 0],
+ config: { duration: 10 * frameLength },
+ })
+ await advanceUntilIdle()
+ const frames = getFrames(spring)
+ expect(frames).not.toEqual([])
+ })
+
+ describeProps()
+ describeMethods()
+ describeGlobals()
+
+ describeTarget('another SpringValue', from => {
+ const node = new SpringValue(from)
+ return {
+ node,
+ set: node.set.bind(node),
+ start: node.start.bind(node),
+ reset: node.reset.bind(node),
+ }
+ })
+
+ describeTarget('an Interpolation', from => {
+ const parent = new SpringValue(from - 1)
+ const node = parent.to(n => n + 1)
+ return {
+ node,
+ set: n => parent.set(n - 1),
+ start: n => parent.start(n - 1),
+ reset: parent.reset.bind(parent),
+ }
+ })
+
+ // No-op updates don't change the goal value.
+ describe('no-op updates', () => {
+ it('resolves when the animation is finished', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1)
+
+ // Create a no-op update.
+ const resolve = jest.fn()
+ spring.start(1).then(resolve)
+
+ await flushMicroTasks()
+ expect(resolve).not.toBeCalled()
+
+ await advanceUntilIdle()
+ expect(resolve).toBeCalled()
+ })
+ })
+})
+
+function describeProps() {
+ describeToProp()
+ describeFromProp()
+ describeResetProp()
+ describeDefaultProp()
+ describeReverseProp()
+ describeImmediateProp()
+ describeConfigProp()
+ describeLoopProp()
+ describeDelayProp()
+}
+
+function describeToProp() {
+ describe('when "to" prop is changed', () => {
+ it.todo('resolves the "start" promise with (finished: false)')
+ it.todo('avoids calling the "onStart" prop')
+ it.todo('avoids calling the "onRest" prop')
+ })
+
+ describe('when "to" prop equals current value', () => {
+ it('cancels any pending animation', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1)
+
+ // Prevent the animation to 1 (which hasn't started yet)
+ spring.start(0)
+
+ await advanceUntilIdle()
+ expect(getFrames(spring)).toEqual([])
+ })
+
+ it('avoids interrupting an active animation', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1)
+ await advance()
+
+ const goal = spring.get()
+ spring.start(goal)
+ expect(spring.idle).toBeFalsy()
+
+ await advanceUntilIdle()
+ expect(spring.get()).toBe(goal)
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+ })
+
+ describe('when "to" prop is a function', () => {
+ describe('and "from" prop is defined', () => {
+ it('stops the active animation before "to" is called', () => {
+ const spring = new SpringValue({ from: 0, to: 1 })
+ mockRaf.step()
+
+ expect.assertions(1)
+ spring.start({
+ from: 2,
+ to: () => {
+ expect(spring.get()).toBe(2)
+ },
+ })
+ })
+ })
+ })
+}
+
+function describeFromProp() {
+ describe('when "from" prop is defined', () => {
+ it.todo('controls the start value')
+ })
+}
+
+function describeResetProp() {
+ describe('when "reset" prop is true', () => {
+ it('calls "onRest" before jumping back to its "from" value', async () => {
+ const onRest = jest.fn((result: any) => {
+ expect(result.value).not.toBe(0)
+ })
+
+ const spring = new SpringValue({ from: 0, to: 1, onRest })
+ mockRaf.step()
+
+ spring.start({ reset: true })
+
+ expect(onRest).toHaveBeenCalled()
+ expect(spring.get()).toBe(0)
+ })
+
+ it.todo('resolves the "start" promise with (finished: false)')
+ it.todo('calls the "onRest" prop with (finished: false)')
+ })
+}
+
+function describeDefaultProp() {
+ // The hook API always uses { default: true } for render-driven updates.
+ // Some props can have default values (eg: onRest, config, etc), and
+ // other props may behave differently when { default: true } is used.
+ describe('when "default" prop is true', () => {
+ describe('and "from" prop is changed', () => {
+ describe('before the first animation', () => {
+ it('updates the current value', () => {
+ const props = { default: true, from: 1, to: 1 }
+ const spring = new SpringValue(props)
+
+ expect(spring.get()).toBe(1)
+ expect(spring.idle).toBeTruthy()
+
+ props.from = 0
+ spring.start(props)
+
+ expect(spring.get()).not.toBe(1)
+ expect(spring.idle).toBeFalsy()
+ })
+ })
+
+ describe('after the first animation', () => {
+ it('does not start animating', async () => {
+ const props = { default: true, from: 0, to: 2 }
+ const spring = new SpringValue(props)
+ await advanceUntilIdle()
+
+ props.from = 1
+ spring.start(props)
+
+ expect(spring.get()).toBe(2)
+ expect(spring.idle).toBeTruthy()
+ expect(spring.animation.from).toBe(1)
+ })
+
+ describe('and "reset" prop is true', () => {
+ it('starts at the "from" prop', async () => {
+ const props: any = { default: true, from: 0, to: 2 }
+ const spring = new SpringValue(props)
+ await advanceUntilIdle()
+
+ props.from = 1
+ props.reset = true
+ spring.start(props)
+
+ expect(spring.animation.from).toBe(1)
+ expect(spring.idle).toBeFalsy()
+ })
+ })
+ })
+ })
+ })
+
+ describe('when "default" prop is false', () => {
+ describe('and "from" prop is defined', () => {
+ it('updates the current value', () => {
+ const spring = new SpringValue(0)
+ spring.start({ from: 1 })
+ expect(spring.get()).toBe(1)
+ })
+ it('updates the "from" value', () => {
+ const spring = new SpringValue(0)
+ spring.start({ from: 1 })
+ expect(spring.animation.from).toBe(1)
+ })
+
+ describe('and "to" prop is undefined', () => {
+ it('updates the "to" value', () => {
+ const spring = new SpringValue(0)
+ spring.start({ from: 1 })
+ expect(spring.animation.to).toBe(1)
+ })
+ it('stops the active animation', async () => {
+ const spring = new SpringValue(0)
+
+ // This animation will be stopped.
+ const promise = spring.start({ from: 0, to: 1 })
+
+ mockRaf.step()
+ const value = spring.get()
+
+ spring.start({ from: 0 })
+ expect(spring.idle).toBeTruthy()
+ expect(spring.animation.to).toBe(0)
+
+ expect(await promise).toMatchObject({
+ value,
+ finished: false,
+ })
+ })
+ })
+ })
+ })
+}
+
+function describeReverseProp() {
+ describe('when "reverse" prop is true', () => {
+ it('swaps the "to" and "from" props', async () => {
+ const spring = new SpringValue()
+ spring.start({ from: 0, to: 1, reverse: true })
+
+ await advanceUntilIdle()
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+
+ it('works when "to" and "from" were set by an earlier update', async () => {
+ // TODO: remove the need for ""
+ const spring = new SpringValue({ from: 0, to: 1 })
+ await advanceUntilValue(spring, 0.5)
+
+ spring.start({ reverse: true })
+ expect(spring.animation).toMatchObject({
+ from: 1,
+ to: 0,
+ })
+
+ await advanceUntilIdle()
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+
+ it('works when "from" was set by an earlier update', async () => {
+ const spring = new SpringValue(0)
+ expect(spring.animation.from).toBe(0)
+ spring.start({ to: 1, reverse: true })
+
+ await advanceUntilIdle()
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+
+ it('preserves the reversal for future updates', async () => {
+ const spring = new SpringValue(0)
+ spring.start({ to: 1, reverse: true })
+ expect(spring.animation).toMatchObject({
+ to: 0,
+ from: 1,
+ })
+
+ await advanceUntilIdle()
+
+ spring.start({ to: 2 })
+ expect(spring.animation).toMatchObject({
+ to: 2,
+ from: 1,
+ })
+ })
+ })
+}
+
+function describeImmediateProp() {
+ describe('when "immediate" prop is true', () => {
+ it.todo('still resolves the "start" promise')
+ it.todo('never calls the "onStart" prop')
+ it.todo('never calls the "onRest" prop')
+
+ it('stops animating', async () => {
+ const spring = new SpringValue(0)
+ spring.start(2)
+ await advanceUntilValue(spring, 1)
+
+ // Use "immediate" to emulate the "stop" method. (see #884)
+ const value = spring.get()
+ spring.start(value, { immediate: true })
+
+ // The "immediate" prop waits until the next frame before going idle.
+ mockRaf.step()
+
+ expect(spring.idle).toBeTruthy()
+ expect(spring.get()).toBe(value)
+ })
+ })
+}
+
+function describeConfigProp() {
+ describe('the "config" prop', () => {
+ describe('when "damping" is 1.0', () => {
+ it('should prevent bouncing', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, {
+ config: { frequency: 1.5, damping: 1 },
+ })
+ await advanceUntilIdle()
+ expect(countBounces(spring)).toBe(0)
+ })
+ })
+ describe('when "damping" is less than 1.0', () => {
+ // FIXME: This test fails.
+ xit('should bounce', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, {
+ config: { frequency: 1.5, damping: 1 },
+ })
+ await advanceUntilIdle()
+ expect(countBounces(spring)).toBeGreaterThan(0)
+ })
+ })
+ })
+}
+
+function describeLoopProp() {
+ describe('the "loop" prop', () => {
+ it('resets the animation once finished', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, {
+ loop: true,
+ config: { duration: frameLength * 3 },
+ })
+
+ await advanceUntilValue(spring, 1)
+ const firstRun = getFrames(spring)
+ expect(firstRun).toMatchSnapshot()
+
+ // The loop resets the value before the next frame.
+ // FIXME: Reset on next frame instead?
+ expect(spring.get()).toBe(0)
+
+ await advanceUntilValue(spring, 1)
+ expect(getFrames(spring)).toEqual(firstRun)
+ })
+
+ it('can pass a custom delay', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, {
+ loop: { reset: true, delay: 1000 },
+ })
+
+ await advanceUntilValue(spring, 1)
+ expect(spring.get()).toBe(1)
+
+ mockRaf.step({ time: 1000 })
+ expect(spring.get()).toBeLessThan(1)
+
+ await advanceUntilValue(spring, 1)
+ expect(spring.get()).toBe(1)
+ })
+
+ it('supports deferred evaluation', async () => {
+ const spring = new SpringValue(0)
+
+ let loop: any = true
+ spring.start(1, { loop: () => loop })
+
+ await advanceUntilValue(spring, 1)
+ expect(spring.idle).toBeFalsy()
+ expect(spring.get()).toBeLessThan(1)
+
+ loop = { reset: true, delay: 1000 }
+ await advanceUntilValue(spring, 1)
+ expect(spring.idle).toBeTruthy()
+ expect(spring.get()).toBe(1)
+
+ mockRaf.step({ time: 1000 })
+ expect(spring.idle).toBeFalsy()
+ expect(spring.get()).toBeLessThan(1)
+
+ loop = false
+ await advanceUntilValue(spring, 1)
+ expect(spring.idle).toBeTruthy()
+ expect(spring.get()).toBe(1)
+ })
+
+ it('does not affect later updates', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, { loop: true })
+
+ await advanceUntilValue(spring, 0.5)
+ spring.start(2)
+
+ await advanceUntilValue(spring, 2)
+ expect(spring.idle).toBeTruthy()
+ })
+
+ it('can be combined with the "reset" prop', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1)
+
+ await advanceUntilIdle()
+ spring.start({ reset: true, loop: true })
+ expect(spring.get()).toBe(0)
+
+ await advanceUntilValue(spring, 1)
+ expect(spring.get()).toBe(0)
+ expect(spring.idle).toBeFalsy()
+ })
+
+ it('can be combined with the "reverse" prop', async () => {
+ const spring = new SpringValue(0)
+ spring.start(1, { config: { duration: frameLength * 3 } })
+
+ await advanceUntilIdle()
+ spring.start({
+ loop: { reverse: true },
+ })
+
+ await advanceUntilValue(spring, 0)
+ await advanceUntilValue(spring, 1)
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+ })
+}
+
+function describeDelayProp() {
+ describe('the "delay" prop', () => {
+ // "Temporal prevention" means a delayed update can be cancelled by an
+ // earlier update. This removes the need for explicit delay cancellation.
+ it('allows the update to be temporally prevented', async () => {
+ const spring = new SpringValue(0)
+ const anim = spring.animation
+
+ spring.start(1, { config: { duration: 1000 } })
+
+ // This update will be ignored, because the next "start" call updates
+ // the "to" prop before this update's delay is finished. This update
+ // would *not* be ignored be if its "to" prop was undefined.
+ spring.start(2, { delay: 500, immediate: true })
+
+ // This update won't be affected by the previous update.
+ spring.start(0, { delay: 100, config: { duration: 1000 } })
+
+ expect(anim.to).toBe(1)
+ await advanceByTime(100)
+ expect(anim.to).toBe(0)
+
+ await advanceByTime(400)
+ expect(anim.immediate).toBeFalsy()
+ expect(anim.to).toBe(0)
+ })
+ })
+}
+
+function describeMethods() {
+ describe('"set" method', () => {
+ it('stops the active animation', async () => {
+ const spring = new SpringValue(0)
+ const promise = spring.start(1)
+
+ await advanceUntilValue(spring, 0.5)
+ spring.set(2)
+
+ expect(spring.idle).toBeTruthy()
+ expect(await promise).toMatchObject({
+ finished: false,
+ value: 2,
+ })
+ })
+
+ describe('when a new value is passed', () => {
+ it('calls the "onChange" prop', () => {
+ const onChange = jest.fn()
+ const spring = new SpringValue(0, { onChange })
+ spring.set(1)
+ expect(onChange).toBeCalledWith(1, spring)
+ })
+ it.todo('wraps the "onChange" call with "batchedUpdates"')
+ })
+
+ describe('when the current value is passed', () => {
+ it('skips the "onChange" call', () => {
+ const onChange = jest.fn()
+ const spring = new SpringValue(0, { onChange })
+ spring.set(0)
+ expect(onChange).not.toBeCalled()
+ })
+ })
+ })
+}
+
+/** The minimum requirements for testing a dynamic target */
+type OpaqueTarget = {
+ node: FrameValue
+ set: (value: number) => any
+ start: (value: number) => Promise
+ reset: () => void
+}
+
+function describeTarget(name: string, create: (from: number) => OpaqueTarget) {
+ describe('when our target is ' + name, () => {
+ let spring: SpringValue
+ let target: OpaqueTarget
+ beforeEach(() => {
+ spring = new SpringValue(0)
+ target = create(1)
+ })
+
+ it('animates toward the current value', async () => {
+ spring.start({ to: target.node })
+ expect(spring.priority).toBeGreaterThan(target.node.priority)
+ expect(spring.animation).toMatchObject({
+ to: target.node,
+ toValues: null,
+ })
+
+ await advanceUntilIdle()
+ expect(spring.get()).toBe(target.node.get())
+ })
+
+ it.todo('preserves its "onRest" prop between animations')
+
+ it('can change its target while animating', async () => {
+ spring.start({ to: target.node })
+ await advanceUntilValue(spring, target.node.get() / 2)
+
+ spring.start(0)
+ expect(spring.priority).toBe(0)
+ expect(spring.animation).toMatchObject({
+ to: 0,
+ toValues: [0],
+ })
+
+ await advanceUntilIdle()
+ expect(spring.get()).toBe(0)
+ })
+
+ describe('when target is done animating', () => {
+ it('keeps animating until the target is reached', async () => {
+ spring.start({ to: target.node })
+ target.start(1.1)
+
+ await advanceUntil(() => target.node.idle)
+ expect(spring.idle).toBeFalsy()
+
+ await advanceUntilIdle()
+ expect(spring.idle).toBeTruthy()
+ expect(spring.get()).toBe(target.node.get())
+ })
+ })
+
+ describe('when target animates after we go idle', () => {
+ it('starts animating', async () => {
+ spring.start({ to: target.node })
+ await advanceUntil(() => spring.idle)
+
+ target.start(2)
+ await advanceUntilIdle()
+
+ expect(getFrames(spring).length).toBeGreaterThan(1)
+ expect(spring.get()).toBe(target.node.get())
+ })
+ })
+
+ describe('when target has its value set (not animated)', () => {
+ it('animates toward the new value', async () => {
+ spring.start({ to: target.node })
+ await advanceUntilIdle()
+
+ target.set(2)
+ await advanceUntilIdle()
+
+ expect(getFrames(spring).length).toBeGreaterThan(1)
+ expect(spring.get()).toBe(target.node.get())
+ })
+ })
+
+ describe('when target resets its animation', () => {
+ it('keeps animating', async () => {
+ spring.start({ to: target.node })
+ target.start(2)
+
+ await advanceUntilValue(target.node, 1.5)
+ expect(target.node.idle).toBeFalsy()
+
+ target.reset()
+ expect(target.node.get()).toBe(1)
+
+ await advanceUntilIdle()
+ const frames = getFrames(spring)
+
+ expect(frames.length).toBeGreaterThan(1)
+ expect(spring.get()).toBe(target.node.get())
+ })
+ })
+
+ // FIXME: These tests fail.
+ xdescribe('when animating a string', () => {
+ it('animates as expected', async () => {
+ const spring = new SpringValue('yellow')
+ spring.start('red', {
+ config: { duration: frameLength * 3 },
+ })
+
+ await advanceUntilIdle()
+ spring.start({
+ loop: true,
+ reverse: true,
+ })
+
+ await advanceUntilValue(spring, 'yellow')
+ await advanceUntilValue(spring, 'red')
+ await advanceUntilValue(spring, 'yellow')
+ expect(getFrames(spring)).toMatchSnapshot()
+ })
+ })
+
+ describe('when animating an array', () => {
+ it.todo('animates as expected')
+ })
+ })
+}
+
+function describeGlobals() {
+ const defaults = { ...Globals }
+ const resetGlobals = () => Globals.assign(defaults)
+ describe('"skipAnimation" global', () => {
+ afterEach(resetGlobals)
+ it('still calls "onStart", "onChange", and "onRest" props', async () => {
+ const spring = new SpringValue(0)
+
+ const onStart = jest.fn()
+ const onChange = jest.fn()
+ const onRest = jest.fn()
+
+ Globals.assign({ skipAnimation: true })
+ await spring.start(1, { onStart, onChange, onRest })
+
+ expect(onStart).toBeCalledTimes(1)
+ expect(onChange).toBeCalledTimes(1)
+ expect(onRest).toBeCalledTimes(1)
+ })
+ })
+}
diff --git a/packages/core/src/SpringValue.ts b/packages/core/src/SpringValue.ts
new file mode 100644
index 0000000000..9cb0ef85f4
--- /dev/null
+++ b/packages/core/src/SpringValue.ts
@@ -0,0 +1,1073 @@
+import {
+ is,
+ each,
+ noop,
+ flush,
+ isEqual,
+ toArray,
+ FluidValue,
+ getFluidConfig,
+ getFluidValue,
+ isAnimatedString,
+ Animatable,
+} from 'shared'
+import {
+ AnimatedType,
+ AnimatedValue,
+ AnimatedString,
+ AnimatedArray,
+ getPayload,
+ getAnimated,
+ setAnimated,
+ Animated,
+} from 'animated'
+import * as G from 'shared/globals'
+
+import { Animation } from './Animation'
+import { mergeConfig } from './AnimationConfig'
+import { scheduleProps } from './scheduleProps'
+import { runAsync, RunAsyncState, RunAsyncProps, cancelAsync } from './runAsync'
+import {
+ callProp,
+ computeGoal,
+ matchProp,
+ inferTo,
+ mergeDefaultProps,
+ getDefaultProps,
+ getDefaultProp,
+} from './helpers'
+import { FrameValue, isFrameValue } from './FrameValue'
+import {
+ SpringPhase,
+ CREATED,
+ IDLE,
+ ACTIVE,
+ PAUSED,
+ DISPOSED,
+} from './SpringPhase'
+import {
+ AnimationRange,
+ EventProp,
+ OnRest,
+ SpringDefaultProps,
+ SpringUpdate,
+ VelocityProp,
+ AnimationResolver,
+} from './types'
+import {
+ AsyncResult,
+ getCombinedResult,
+ getCancelledResult,
+ getFinishedResult,
+ getNoopResult,
+} from './AnimationResult'
+
+declare const console: any
+
+/**
+ * Only numbers, strings, and arrays of numbers/strings are supported.
+ * Non-animatable strings are also supported.
+ */
+export class SpringValue extends FrameValue {
+ /** The property name used when `to` or `from` is an object. Useful when debugging too. */
+ key?: string
+
+ /** The animation state */
+ animation = new Animation()
+
+ /** The queue of pending props */
+ queue?: SpringUpdate[]
+
+ /** The lifecycle phase of this spring */
+ protected _phase: SpringPhase = CREATED
+
+ /** The state for `runAsync` calls */
+ protected _state: RunAsyncState = {
+ pauseQueue: new Set(),
+ resumeQueue: new Set(),
+ }
+
+ /** Some props have customizable default values */
+ protected _defaultProps = {} as SpringDefaultProps
+
+ /** The counter for tracking `scheduleProps` calls */
+ protected _lastCallId = 0
+
+ /** The last `scheduleProps` call that changed the `to` prop */
+ protected _lastToId = 0
+
+ constructor(from: Exclude, props?: SpringUpdate)
+ constructor(props?: SpringUpdate)
+ constructor(arg1?: any, arg2?: any) {
+ super()
+ if (!is.und(arg1) || !is.und(arg2)) {
+ const props = is.obj(arg1) ? { ...arg1 } : { ...arg2, from: arg1 }
+ props.default = true
+ this.start(props)
+ }
+ }
+
+ get idle() {
+ return !this.is(ACTIVE) && !this._state.asyncTo
+ }
+
+ get goal() {
+ return getFluidValue(this.animation.to)
+ }
+
+ get velocity(): VelocityProp {
+ const node = getAnimated(this)!
+ return (node instanceof AnimatedValue
+ ? node.lastVelocity || 0
+ : node.getPayload().map(node => node.lastVelocity || 0)) as any
+ }
+
+ /** Advance the current animation by a number of milliseconds */
+ advance(dt: number) {
+ let idle = true
+ let changed = false
+
+ const anim = this.animation
+ let { config, toValues } = anim
+
+ const payload = getPayload(anim.to)
+ if (!payload) {
+ const toConfig = getFluidConfig(anim.to)
+ if (toConfig) {
+ toValues = toArray(toConfig.get())
+ }
+ }
+
+ anim.values.forEach((node, i) => {
+ if (node.done) return
+
+ // The "anim.toValues" array must exist when no parent exists.
+ let to = payload ? payload[i].lastPosition : toValues![i]
+
+ let finished = anim.immediate
+ let position = to
+
+ if (!finished) {
+ position = node.lastPosition
+
+ // Loose springs never move.
+ if (config.tension <= 0) {
+ node.done = true
+ return
+ }
+
+ const elapsed = (node.elapsedTime += dt)
+ const from = anim.fromValues[i]
+
+ const v0 =
+ node.v0 != null
+ ? node.v0
+ : (node.v0 = is.arr(config.velocity)
+ ? config.velocity[i]
+ : config.velocity)
+
+ let velocity: number
+
+ // Duration easing
+ if (!is.und(config.duration)) {
+ let p = config.progress || 0
+ if (config.duration <= 0) p = 1
+ else p += (1 - p) * Math.min(1, elapsed / config.duration)
+
+ position = from + config.easing(p) * (to - from)
+ velocity = (position - node.lastPosition) / dt
+
+ finished = p == 1
+ }
+
+ // Decay easing
+ else if (config.decay) {
+ const decay = config.decay === true ? 0.998 : config.decay
+ const e = Math.exp(-(1 - decay) * elapsed)
+
+ position = from + (v0 / (1 - decay)) * (1 - e)
+ finished = Math.abs(node.lastPosition - position) < 0.1
+
+ // derivative of position
+ velocity = v0 * e
+ }
+
+ // Spring easing
+ else {
+ velocity = node.lastVelocity == null ? v0 : node.lastVelocity
+
+ /** The smallest distance from a value before being treated like said value. */
+ const precision =
+ config.precision ||
+ (from == to ? 0.005 : Math.min(1, Math.abs(to - from) * 0.001))
+
+ /** The velocity at which movement is essentially none */
+ const restVelocity = config.restVelocity || precision / 10
+
+ // Bouncing is opt-in (not to be confused with overshooting)
+ const bounceFactor = config.clamp ? 0 : config.bounce!
+ const canBounce = !is.und(bounceFactor)
+
+ /** When `true`, the value is increasing over time */
+ const isGrowing = from == to ? node.v0 > 0 : from < to
+
+ /** When `true`, the velocity is considered moving */
+ let isMoving!: boolean
+
+ /** When `true`, the velocity is being deflected or clamped */
+ let isBouncing = false
+
+ const step = 1 // 1ms
+ const numSteps = Math.ceil(dt / step)
+ for (let n = 0; n < numSteps; ++n) {
+ isMoving = Math.abs(velocity) > restVelocity
+
+ if (!isMoving) {
+ finished = Math.abs(to - position) <= precision
+ if (finished) {
+ break
+ }
+ }
+
+ if (canBounce) {
+ isBouncing = position == to || position > to == isGrowing
+
+ // Invert the velocity with a magnitude, or clamp it.
+ if (isBouncing) {
+ velocity = -velocity * bounceFactor
+ position = to
+ }
+ }
+
+ const springForce = -config.tension * 0.000001 * (position - to)
+ const dampingForce = -config.friction * 0.001 * velocity
+ const acceleration = (springForce + dampingForce) / config.mass // pt/ms^2
+
+ velocity = velocity + acceleration * step // pt/ms
+ position = position + velocity * step
+ }
+ }
+
+ node.lastVelocity = velocity
+
+ if (Number.isNaN(position)) {
+ console.warn(`Got NaN while animating:`, this)
+ finished = true
+ }
+ }
+
+ // Parent springs must finish before their children can.
+ if (payload && !payload[i].done) {
+ finished = false
+ }
+
+ if (finished) {
+ node.done = true
+ } else {
+ idle = false
+ }
+
+ if (node.setValue(position, config.round)) {
+ changed = true
+ }
+ })
+
+ if (idle) {
+ this.finish()
+ } else if (changed) {
+ this._onChange(this.get())
+ }
+ return idle
+ }
+
+ /** Check the current phase */
+ is(phase: SpringPhase) {
+ return this._phase == phase
+ }
+
+ /** Set the current value, while stopping the current animation */
+ set(value: T | FluidValue) {
+ G.batchedUpdates(() => {
+ this._focus(value)
+ if (this._set(value)) {
+ // Ensure change observers are notified. When active,
+ // the "_stop" method handles this.
+ if (!this.is(ACTIVE)) {
+ return this._onChange(this.get(), true)
+ }
+ }
+ this._stop()
+ })
+ return this
+ }
+
+ /**
+ * Freeze the active animation in time.
+ * This does nothing when not animating.
+ */
+ pause() {
+ checkDisposed(this, 'pause')
+ if (!this.is(PAUSED)) {
+ this._phase = PAUSED
+ flush(this._state.pauseQueue, onPause => onPause())
+ }
+ }
+
+ /** Resume the animation if paused. */
+ resume() {
+ checkDisposed(this, 'resume')
+ if (this.is(PAUSED)) {
+ this._start()
+ flush(this._state.resumeQueue, onResume => onResume())
+ }
+ }
+
+ /**
+ * Skip to the end of the current animation.
+ *
+ * All `onRest` callbacks are passed `{finished: true}`
+ */
+ finish(to?: T | FluidValue) {
+ this.resume()
+ if (this.is(ACTIVE)) {
+ const anim = this.animation
+
+ // Decay animations have an implicit goal.
+ if (!anim.config.decay && is.und(to)) {
+ to = anim.to
+ }
+
+ // Set the value if we can.
+ if (!is.und(to)) {
+ this._set(to)
+ }
+
+ G.batchedUpdates(() => {
+ // Ensure the "onStart" and "onRest" props are called.
+ if (!anim.changed) {
+ anim.changed = true
+ if (anim.onStart) {
+ anim.onStart(this)
+ }
+ }
+
+ // Exit the frameloop.
+ this._stop()
+ })
+ }
+ return this
+ }
+
+ /** Push props into the pending queue. */
+ update(props: SpringUpdate) {
+ checkDisposed(this, 'update')
+ const queue = this.queue || (this.queue = [])
+ queue.push(props)
+ return this
+ }
+
+ /**
+ * Update this value's animation using the queue of pending props,
+ * and unpause the current animation (if one is frozen).
+ *
+ * When arguments are passed, a new animation is created, and the
+ * queued animations are left alone.
+ */
+ start(): AsyncResult
+
+ start(props: SpringUpdate): AsyncResult
+
+ start(to: Animatable, props?: SpringUpdate): AsyncResult
+
+ async start(to?: SpringUpdate | Animatable, arg2?: SpringUpdate) {
+ checkDisposed(this, 'start')
+
+ let queue: SpringUpdate[]
+ if (!is.und(to)) {
+ queue = [is.obj(to) ? (to as any) : { ...arg2, to }]
+ } else {
+ queue = this.queue || []
+ this.queue = []
+ }
+
+ const results = await Promise.all(queue.map(props => this._update(props)))
+ return getCombinedResult(this, results)
+ }
+
+ /**
+ * Stop the current animation, and cancel any delayed updates.
+ *
+ * Pass `true` to call `onRest` with `cancelled: true`.
+ */
+ stop(cancel?: boolean) {
+ if (!this.is(DISPOSED)) {
+ cancelAsync(this._state, this._lastCallId)
+
+ // Ensure the `to` value equals the current value.
+ this._focus(this.get())
+
+ // Exit the frameloop and notify `onRest` listeners.
+ G.batchedUpdates(() => this._stop(cancel))
+ }
+ return this
+ }
+
+ /** Restart the animation. */
+ reset() {
+ this._update({ reset: true })
+ }
+
+ /** Prevent future animations, and stop the current animation */
+ dispose() {
+ if (!this.is(DISPOSED)) {
+ if (this.animation) {
+ // Prevent "onRest" calls when disposed.
+ this.animation.onRest = []
+ }
+ this.stop()
+ this._phase = DISPOSED
+ }
+ }
+
+ /** @internal */
+ onParentChange(event: FrameValue.Event) {
+ super.onParentChange(event)
+ if (event.type == 'change') {
+ if (!this.is(ACTIVE)) {
+ this._reset()
+ if (!this.is(PAUSED)) {
+ this._start()
+ }
+ }
+ } else if (event.type == 'priority') {
+ this.priority = event.priority + 1
+ }
+ }
+
+ /**
+ * Parse the `to` and `from` range from the given `props` object.
+ *
+ * This also ensures the initial value is available to animated components
+ * during the render phase.
+ */
+ protected _prepareNode({
+ to,
+ from,
+ reverse,
+ }: {
+ to?: any
+ from?: any
+ reverse?: boolean
+ }) {
+ const key = this.key || ''
+
+ to = !is.obj(to) || getFluidConfig(to) ? to : to[key]
+ from = !is.obj(from) || getFluidConfig(from) ? from : from[key]
+
+ // Create the range now to avoid "reverse" logic.
+ const range = { to, from }
+
+ // Before ever animating, this method ensures an `Animated` node
+ // exists and keeps its value in sync with the "from" prop.
+ if (this.is(CREATED)) {
+ if (reverse) [to, from] = [from, to]
+ from = getFluidValue(from)
+
+ const node = this._updateNode(is.und(from) ? getFluidValue(to) : from)
+ if (node && !is.und(from)) {
+ node.setValue(from)
+ }
+ }
+
+ return range
+ }
+
+ /**
+ * Create an `Animated` node if none exists or the given value has an
+ * incompatible type. Do nothing if `value` is undefined.
+ *
+ * The newest `Animated` node is returned.
+ */
+ protected _updateNode(value: any): Animated | undefined {
+ let node = getAnimated(this)
+ if (!is.und(value)) {
+ const nodeType = this._getNodeType(value)
+ if (!node || node.constructor !== nodeType) {
+ setAnimated(this, (node = nodeType.create(value)))
+ }
+ }
+ return node
+ }
+
+ /** Return the `Animated` node constructor for a given value */
+ protected _getNodeType(value: T | FluidValue): AnimatedType {
+ const parentNode = getAnimated(value)
+ return parentNode
+ ? (parentNode.constructor as any)
+ : is.arr(value)
+ ? AnimatedArray
+ : isAnimatedString(value)
+ ? AnimatedString
+ : AnimatedValue
+ }
+
+ /** Schedule an animation to run after an optional delay */
+ protected _update(props: SpringUpdate, isLoop?: boolean): AsyncResult {
+ type DefaultProps = typeof defaultProps
+ const defaultProps = this._defaultProps
+ const mergeDefaultProp = (key: keyof DefaultProps) => {
+ const value = getDefaultProp(props, key)
+ if (!is.und(value)) {
+ defaultProps[key] = value as any
+ }
+ // For `cancel` and `pause`, a truthy default always wins.
+ if (defaultProps[key]) {
+ props[key] = defaultProps[key] as any
+ }
+ }
+
+ // These props are coerced into booleans by the `scheduleProps` function,
+ // so they need their default values processed before then.
+ mergeDefaultProp('cancel')
+ mergeDefaultProp('pause')
+
+ // Ensure the initial value can be accessed by animated components.
+ const range = this._prepareNode(props)
+
+ return scheduleProps(++this._lastCallId, {
+ key: this.key,
+ props,
+ state: this._state,
+ actions: {
+ pause: this.pause.bind(this),
+ resume: this.resume.bind(this),
+ start: this._merge.bind(this, range),
+ },
+ }).then(result => {
+ if (props.loop && result.finished && !(isLoop && result.noop)) {
+ const nextProps = createLoopUpdate(props)
+ if (nextProps) {
+ return this._update(nextProps, true)
+ }
+ }
+ return result
+ })
+ }
+
+ /** Merge props into the current animation */
+ protected _merge(
+ range: AnimationRange,
+ props: RunAsyncProps,
+ resolve: AnimationResolver
+ ): void {
+ // The "cancel" prop cancels all pending delays and it forces the
+ // active animation to stop where it is.
+ if (props.cancel) {
+ this.stop(true)
+ return resolve(getCancelledResult(this))
+ }
+
+ const { key, animation: anim } = this
+ const defaultProps = this._defaultProps
+
+ /** The "to" prop is defined. */
+ const hasToProp = !is.und(range.to)
+
+ /** The "from" prop is defined. */
+ const hasFromProp = !is.und(range.from)
+
+ // Avoid merging other props if implicitly prevented, except
+ // when both the "to" and "from" props are undefined.
+ if (hasToProp || hasFromProp) {
+ if (props.callId > this._lastToId) {
+ this._lastToId = props.callId
+ } else {
+ return resolve(getCancelledResult(this))
+ }
+ }
+
+ /** Get the value of a prop, or its default value */
+ const get = (prop: K) =>
+ !is.und(props[prop]) ? props[prop] : defaultProps[prop]
+
+ // Call "onDelayEnd" before merging props, but after cancellation checks.
+ const onDelayEnd = coerceEventProp(get('onDelayEnd'), key!)
+ if (onDelayEnd) {
+ onDelayEnd(props, this)
+ }
+
+ if (props.default) {
+ mergeDefaultProps(defaultProps, props, ['pause', 'cancel'])
+ }
+
+ const { to: prevTo, from: prevFrom } = anim
+ let { to = prevTo, from = prevFrom } = range
+
+ // Focus the "from" value if changing without a "to" value.
+ if (hasFromProp && !hasToProp) {
+ to = from
+ }
+
+ // Flip the current range if "reverse" is true.
+ if (props.reverse) [to, from] = [from, to]
+
+ /** The "from" value is changing. */
+ const hasFromChanged = !isEqual(from, prevFrom)
+
+ if (hasFromChanged) {
+ anim.from = from
+ }
+
+ /** The "to" value is changing. */
+ const hasToChanged = !isEqual(to, prevTo)
+
+ if (hasToChanged) {
+ this._focus(to)
+ }
+
+ // Both "from" and "to" can use a fluid config (thanks to http://npmjs.org/fluids).
+ const toConfig = getFluidConfig(to)
+ const fromConfig = getFluidConfig(from)
+
+ if (fromConfig) {
+ from = fromConfig.get()
+ }
+
+ /** The "to" prop is async. */
+ const hasAsyncTo = is.arr(props.to) || is.fun(props.to)
+
+ const { config } = anim
+ const { decay, velocity } = config
+
+ // The "runAsync" function treats the "config" prop as a default,
+ // so we must avoid merging it when the "to" prop is async.
+ if (props.config && !hasAsyncTo) {
+ mergeConfig(
+ config,
+ callProp(props.config, key!),
+ // Avoid calling the same "config" prop twice.
+ props.config !== defaultProps.config
+ ? callProp(defaultProps.config, key!)
+ : void 0
+ )
+ }
+
+ // This instance might not have its Animated node yet. For example,
+ // the constructor can be given props without a "to" or "from" value.
+ let node = getAnimated(this)
+ if (!node || is.und(to)) {
+ return resolve(getFinishedResult(this, true))
+ }
+
+ /** When true, start at the "from" value. */
+ const reset =
+ // When `reset` is undefined, the `from` prop implies `reset: true`,
+ // except for declarative updates. When `reset` is defined, there
+ // must exist a value to animate from.
+ is.und(props.reset)
+ ? hasFromProp && !props.default
+ : !is.und(from) && matchProp(props.reset, key)
+
+ // The current value, where the animation starts from.
+ const value = reset ? (from as T) : this.get()
+
+ // The animation ends at this value, unless "to" is fluid.
+ const goal = computeGoal(to)
+
+ // Only specific types can be animated to/from.
+ const isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal)
+
+ // When true, the value changes instantly on the next frame.
+ const immediate =
+ !hasAsyncTo &&
+ (!isAnimatable ||
+ matchProp(defaultProps.immediate || props.immediate, key))
+
+ if (hasToChanged) {
+ if (immediate) {
+ node = this._updateNode(goal)!
+ } else {
+ const nodeType = this._getNodeType(to)
+ if (nodeType !== node.constructor) {
+ throw Error(
+ `Cannot animate between ${node.constructor.name} and ${nodeType.name}, as the "to" prop suggests`
+ )
+ }
+ }
+ }
+
+ // The type of Animated node for the goal value.
+ const goalType = node.constructor
+
+ // When the goal value is fluid, we don't know if its value
+ // will change before the next animation frame, so it always
+ // starts the animation to be safe.
+ let started = !!toConfig
+ let finished = false
+
+ if (!started) {
+ // When true, the current value has probably changed.
+ const hasValueChanged = reset || (this.is(CREATED) && hasFromChanged)
+
+ // When the "to" value or current value are changed,
+ // start animating if not already finished.
+ if (hasToChanged || hasValueChanged) {
+ finished = isEqual(computeGoal(value), goal)
+ started = !finished
+ }
+
+ // Changing "decay" or "velocity" starts the animation.
+ if (
+ !isEqual(config.decay, decay) ||
+ !isEqual(config.velocity, velocity)
+ ) {
+ started = true
+ }
+ }
+
+ // When an active animation changes its goal to its current value:
+ if (finished && this.is(ACTIVE)) {
+ // Avoid an abrupt stop unless the animation is being reset.
+ if (anim.changed && !reset) {
+ started = true
+ }
+ // Stop the animation before its first frame.
+ else if (!started) {
+ this._stop()
+ }
+ }
+
+ if (!hasAsyncTo) {
+ // Make sure our "toValues" are updated even if our previous
+ // "to" prop is a fluid value whose current value is also ours.
+ if (started || getFluidConfig(prevTo)) {
+ anim.values = node.getPayload()
+ anim.toValues = toConfig
+ ? null
+ : goalType == AnimatedString
+ ? [1]
+ : toArray(goal)
+ }
+
+ anim.immediate = immediate
+
+ anim.onStart = coerceEventProp(get('onStart'), key)
+ anim.onChange = coerceEventProp(get('onChange'), key)
+
+ // The "reset" prop tries to reuse the old "onRest" prop,
+ // unless you defined a new "onRest" prop.
+ const onRestQueue = anim.onRest
+ const onRest =
+ reset && !props.onRest
+ ? onRestQueue[0] || noop
+ : checkFinishedOnRest(coerceEventProp(get('onRest'), key), this)
+
+ // In most cases, the animation after this one won't reuse our
+ // "onRest" prop. Instead, the _default_ "onRest" prop is used
+ // when the next animation has an undefined "onRest" prop.
+ if (started) {
+ anim.onRest = [onRest, checkFinishedOnRest(resolve, this)]
+
+ // Flush the "onRest" queue for the previous animation.
+ let onRestIndex = reset ? 0 : 1
+ if (onRestIndex < onRestQueue.length) {
+ G.batchedUpdates(() => {
+ for (; onRestIndex < onRestQueue.length; onRestIndex++) {
+ onRestQueue[onRestIndex]()
+ }
+ })
+ }
+ }
+ // The "onRest" prop is always first, and it can be updated even
+ // if a new animation is not started by this update.
+ else if (reset || props.onRest) {
+ anim.onRest[0] = onRest
+ }
+ }
+
+ // By this point, every prop has been merged.
+ const onProps = coerceEventProp(get('onProps'), key)
+ if (onProps) {
+ onProps(props, this)
+ }
+
+ // Update our node even if the animation is idle.
+ if (reset) {
+ node.setValue(value)
+ }
+
+ if (hasAsyncTo) {
+ resolve(runAsync(props.to, props, this._state, this))
+ }
+
+ // Start an animation
+ else if (started) {
+ // Must be idle for "onStart" to be called again.
+ if (reset) this._phase = IDLE
+
+ this._reset()
+ this._start()
+ }
+
+ // Postpone promise resolution until the animation is finished,
+ // so that no-op updates still resolve at the expected time.
+ else if (this.is(ACTIVE) && !hasToChanged) {
+ anim.onRest.push(checkFinishedOnRest(resolve, this))
+ }
+
+ // Resolve our promise immediately.
+ else {
+ resolve(getNoopResult(this, value))
+ }
+ }
+
+ /** Update the `animation.to` value, which might be a `FluidValue` */
+ protected _focus(value: T | FluidValue) {
+ const anim = this.animation
+ if (value !== anim.to) {
+ let config = getFluidConfig(anim.to)
+ if (config) {
+ config.removeChild(this)
+ }
+
+ anim.to = value
+
+ let priority = 0
+ if ((config = getFluidConfig(value))) {
+ config.addChild(this)
+ if (isFrameValue(value)) {
+ priority = (value.priority || 0) + 1
+ }
+ }
+ this.priority = priority
+ }
+ }
+
+ /** Set the current value and our `node` if necessary. The `_onChange` method is *not* called. */
+ protected _set(value: T | FluidValue) {
+ const config = getFluidConfig(value)
+ if (config) {
+ value = config.get()
+ }
+ const node = getAnimated(this)
+ const oldValue = node && node.getValue()
+ if (node) {
+ node.setValue(value)
+ } else {
+ this._updateNode(value)
+ }
+ return !isEqual(value, oldValue)
+ }
+
+ protected _onChange(value: T, idle = false) {
+ const anim = this.animation
+
+ // The "onStart" prop is called on the first change after entering the
+ // frameloop, but never for immediate animations.
+ if (!anim.changed && !idle) {
+ anim.changed = true
+ if (anim.onStart) {
+ anim.onStart(this)
+ }
+ }
+
+ if (anim.onChange) {
+ anim.onChange(value, this)
+ }
+
+ super._onChange(value, idle)
+ }
+
+ protected _reset() {
+ const anim = this.animation
+
+ // Reset the state of each Animated node.
+ getAnimated(this)!.reset(anim.to)
+
+ // Ensure the `onStart` prop will be called.
+ if (!this.is(ACTIVE)) {
+ anim.changed = false
+ }
+
+ // Use the current values as the from values.
+ if (!anim.immediate) {
+ anim.fromValues = anim.values.map(node => node.lastPosition)
+ }
+
+ super._reset()
+ }
+
+ protected _start() {
+ if (!this.is(ACTIVE)) {
+ this._phase = ACTIVE
+
+ super._start()
+
+ // The "skipAnimation" global avoids the frameloop.
+ if (G.skipAnimation) {
+ this.finish()
+ } else {
+ G.frameLoop.start(this)
+ }
+ }
+ }
+
+ /**
+ * Exit the frameloop and notify `onRest` listeners.
+ *
+ * Always wrap `_stop` calls with `batchedUpdates`.
+ */
+ protected _stop(cancel?: boolean) {
+ this.resume()
+ if (this.is(ACTIVE)) {
+ this._phase = IDLE
+
+ // Always let change observers know when a spring becomes idle.
+ this._onChange(this.get(), true)
+
+ const anim = this.animation
+ each(anim.values, node => {
+ node.done = true
+ })
+
+ const onRestQueue = anim.onRest
+ if (onRestQueue.length) {
+ // Preserve the "onRest" prop when the goal is dynamic.
+ anim.onRest = [anim.toValues ? noop : onRestQueue[0]]
+
+ // Never call the "onRest" prop for no-op animations.
+ if (!anim.changed) {
+ onRestQueue[0] = noop
+ }
+
+ each(onRestQueue, onRest => onRest(cancel))
+ }
+ }
+ }
+}
+
+function checkDisposed(spring: SpringValue, name: string) {
+ if (spring.is(DISPOSED)) {
+ throw Error(
+ `Cannot call "${name}" of disposed "${spring.constructor.name}" object`
+ )
+ }
+}
+
+/** Coerce an event prop to an event handler */
+function coerceEventProp(
+ prop: EventProp | undefined,
+ key: string | undefined
+) {
+ return is.fun(prop) ? prop : key && prop ? prop[key] : undefined
+}
+
+/**
+ * The "finished" value is determined by each "onRest" handler,
+ * based on whether the current value equals the goal value that
+ * was calculated at the time the "onRest" handler was set.
+ */
+const checkFinishedOnRest = (
+ onRest: OnRest | undefined,
+ spring: SpringValue
+) => {
+ const { to } = spring.animation
+ return onRest
+ ? (cancel?: boolean) => {
+ if (cancel) {
+ onRest(getCancelledResult(spring))
+ } else {
+ const goal = computeGoal(to)
+ const value = computeGoal(spring.get())
+ const finished = isEqual(value, goal)
+ onRest(getFinishedResult(spring, finished))
+ }
+ }
+ : noop
+}
+
+export function createLoopUpdate(
+ props: T & { loop?: any; to?: any; from?: any; reverse?: any },
+ loop = props.loop,
+ to = props.to
+): T | undefined {
+ let loopRet = callProp(loop)
+ if (loopRet) {
+ const overrides = loopRet !== true && inferTo(loopRet)
+ const reverse = (overrides || props).reverse
+ const reset = !overrides || overrides.reset
+ return createUpdate({
+ ...props,
+ loop,
+
+ // Avoid updating default props when looping.
+ default: false,
+
+ // For the "reverse" prop to loop as expected, the "to" prop
+ // must be undefined. The "reverse" prop is ignored when the
+ // "to" prop is an array or function.
+ to: !reverse || is.arr(to) || is.fun(to) ? to : undefined,
+
+ // Avoid defining the "from" prop if a reset is unwanted.
+ from: reset ? props.from : undefined,
+ reset,
+
+ // The "loop" prop can return a "useSpring" props object to
+ // override any of the original props.
+ ...overrides,
+ })
+ }
+}
+
+/**
+ * Return a new object based on the given `props`.
+ *
+ * - All unreserved props are moved into the `to` prop object.
+ * - The `to` and `from` props are deleted when falsy.
+ * - The `keys` prop is set to an array of affected keys,
+ * or `null` if all keys are affected.
+ */
+export function createUpdate(props: any) {
+ const { to, from } = (props = inferTo(props))
+
+ // Collect the keys affected by this update.
+ const keys = new Set()
+
+ if (from) {
+ findDefined(from, keys)
+ } else {
+ // Falsy values are deleted to avoid merging issues.
+ delete props.from
+ }
+
+ if (is.obj(to)) {
+ findDefined(to, keys)
+ } else if (!to) {
+ // Falsy values are deleted to avoid merging issues.
+ delete props.to
+ }
+
+ // The "keys" prop helps in applying updates to affected keys only.
+ props.keys = keys.size ? Array.from(keys) : null
+
+ return props
+}
+
+/**
+ * A modified version of `createUpdate` meant for declarative APIs.
+ */
+export function declareUpdate(props: any) {
+ const update = createUpdate(props)
+ if (is.und(update.default)) {
+ update.default = getDefaultProps(update, [
+ // Avoid forcing `immediate: true` onto imperative updates.
+ update.immediate === true && 'immediate',
+ ])
+ }
+ return update
+}
+
+/** Find keys with defined values */
+function findDefined(values: any, keys: Set) {
+ each(values, (value, key) => value != null && keys.add(key as any))
+}
diff --git a/packages/core/src/TransitionPhase.ts b/packages/core/src/TransitionPhase.ts
new file mode 100644
index 0000000000..1d0b91d2d1
--- /dev/null
+++ b/packages/core/src/TransitionPhase.ts
@@ -0,0 +1,18 @@
+// TODO: convert to "const enum" once Babel supports it
+export type TransitionPhase =
+ | typeof MOUNT
+ | typeof ENTER
+ | typeof UPDATE
+ | typeof LEAVE
+
+/** This transition is being mounted */
+export const MOUNT = 'mount'
+
+/** This transition is entering or has entered */
+export const ENTER = 'enter'
+
+/** This transition had its animations updated */
+export const UPDATE = 'update'
+
+/** This transition will expire after animating */
+export const LEAVE = 'leave'
diff --git a/packages/core/src/__snapshots__/Controller.test.ts.snap b/packages/core/src/__snapshots__/Controller.test.ts.snap
new file mode 100644
index 0000000000..d029ef6902
--- /dev/null
+++ b/packages/core/src/__snapshots__/Controller.test.ts.snap
@@ -0,0 +1,552 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Controller can animate a number 1`] = `
+Array [
+ Object {
+ "x": 2.263484330785799,
+ },
+ Object {
+ "x": 7.615528894993947,
+ },
+ Object {
+ "x": 14.72729545687759,
+ },
+ Object {
+ "x": 22.67933293781441,
+ },
+ Object {
+ "x": 30.85053191603684,
+ },
+ Object {
+ "x": 38.83524421610096,
+ },
+ Object {
+ "x": 46.38171205392548,
+ },
+ Object {
+ "x": 53.346574480369156,
+ },
+ Object {
+ "x": 59.66146523130329,
+ },
+ Object {
+ "x": 65.30867180317823,
+ },
+ Object {
+ "x": 70.30355736424129,
+ },
+ Object {
+ "x": 74.68200657416291,
+ },
+ Object {
+ "x": 78.49158337229619,
+ },
+ Object {
+ "x": 81.78541406742545,
+ },
+ Object {
+ "x": 84.61805634019797,
+ },
+ Object {
+ "x": 87.04280232770594,
+ },
+ Object {
+ "x": 89.11000586164683,
+ },
+ Object {
+ "x": 90.8661309883985,
+ },
+ Object {
+ "x": 92.35329941206051,
+ },
+ Object {
+ "x": 93.60917483504707,
+ },
+ Object {
+ "x": 94.66706719880813,
+ },
+ Object {
+ "x": 95.55617327559861,
+ },
+ Object {
+ "x": 96.30189477450246,
+ },
+ Object {
+ "x": 96.92619326731115,
+ },
+ Object {
+ "x": 97.4479544590839,
+ },
+ Object {
+ "x": 97.88334387327176,
+ },
+ Object {
+ "x": 98.2461428371077,
+ },
+ Object {
+ "x": 98.54805845242963,
+ },
+ Object {
+ "x": 98.7990045563195,
+ },
+ Object {
+ "x": 99.0073529166361,
+ },
+ Object {
+ "x": 99.18015536949562,
+ },
+ Object {
+ "x": 99.3233385117055,
+ },
+ Object {
+ "x": 99.4418730756026,
+ },
+ Object {
+ "x": 99.53992035746593,
+ },
+ Object {
+ "x": 99.62095813165256,
+ },
+ Object {
+ "x": 99.68788842438258,
+ },
+ Object {
+ "x": 99.74312938902625,
+ },
+ Object {
+ "x": 99.78869335076726,
+ },
+ Object {
+ "x": 99.8262528947063,
+ },
+ Object {
+ "x": 99.85719667273446,
+ },
+ Object {
+ "x": 99.8826764105673,
+ },
+ Object {
+ "x": 100,
+ },
+]
+`;
+
+exports[`Controller can animate an array of numbers 1`] = `
+Array [
+ Object {
+ "x": Array [
+ 1.0905393732314317,
+ 2.1810787464628634,
+ ],
+ },
+ Object {
+ "x": Array [
+ 1.3046211557997573,
+ 2.6092423115995147,
+ ],
+ },
+ Object {
+ "x": Array [
+ 1.589091818275103,
+ 3.178183636550206,
+ ],
+ },
+ Object {
+ "x": Array [
+ 1.9071733175125758,
+ 3.8143466350251516,
+ ],
+ },
+ Object {
+ "x": Array [
+ 2.2340212766414735,
+ 4.468042553282947,
+ ],
+ },
+ Object {
+ "x": Array [
+ 2.5534097686440376,
+ 5.106819537288075,
+ ],
+ },
+ Object {
+ "x": Array [
+ 2.8552684821570185,
+ 5.710536964314037,
+ ],
+ },
+ Object {
+ "x": Array [
+ 3.1338629792147654,
+ 6.267725958429531,
+ ],
+ },
+ Object {
+ "x": Array [
+ 3.3864586092521307,
+ 6.772917218504261,
+ ],
+ },
+ Object {
+ "x": Array [
+ 3.612346872127128,
+ 7.224693744254256,
+ ],
+ },
+ Object {
+ "x": Array [
+ 3.8121422945696497,
+ 7.624284589139299,
+ ],
+ },
+ Object {
+ "x": Array [
+ 3.987280262966515,
+ 7.97456052593303,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.139663334891849,
+ 8.279326669783698,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.271416562697019,
+ 8.542833125394038,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.3847222536079205,
+ 8.769444507215841,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.481712093108238,
+ 8.963424186216477,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.5644002344658725,
+ 9.128800468931745,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.634645239535937,
+ 9.269290479071874,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.694131976482419,
+ 9.388263952964838,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.7443669934018855,
+ 9.488733986803771,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.786682687952328,
+ 9.573365375904656,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.822246931023949,
+ 9.644493862047899,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.852075790980104,
+ 9.704151581960208,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.877047730692452,
+ 9.754095461384903,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.89791817836336,
+ 9.79583635672672,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.915333754930874,
+ 9.830667509861748,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.929845713484313,
+ 9.859691426968626,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.941922338097189,
+ 9.883844676194379,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.951960182252786,
+ 9.903920364505572,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.96029411666545,
+ 9.9205882333309,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.967206214779832,
+ 9.934412429559664,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.972933540468227,
+ 9.945867080936454,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.97767492302411,
+ 9.95534984604822,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.981596814298641,
+ 9.963193628597281,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.984838325266105,
+ 9.96967665053221,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.9875155369753035,
+ 9.975031073950607,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.989725175561048,
+ 9.979450351122097,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.991547734030691,
+ 9.983095468061382,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.993050115788252,
+ 9.986100231576504,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.994287866909378,
+ 9.988575733818756,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.995027593476066,
+ 9.990614112845385,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.995027593476066,
+ 9.992291713056268,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.995027593476066,
+ 9.99367173585381,
+ ],
+ },
+ Object {
+ "x": Array [
+ 4.995027593476066,
+ 9.994806458630702,
+ ],
+ },
+ Object {
+ "x": Array [
+ 5,
+ 10,
+ ],
+ },
+]
+`;
+
+exports[`Controller the "loop" prop can be combined with the "reverse" prop 1`] = `
+Array [
+ 0.33334,
+ 0.66668,
+ 1,
+ 0.66666,
+ 0.33331999999999995,
+ 0,
+ 0.33334,
+ 0.66668,
+ 1,
+]
+`;
+
+exports[`Controller when the "to" prop is an async function acts strangely without the "from" prop 1`] = `
+Array [
+ Object {
+ "x": 1.0226348433078583,
+ },
+ Object {
+ "x": 1.0761552889499395,
+ },
+ Object {
+ "x": 1.1472729545687759,
+ },
+ Object {
+ "x": 1.226793329378144,
+ },
+ Object {
+ "x": 1.3085053191603682,
+ },
+ Object {
+ "x": 1.3883524421610094,
+ },
+ Object {
+ "x": 1.4638171205392543,
+ },
+ Object {
+ "x": 1.5334657448036912,
+ },
+ Object {
+ "x": 1.5966146523130327,
+ },
+ Object {
+ "x": 1.6530867180317823,
+ },
+ Object {
+ "x": 1.7030355736424132,
+ },
+ Object {
+ "x": 1.74682006574163,
+ },
+ Object {
+ "x": 1.7849158337229636,
+ },
+ Object {
+ "x": 1.817854140674256,
+ },
+ Object {
+ "x": 1.8461805634019814,
+ },
+ Object {
+ "x": 1.870428023277061,
+ },
+ Object {
+ "x": 1.8911000586164695,
+ },
+ Object {
+ "x": 1.9086613098839855,
+ },
+ Object {
+ "x": 1.9235329941206056,
+ },
+ Object {
+ "x": 1.9360917483504718,
+ },
+ Object {
+ "x": 1.9466706719880824,
+ },
+ Object {
+ "x": 1.9555617327559878,
+ },
+ Object {
+ "x": 1.9630189477450264,
+ },
+ Object {
+ "x": 1.9692619326731133,
+ },
+ Object {
+ "x": 1.9744795445908405,
+ },
+ Object {
+ "x": 1.9788334387327189,
+ },
+ Object {
+ "x": 1.9824614283710786,
+ },
+ Object {
+ "x": 1.9854805845242978,
+ },
+ Object {
+ "x": 1.9879900455631967,
+ },
+ Object {
+ "x": 1.9900735291663625,
+ },
+ Object {
+ "x": 1.991801553694958,
+ },
+ Object {
+ "x": 1.9932333851170567,
+ },
+ Object {
+ "x": 1.9944187307560275,
+ },
+ Object {
+ "x": 1.9953992035746602,
+ },
+ Object {
+ "x": 1.9962095813165261,
+ },
+ Object {
+ "x": 1.9968788842438259,
+ },
+ Object {
+ "x": 1.997431293890262,
+ },
+ Object {
+ "x": 1.9978869335076728,
+ },
+ Object {
+ "x": 1.998262528947063,
+ },
+ Object {
+ "x": 1.9985719667273445,
+ },
+ Object {
+ "x": 1.9988267641056732,
+ },
+ Object {
+ "x": 2,
+ },
+]
+`;
diff --git a/packages/core/src/__snapshots__/SpringValue.test.ts.snap b/packages/core/src/__snapshots__/SpringValue.test.ts.snap
new file mode 100644
index 0000000000..568054b96e
--- /dev/null
+++ b/packages/core/src/__snapshots__/SpringValue.test.ts.snap
@@ -0,0 +1,270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpringValue can animate a number 1`] = `
+Array [
+ 0.100002,
+ 0.200004,
+ 0.300006,
+ 0.400008,
+ 0.50001,
+ 0.600012,
+ 0.700014,
+ 0.800016,
+ 0.900018,
+ 1,
+]
+`;
+
+exports[`SpringValue can animate a string 1`] = `
+Array [
+ "1.00002px 2.00004px",
+ "2.00004px 4.00008px",
+ "3.00006px 6.00012px",
+ "4.00008px 8.00016px",
+ "5.0001px 10.0002px",
+ "6.00012px 12.00024px",
+ "7.00014px 14.00028px",
+ "8.00016px 16.00032px",
+ "9.00018px 18.00036px",
+ "10px 20px",
+]
+`;
+
+exports[`SpringValue can animate an array of numbers 1`] = `Array []`;
+
+exports[`SpringValue the "loop" prop can be combined with the "reverse" prop 1`] = `
+Array [
+ 0.33334,
+ 0.66668,
+ 1,
+ 0.66666,
+ 0.33331999999999995,
+ 0,
+ 0.33334,
+ 0.66668,
+ 1,
+]
+`;
+
+exports[`SpringValue the "loop" prop resets the animation once finished 1`] = `
+Array [
+ 0.33334,
+ 0.66668,
+ 1,
+]
+`;
+
+exports[`SpringValue when "reverse" prop is true swaps the "to" and "from" props 1`] = `
+Array [
+ 0.9773651566921419,
+ 0.9238447110500605,
+ 0.852727045431224,
+ 0.7732066706218559,
+ 0.6914946808396315,
+ 0.6116475578389905,
+ 0.5361828794607453,
+ 0.4665342551963084,
+ 0.4033853476869672,
+ 0.3469132819682177,
+ 0.29696442635758724,
+ 0.2531799342583708,
+ 0.21508416627703766,
+ 0.18214585932574526,
+ 0.15381943659801983,
+ 0.1295719767229399,
+ 0.10889994138353111,
+ 0.09133869011601468,
+ 0.07646700587939456,
+ 0.06390825164952882,
+ 0.05332932801191841,
+ 0.0444382672440135,
+ 0.03698105225497496,
+ 0.030738067326888108,
+ 0.02552045540916056,
+ 0.02116656126728198,
+ 0.01753857162892271,
+ 0.014519415475703344,
+ 0.012009954436804516,
+ 0.009926470833638602,
+ 0.008198446305043062,
+ 0.006766614882944518,
+ 0.005581269243973591,
+ 0.0046007964253405855,
+ 0.0037904186834741348,
+ 0.003121115756173977,
+ 0.0025687061097373425,
+ 0.002113066492326755,
+ 0.0017374710529361444,
+ 0.0014280332726546588,
+ 0.001173235894326376,
+ 0,
+]
+`;
+
+exports[`SpringValue when "reverse" prop is true works when "from" was set by an earlier update 1`] = `
+Array [
+ 0.9773651566921419,
+ 0.9238447110500605,
+ 0.852727045431224,
+ 0.7732066706218559,
+ 0.6914946808396315,
+ 0.6116475578389905,
+ 0.5361828794607453,
+ 0.4665342551963084,
+ 0.4033853476869672,
+ 0.3469132819682177,
+ 0.29696442635758724,
+ 0.2531799342583708,
+ 0.21508416627703766,
+ 0.18214585932574526,
+ 0.15381943659801983,
+ 0.1295719767229399,
+ 0.10889994138353111,
+ 0.09133869011601468,
+ 0.07646700587939456,
+ 0.06390825164952882,
+ 0.05332932801191841,
+ 0.0444382672440135,
+ 0.03698105225497496,
+ 0.030738067326888108,
+ 0.02552045540916056,
+ 0.02116656126728198,
+ 0.01753857162892271,
+ 0.014519415475703344,
+ 0.012009954436804516,
+ 0.009926470833638602,
+ 0.008198446305043062,
+ 0.006766614882944518,
+ 0.005581269243973591,
+ 0.0046007964253405855,
+ 0.0037904186834741348,
+ 0.003121115756173977,
+ 0.0025687061097373425,
+ 0.002113066492326755,
+ 0.0017374710529361444,
+ 0.0014280332726546588,
+ 0.001173235894326376,
+ 0,
+]
+`;
+
+exports[`SpringValue when "reverse" prop is true works when "to" and "from" were set by an earlier update 1`] = `
+Array [
+ 0.022634843307857987,
+ 0.07615528894993949,
+ 0.14727295456877587,
+ 0.226793329378144,
+ 0.30850531916036833,
+ 0.3883524421610094,
+ 0.4638171205392546,
+ 0.5334657448036914,
+ 0.5739798090051748,
+ 0.5769314290818427,
+ 0.5557626190736369,
+ 0.5200267363634852,
+ 0.4764105145625939,
+ 0.4295016985132453,
+ 0.38236344286272556,
+ 0.3369622784733687,
+ 0.29448540630343617,
+ 0.25557459185220316,
+ 0.22049742047819276,
+ 0.18927168260884208,
+ 0.16175483826511933,
+ 0.1377075920817319,
+ 0.11683838434304501,
+ 0.0988339093960519,
+ 0.08337948597437063,
+ 0.07017212884873279,
+ 0.05892843425047188,
+ 0.049388836173825494,
+ 0.041319373575113914,
+ 0.03451179641037492,
+ 0.028782605949931907,
+ 0.023971452443943598,
+ 0.019939186165186966,
+ 0.016565764841941392,
+ 0.013748152945448568,
+ 0.011398299719529353,
+ 0.009441248327067157,
+ 0.007813404341311832,
+ 0.006460975252106907,
+ 0.005338581610289848,
+ 0.004408033349647206,
+ 0.00363726055737456,
+ 0.0029993856652006856,
+ 0.0024719230850121722,
+ 0.002036092265339304,
+ 0.0016762306751292224,
+ 0.0013792940991652848,
+ 0.001134432694629231,
+ 0.0009326324005005715,
+ 0.0007664124372832261,
+ 0.0006295707368567502,
+ 0,
+]
+`;
+
+exports[`SpringValue when "to" prop equals current value avoids interrupting an active animation 1`] = `
+Array [
+ 0.022634843307857987,
+ 0.05403278177365278,
+ 0.07284142865128296,
+ 0.0828538750595177,
+ 0.086845421255966,
+ 0.08683009255947671,
+ 0.0842549750547836,
+ 0.08014705211134462,
+ 0.0752238210530826,
+ 0.06997634488902708,
+ 0.06473137113972319,
+ 0.059697592148462514,
+ 0.05499992314855915,
+ 0.050704753857468414,
+ 0.04683842305057004,
+ 0.04340062433783876,
+ 0.040374037257053644,
+ 0.03773116146592327,
+ 0.03543909060575714,
+ 0.033462778841422576,
+ 0.031767213683302126,
+ 0.030318803092499735,
+ 0.029086205080955534,
+ 0.028040767912793738,
+ 0.022634843307857987,
+]
+`;
+
+exports[`SpringValue when our target is an Interpolation when animating a string animates as expected 1`] = `
+Array [
+ "rgba(255, 170, 0, 1)",
+ "rgba(255, 85, 0, 1)",
+ "red",
+ "rgba(255, 85, 0, 1)",
+ "rgba(255, 170, 0, 1)",
+ "yellow",
+ "rgba(255, 170, 0, 1)",
+ "rgba(255, 85, 0, 1)",
+ "red",
+ "rgba(255, 85, 0, 1)",
+ "rgba(255, 170, 0, 1)",
+ "yellow",
+]
+`;
+
+exports[`SpringValue when our target is another SpringValue when animating a string animates as expected 1`] = `
+Array [
+ "rgba(255, 170, 0, 1)",
+ "rgba(255, 85, 0, 1)",
+ "red",
+ "rgba(255, 85, 0, 1)",
+ "rgba(255, 170, 0, 1)",
+ "yellow",
+ "rgba(255, 170, 0, 1)",
+ "rgba(255, 85, 0, 1)",
+ "red",
+ "rgba(255, 85, 0, 1)",
+ "rgba(255, 170, 0, 1)",
+ "yellow",
+]
+`;
diff --git a/packages/core/src/components/Spring.tsx b/packages/core/src/components/Spring.tsx
new file mode 100644
index 0000000000..1fc0fc95e9
--- /dev/null
+++ b/packages/core/src/components/Spring.tsx
@@ -0,0 +1,30 @@
+import { useSpring, UseSpringProps } from '../hooks/useSpring'
+import { NoInfer, UnknownProps } from '../types/common'
+import { SpringValues, SpringToFn, SpringChain } from '../types'
+
+export type SpringComponentProps<
+ State extends object = UnknownProps
+> = unknown &
+ UseSpringProps & {
+ children: (values: SpringValues) => JSX.Element | null
+ }
+
+// Infer state from "from" object prop.
+export function Spring(
+ props: {
+ from: State
+ to?: SpringChain> | SpringToFn>
+ } & Omit>, 'from' | 'to'>
+): JSX.Element | null
+
+// Infer state from "to" object prop.
+export function Spring(
+ props: { to: State } & Omit>, 'to'>
+): JSX.Element | null
+
+/**
+ * The `Spring` component passes `SpringValue` objects to your render prop.
+ */
+export function Spring({ children, ...props }: any) {
+ return children(useSpring(props))
+}
diff --git a/packages/core/src/components/Trail.tsx b/packages/core/src/components/Trail.tsx
new file mode 100644
index 0000000000..3653385e72
--- /dev/null
+++ b/packages/core/src/components/Trail.tsx
@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+import { NoInfer, is, Falsy } from 'shared'
+
+import { Valid } from '../types/common'
+import { PickAnimated, SpringValues } from '../types'
+import { UseSpringProps } from '../hooks/useSpring'
+import { useTrail } from '../hooks/useTrail'
+
+export type TrailComponentProps- = unknown &
+ UseSpringProps & {
+ items: readonly Item[]
+ children: (
+ item: NoInfer
- ,
+ index: number
+ ) => ((values: SpringValues>) => ReactNode) | Falsy
+ }
+
+export function Trail
- >({
+ items,
+ children,
+ ...props
+}: Props & Valid>) {
+ const trails: any[] = useTrail(items.length, props)
+ return items.map((item, index) => {
+ const result = children(item, index)
+ return is.fun(result) ? result(trails[index]) : result
+ })
+}
diff --git a/packages/core/src/components/Transition.tsx b/packages/core/src/components/Transition.tsx
new file mode 100644
index 0000000000..ceb46817f2
--- /dev/null
+++ b/packages/core/src/components/Transition.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { Valid } from '../types/common'
+import { TransitionComponentProps } from '../types'
+import { useTransition } from '../hooks'
+
+export function Transition<
+ Item extends any,
+ Props extends TransitionComponentProps
-
+>({
+ items,
+ children,
+ ...props
+}:
+ | TransitionComponentProps
-
+ | (Props & Valid>)) {
+ return <>{useTransition(items, props)(children)}>
+}
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
new file mode 100644
index 0000000000..acabf01c4b
--- /dev/null
+++ b/packages/core/src/components/index.ts
@@ -0,0 +1,3 @@
+export * from './Spring'
+export * from './Trail'
+export * from './Transition'
diff --git a/src/shared/constants.ts b/packages/core/src/constants.ts
similarity index 86%
rename from src/shared/constants.ts
rename to packages/core/src/constants.ts
index 5d40b5cd3d..39a2833ec7 100644
--- a/src/shared/constants.ts
+++ b/packages/core/src/constants.ts
@@ -1,3 +1,4 @@
+// The `mass` prop defaults to 1
export const config = {
default: { tension: 170, friction: 26 },
gentle: { tension: 120, friction: 14 },
@@ -5,4 +6,4 @@ export const config = {
stiff: { tension: 210, friction: 20 },
slow: { tension: 280, friction: 60 },
molasses: { tension: 280, friction: 120 },
-}
+} as const
diff --git a/packages/core/src/globals.ts b/packages/core/src/globals.ts
new file mode 100644
index 0000000000..b75c74d344
--- /dev/null
+++ b/packages/core/src/globals.ts
@@ -0,0 +1,14 @@
+import { createStringInterpolator } from 'shared/stringInterpolation'
+import { Interpolation } from './Interpolation'
+import { Globals } from 'shared'
+
+// Sane defaults
+Globals.assign({
+ createStringInterpolator,
+ to: (source, args) => new Interpolation(source, args),
+})
+
+export { Globals }
+
+/** Advance all animations forward one frame */
+export const update = () => Globals.frameLoop.advance()
diff --git a/packages/core/src/helpers.test.ts b/packages/core/src/helpers.test.ts
new file mode 100644
index 0000000000..b63a2a52e4
--- /dev/null
+++ b/packages/core/src/helpers.test.ts
@@ -0,0 +1,53 @@
+import { inferTo } from './helpers'
+import { ReservedProps } from './types/common'
+
+describe('helpers', () => {
+ it('interpolateTo', () => {
+ const forwardProps = {
+ result: 'ok',
+ }
+ const restProps = {
+ from: 'from',
+ config: 'config',
+ onStart: 'onStart',
+ }
+ const excludeProps: Required = {
+ children: undefined,
+ config: undefined,
+ from: undefined,
+ to: undefined,
+ ref: undefined,
+ loop: undefined,
+ reset: undefined,
+ pause: undefined,
+ cancel: undefined,
+ reverse: undefined,
+ immediate: undefined,
+ default: undefined,
+ delay: undefined,
+ items: undefined,
+ trail: undefined,
+ sort: undefined,
+ expires: undefined,
+ initial: undefined,
+ enter: undefined,
+ leave: undefined,
+ update: undefined,
+ onProps: undefined,
+ onStart: undefined,
+ onChange: undefined,
+ onRest: undefined,
+ }
+ expect(
+ inferTo({
+ ...forwardProps,
+ ...restProps,
+ ...excludeProps,
+ })
+ ).toMatchObject({
+ to: forwardProps,
+ ...restProps,
+ ...excludeProps,
+ })
+ })
+})
diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
new file mode 100644
index 0000000000..f4b0b3149c
--- /dev/null
+++ b/packages/core/src/helpers.ts
@@ -0,0 +1,197 @@
+import { useMemoOne } from 'use-memo-one'
+import {
+ is,
+ each,
+ toArray,
+ getFluidConfig,
+ isAnimatedString,
+ AnyFn,
+ OneOrMore,
+ FluidValue,
+ Lookup,
+ Falsy,
+} from 'shared'
+import * as G from 'shared/globals'
+import { ReservedProps, ForwardProps, InferTo } from './types'
+
+// @see https://github.com/alexreardon/use-memo-one/pull/10
+export const useMemo: typeof useMemoOne = (create, deps) =>
+ useMemoOne(create, deps || [{}])
+
+export function callProp(
+ value: T,
+ ...args: T extends AnyFn ? Parameters : unknown[]
+): T extends AnyFn ? U : T {
+ return is.fun(value) ? value(...args) : value
+}
+
+/** Try to coerce the given value into a boolean using the given key */
+export const matchProp = (
+ value: boolean | OneOrMore | ((key: any) => boolean) | undefined,
+ key: string | undefined
+) =>
+ value === true ||
+ !!(
+ key &&
+ value &&
+ (is.fun(value) ? value(key) : toArray(value).includes(key))
+ )
+
+export const concatFn = (first: T | undefined, last: T) =>
+ first ? (...args: Parameters) => (first(...args), last(...args)) : last
+
+type AnyProps = OneOrMore | ((i: number, arg: Arg) => T)
+
+export const getProps = (
+ props: AnyProps | null | undefined,
+ i: number,
+ arg: Arg
+) =>
+ props &&
+ (is.fun(props) ? props(i, arg) : is.arr(props) ? props[i] : { ...props })
+
+/** Returns `true` if the given prop is having its default value set. */
+export const hasDefaultProp = (props: T, key: keyof T) =>
+ !is.und(getDefaultProp(props, key))
+
+/** Get the default value being set for the given `key` */
+export const getDefaultProp = (props: T, key: keyof T) =>
+ props.default === true
+ ? props[key]
+ : props.default
+ ? props.default[key]
+ : undefined
+
+/**
+ * Extract the default props from an update.
+ *
+ * When the `default` prop is falsy, this function still behaves as if
+ * `default: true` was used. The `default` prop is always respected when
+ * truthy.
+ */
+export const getDefaultProps = (
+ props: Lookup,
+ omitKeys: (string | Falsy)[] = [],
+ defaults: Lookup = {} as any
+) => {
+ let keys: readonly string[] = DEFAULT_PROPS
+ if (props.default && props.default !== true) {
+ props = props.default
+ keys = Object.keys(props)
+ }
+ for (const key of keys) {
+ const value = props[key]
+ if (!is.und(value) && !omitKeys.includes(key)) {
+ defaults[key] = value
+ }
+ }
+ return defaults as T
+}
+
+/** Merge the default props of an update into a props cache. */
+export const mergeDefaultProps = (
+ defaults: Lookup,
+ props: Lookup,
+ omitKeys?: (string | Falsy)[]
+) => getDefaultProps(props, omitKeys, defaults)
+
+/** These props can have default values */
+export const DEFAULT_PROPS = [
+ 'pause',
+ 'cancel',
+ 'config',
+ 'immediate',
+ 'onDelayEnd',
+ 'onProps',
+ 'onStart',
+ 'onChange',
+ 'onRest',
+] as const
+
+const RESERVED_PROPS: Required = {
+ config: 1,
+ from: 1,
+ to: 1,
+ ref: 1,
+ loop: 1,
+ reset: 1,
+ pause: 1,
+ cancel: 1,
+ reverse: 1,
+ immediate: 1,
+ default: 1,
+ delay: 1,
+ onDelayEnd: 1,
+ onProps: 1,
+ onStart: 1,
+ onChange: 1,
+ onRest: 1,
+
+ // Transition props
+ items: 1,
+ trail: 1,
+ sort: 1,
+ expires: 1,
+ initial: 1,
+ enter: 1,
+ update: 1,
+ leave: 1,
+ children: 1,
+
+ // Internal props
+ keys: 1,
+ callId: 1,
+ parentId: 1,
+}
+
+/**
+ * Extract any properties whose keys are *not* reserved for customizing your
+ * animations. All hooks use this function, which means `useTransition` props
+ * are reserved for `useSpring` calls, etc.
+ */
+function getForwardProps(
+ props: Props
+): ForwardProps | undefined {
+ const forward: any = {}
+
+ let count = 0
+ each(props, (value, prop) => {
+ if (!RESERVED_PROPS[prop]) {
+ forward[prop] = value
+ count++
+ }
+ })
+
+ if (count) {
+ return forward
+ }
+}
+
+/**
+ * Clone the given `props` and move all non-reserved props
+ * into the `to` prop.
+ */
+export function inferTo(props: T): InferTo {
+ const to = getForwardProps(props)
+ if (to) {
+ const out: any = { to }
+ each(props, (val, key) => key in to || (out[key] = val))
+ return out
+ }
+ return { ...props } as any
+}
+
+// Compute the goal value, converting "red" to "rgba(255, 0, 0, 1)" in the process
+export function computeGoal(value: T | FluidValue): T {
+ const config = getFluidConfig(value)
+ return config
+ ? computeGoal(config.get())
+ : is.arr(value)
+ ? value.map(computeGoal)
+ : isAnimatedString(value)
+ ? (G.createStringInterpolator({
+ range: [0, 1],
+ output: [value, value] as any,
+ })(1) as any)
+ : value
+}
diff --git a/packages/core/src/hooks/index.ts b/packages/core/src/hooks/index.ts
new file mode 100644
index 0000000000..6caac103ec
--- /dev/null
+++ b/packages/core/src/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './useChain'
+export * from './useSpring'
+export * from './useSprings'
+export * from './useTrail'
+export * from './useTransition'
diff --git a/packages/core/src/hooks/useChain.d.ts b/packages/core/src/hooks/useChain.d.ts
new file mode 100644
index 0000000000..1a497f24ab
--- /dev/null
+++ b/packages/core/src/hooks/useChain.d.ts
@@ -0,0 +1,8 @@
+import { RefObject } from 'react'
+import { SpringHandle } from '../SpringHandle'
+
+export declare function useChain(
+ refs: ReadonlyArray>,
+ timeSteps?: number[],
+ timeFrame?: number
+): void
diff --git a/packages/core/src/hooks/useChain.js b/packages/core/src/hooks/useChain.js
new file mode 100644
index 0000000000..11ff09292b
--- /dev/null
+++ b/packages/core/src/hooks/useChain.js
@@ -0,0 +1,52 @@
+import { useLayoutEffect } from 'react-layout-effect'
+import { each } from 'shared'
+
+/** API
+ * useChain(references, timeSteps, timeFrame)
+ */
+
+export function useChain(refs, timeSteps, timeFrame = 1000) {
+ useLayoutEffect(() => {
+ if (timeSteps) {
+ let prevDelay = 0
+ each(refs, (ref, i) => {
+ if (!ref.current) return
+
+ const { controllers } = ref.current
+ if (controllers.length) {
+ let delay = timeFrame * timeSteps[i]
+
+ // Use the previous delay if none exists.
+ if (isNaN(delay)) delay = prevDelay
+ else prevDelay = delay
+
+ each(controllers, ctrl => {
+ each(ctrl.queue, props => {
+ props.delay = delay + (props.delay || 0)
+ })
+ ctrl.start()
+ })
+ }
+ })
+ } else {
+ let p = Promise.resolve()
+ each(refs, ref => {
+ const { controllers, start } = ref.current || {}
+ if (controllers && controllers.length) {
+ // Take the queue of each controller
+ const updates = controllers.map(ctrl => {
+ const q = ctrl.queue
+ ctrl.queue = []
+ return q
+ })
+
+ // Apply the queue when the previous ref stops animating
+ p = p.then(() => {
+ each(controllers, (ctrl, i) => ctrl.queue.push(...updates[i]))
+ return start()
+ })
+ }
+ })
+ }
+ })
+}
diff --git a/packages/core/src/hooks/useSpring.test.tsx b/packages/core/src/hooks/useSpring.test.tsx
new file mode 100644
index 0000000000..7f286661d1
--- /dev/null
+++ b/packages/core/src/hooks/useSpring.test.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+import { useSpring } from './useSpring'
+import { is, Lookup, UnknownProps } from 'shared'
+import { SpringStopFn, SpringStartFn } from '../types'
+import { SpringValue } from '../SpringValue'
+
+describe('useSpring', () => {
+ let springs: Lookup
+ let animate: SpringStartFn
+ let stop: SpringStopFn
+
+ // Call the "useSpring" hook and update local variables.
+ const update = createUpdater(({ args }) => {
+ const result = useSpring(...args)
+ if (is.fun(args[0]) || args.length == 2) {
+ springs = result[0] as any
+ animate = result[1]
+ stop = result[2]
+ } else {
+ springs = result as any
+ animate = stop = () => {
+ throw Error('Function does not exist')
+ }
+ }
+ return null
+ })
+
+ describe('when only a props object is passed', () => {
+ it('is updated every render', () => {
+ update({ x: 0 })
+ expect(springs.x.goal).toBe(0)
+
+ update({ x: 1 })
+ expect(springs.x.goal).toBe(1)
+ })
+ it('returns only the animated values', () => {
+ expect(() => animate({ x: 2 })).toThrowError()
+ expect(() => stop()).toThrowError()
+ })
+ })
+
+ describe('when both a props object and a deps array are passed', () => {
+ it('is updated only when a dependency changes', () => {
+ update({ x: 0 }, [1])
+ expect(springs.x.goal).toBe(0)
+
+ update({ x: 1 }, [1])
+ expect(springs.x.goal).toBe(0)
+
+ update({ x: 1 }, [2])
+ expect(springs.x.goal).toBe(1)
+ })
+ it('returns the "animate" and "stop" functions', () => {
+ update({ x: 0 }, [])
+ expect(springs.x.goal).toBe(0)
+
+ animate({ x: 1 })
+ expect(springs.x.goal).toBe(1)
+ expect(springs.x.idle).toBeFalsy()
+
+ stop()
+ expect(springs.x.idle).toBeTruthy()
+ })
+ })
+
+ describe('when only a props function is passed', () => {
+ it('is never updated on render', () => {
+ update(() => ({ x: 0 }))
+ expect(springs.x.goal).toBe(0)
+
+ update(() => ({ x: 1 }))
+ expect(springs.x.goal).toBe(0)
+ })
+ it('returns the "animate" and "stop" functions', () => {
+ update(() => ({ x: 0 }))
+ expect(springs.x.goal).toBe(0)
+
+ animate({ x: 1 })
+ expect(springs.x.goal).toBe(1)
+ expect(springs.x.idle).toBeFalsy()
+
+ stop()
+ expect(springs.x.idle).toBeTruthy()
+ })
+ })
+
+ describe('when both a props function and a deps array are passed', () => {
+ it('is updated when a dependency changes', () => {
+ update(() => ({ x: 0 }), [1])
+ expect(springs.x.goal).toBe(0)
+
+ update(() => ({ x: 1 }), [1])
+ expect(springs.x.goal).toBe(0)
+
+ update(() => ({ x: 1 }), [2])
+ expect(springs.x.goal).toBe(1)
+ })
+ it('returns the "animate" and "stop" functions', () => {
+ update(() => ({ x: 0 }), [])
+ expect(springs.x.goal).toBe(0)
+
+ animate({ x: 1 })
+ expect(springs.x.goal).toBe(1)
+ expect(springs.x.idle).toBeFalsy()
+
+ stop()
+ expect(springs.x.idle).toBeTruthy()
+ })
+ })
+})
+
+function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) {
+ let result: RenderResult | undefined
+ afterEach(() => {
+ result = undefined
+ })
+
+ type Args = Parameters
+ return (...args: [Args[0], Args[1]?]) => {
+ const elem =
+ if (result) result.rerender(elem)
+ else result = render(elem)
+ return result
+ }
+}
diff --git a/packages/core/src/hooks/useSpring.ts b/packages/core/src/hooks/useSpring.ts
new file mode 100644
index 0000000000..baeffa6c95
--- /dev/null
+++ b/packages/core/src/hooks/useSpring.ts
@@ -0,0 +1,74 @@
+import { is, RefProp, UnknownProps, Remap } from 'shared'
+
+import {
+ ControllerUpdate,
+ PickAnimated,
+ SpringStartFn,
+ SpringStopFn,
+ SpringValues,
+} from '../types'
+import { Valid } from '../types/common'
+import { SpringHandle } from '../SpringHandle'
+import { useSprings } from './useSprings'
+
+/**
+ * The props that `useSpring` recognizes.
+ */
+export type UseSpringProps = unknown &
+ PickAnimated extends infer State
+ ? Remap<
+ ControllerUpdate & {
+ /**
+ * Used to access the imperative API.
+ *
+ * When defined, the render animation won't auto-start.
+ */
+ ref?: RefProp>
+ }
+ >
+ : never
+
+/**
+ * The `props` function is only called on the first render, unless
+ * `deps` change (when defined). State is inferred from forward props.
+ */
+export function useSpring(
+ props: () => (Props & Valid>) | UseSpringProps,
+ deps?: readonly any[] | undefined
+): [
+ SpringValues>,
+ SpringStartFn>,
+ SpringStopFn
+]
+
+/**
+ * Updated on every render, with state inferred from forward props.
+ */
+export function useSpring(
+ props: (Props & Valid>) | UseSpringProps
+): SpringValues>
+
+/**
+ * Updated only when `deps` change, with state inferred from forwad props.
+ */
+export function useSpring(
+ props: (Props & Valid>) | UseSpringProps,
+ deps: readonly any[] | undefined
+): [
+ SpringValues>,
+ SpringStartFn>,
+ SpringStopFn
+]
+
+/** @internal */
+export function useSpring(props: any, deps?: readonly any[]) {
+ const isFn = is.fun(props)
+ const [[values], update, stop] = useSprings(
+ 1,
+ isFn ? props : [props],
+ isFn ? deps || [] : deps
+ )
+ return isFn || arguments.length == 2
+ ? ([values, update, stop] as const)
+ : values
+}
diff --git a/packages/core/src/hooks/useSprings.test.tsx b/packages/core/src/hooks/useSprings.test.tsx
new file mode 100644
index 0000000000..843d4d6bc6
--- /dev/null
+++ b/packages/core/src/hooks/useSprings.test.tsx
@@ -0,0 +1,135 @@
+import * as React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+import { useSprings } from './useSprings'
+import { is, each, Lookup } from 'shared'
+import { SpringStopFn, SpringStartFn } from '../types'
+import { SpringValue } from '../SpringValue'
+
+describe('useSprings', () => {
+ let springs: Lookup[]
+ let animate: SpringStartFn
+ let stop: SpringStopFn
+
+ // Call the "useSprings" hook and update local variables.
+ const update = createUpdater(({ args }) => {
+ const result = useSprings(...args)
+ if (is.fun(args[1]) || args.length == 3) {
+ springs = result[0] as any
+ animate = result[1]
+ stop = result[2]
+ } else {
+ springs = result as any
+ animate = stop = () => {
+ throw Error('Function does not exist')
+ }
+ }
+ return null
+ })
+
+ describe('when only a props function is passed', () => {
+ it('calls the props function once per new spring', () => {
+ const getProps = jest.fn((i: number) => ({ x: i * 100 }))
+
+ // Create two springs.
+ update(2, getProps)
+ expect(getProps).toHaveBeenCalledTimes(2)
+ expect(springs.length).toBe(2)
+
+ // Do nothing.
+ update(2, getProps)
+ expect(getProps).toHaveBeenCalledTimes(2)
+ expect(springs.length).toBe(2)
+
+ // Create a spring.
+ update(3, getProps)
+ expect(getProps).toHaveBeenCalledTimes(3)
+ expect(springs.length).toBe(3)
+
+ // Remove a spring.
+ update(2, getProps)
+ expect(getProps).toHaveBeenCalledTimes(3)
+ expect(springs.length).toBe(2)
+
+ // Create two springs.
+ update(4, getProps)
+ expect(getProps).toHaveBeenCalledTimes(5)
+ expect(springs.length).toBe(4)
+ })
+ })
+
+ describe('when both a props function and a deps array are passed', () => {
+ it('updates each spring when the deps have changed', () => {
+ const getProps = jest.fn((i: number) => ({ x: i * 100 }))
+
+ update(2, getProps, [1])
+ expect(getProps).toHaveBeenCalledTimes(2)
+
+ update(2, getProps, [1])
+ expect(getProps).toHaveBeenCalledTimes(2)
+
+ update(2, getProps, [2])
+ expect(getProps).toHaveBeenCalledTimes(4)
+ })
+ })
+
+ describe('when only a props array is passed', () => {
+ it('updates each spring on every render', () => {
+ update(2, [{ x: 0 }, { x: 0 }])
+ expect(mapSprings(s => s.goal)).toEqual([{ x: 0 }, { x: 0 }])
+
+ update(3, [{ x: 1 }, { x: 2 }, { x: 3 }])
+ expect(mapSprings(s => s.goal)).toEqual([{ x: 1 }, { x: 2 }, { x: 3 }])
+ })
+ })
+
+ describe('when the length argument increases', () => {
+ it('creates new springs', () => {
+ const getProps = (i: number) => ({ x: i * 100 })
+
+ update(0, getProps)
+ expect(springs.length).toBe(0)
+
+ update(2, getProps)
+ expect(springs.length).toBe(2)
+ })
+ })
+
+ describe('when the length argument decreases', () => {
+ it('removes old springs', () => {
+ const getProps = (i: number) => ({ x: i * 100 })
+
+ update(3, getProps)
+ expect(springs.length).toBe(3)
+
+ update(1, getProps)
+ expect(springs.length).toBe(1)
+ })
+ })
+
+ function mapSprings(fn: (spring: SpringValue) => T) {
+ return springs.map(values => {
+ const result: any = {}
+ each(values, spring => {
+ result[spring.key!] = fn(spring)
+ })
+ return result
+ })
+ }
+})
+
+function createUpdater(
+ Component: React.ComponentType<{ args: [any, any, any?] }>
+) {
+ let result: RenderResult | undefined
+ afterEach(() => {
+ result = undefined
+ })
+
+ type Args = [number, any[] | ((i: number) => any), any[]?]
+ return (...args: Args) => {
+ const elem =
+ if (result) result.rerender(elem)
+ else result = render(elem)
+ return result
+ }
+}
diff --git a/packages/core/src/hooks/useSprings.ts b/packages/core/src/hooks/useSprings.ts
new file mode 100644
index 0000000000..7a8ee344b6
--- /dev/null
+++ b/packages/core/src/hooks/useSprings.ts
@@ -0,0 +1,227 @@
+import { useMemo, useState, useRef } from 'react'
+import { useLayoutEffect } from 'react-layout-effect'
+import {
+ is,
+ each,
+ usePrev,
+ useOnce,
+ RefProp,
+ UnknownProps,
+ useForceUpdate,
+ Lookup,
+} from 'shared'
+
+import {
+ ControllerFlushFn,
+ PickAnimated,
+ SpringStartFn,
+ SpringStopFn,
+ SpringValues,
+ ControllerUpdate,
+} from '../types'
+import { UseSpringProps } from './useSpring'
+import { declareUpdate } from '../SpringValue'
+import {
+ Controller,
+ getSprings,
+ flushUpdateQueue,
+ setSprings,
+} from '../Controller'
+import { useMemo as useMemoOne } from '../helpers'
+import { useSpringContext } from '../SpringContext'
+import { SpringHandle } from '../SpringHandle'
+
+export type UseSpringsProps = unknown &
+ ControllerUpdate & {
+ ref?: RefProp>
+ }
+
+/**
+ * When the `deps` argument exists, the `props` function is called whenever
+ * the `deps` change on re-render.
+ *
+ * Without the `deps` argument, the `props` function is only called once.
+ */
+export function useSprings(
+ length: number,
+ props: (i: number, ctrl: Controller) => Props,
+ deps?: readonly any[]
+): PickAnimated extends infer State
+ ? [SpringValues[], SpringStartFn, SpringStopFn]
+ : never
+
+/**
+ * Animations are updated on re-render.
+ */
+export function useSprings(
+ length: number,
+ props: Props[] & UseSpringsProps>[]
+): SpringValues>[]
+
+/**
+ * When the `deps` argument exists, you get the `update` and `stop` function.
+ */
+export function useSprings(
+ length: number,
+ props: Props[] & UseSpringsProps>[],
+ deps: readonly any[] | undefined
+): PickAnimated extends infer State
+ ? [SpringValues[], SpringStartFn, SpringStopFn]
+ : never
+
+/** @internal */
+export function useSprings(
+ length: number,
+ props: any[] | ((i: number, ctrl: Controller) => any),
+ deps?: readonly any[]
+): any {
+ const propsFn = is.fun(props) && props
+ if (propsFn && !deps) deps = []
+
+ interface State {
+ // The controllers used for applying updates.
+ ctrls: Controller[]
+ // The queue of changes to make on commit.
+ queue: Array<() => void>
+ // The flush function used by controllers.
+ flush: ControllerFlushFn