├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── packages ├── example │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── index.css │ │ └── index.js │ └── yarn.lock └── tracer-motion │ ├── README.md │ ├── demo.gif │ ├── dist.js │ ├── index.js │ ├── package.json │ ├── rollup.config.js │ └── use-motion-values.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | .env.production 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | out 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | # Comment in the public line in if your project uses Gatsby and not Next.js 92 | # https://nextjs.org/blog/next-9-1#public-directory-support 93 | # public 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # FuseBox cache 102 | .fusebox/ 103 | 104 | # DynamoDB Local files 105 | .dynamodb/ 106 | 107 | # TernJS port file 108 | .tern-port 109 | 110 | # Stores VSCode versions used for testing VSCode extensions 111 | .vscode-test 112 | 113 | # yarn v2 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .yarn/install-state.gz 118 | .pnp.* 119 | # Logs 120 | logs 121 | *.log 122 | npm-debug.log* 123 | yarn-debug.log* 124 | yarn-error.log* 125 | lerna-debug.log* 126 | .pnpm-debug.log* 127 | 128 | # Diagnostic reports (https://nodejs.org/api/report.html) 129 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 130 | 131 | # Runtime data 132 | pids 133 | *.pid 134 | *.seed 135 | *.pid.lock 136 | 137 | # Directory for instrumented libs generated by jscoverage/JSCover 138 | lib-cov 139 | 140 | # Coverage directory used by tools like istanbul 141 | coverage 142 | *.lcov 143 | 144 | # nyc test coverage 145 | .nyc_output 146 | 147 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 148 | .grunt 149 | 150 | # Bower dependency directory (https://bower.io/) 151 | bower_components 152 | 153 | # node-waf configuration 154 | .lock-wscript 155 | 156 | # Compiled binary addons (https://nodejs.org/api/addons.html) 157 | build/Release 158 | 159 | # Dependency directories 160 | node_modules/ 161 | jspm_packages/ 162 | 163 | # Snowpack dependency directory (https://snowpack.dev/) 164 | web_modules/ 165 | 166 | # TypeScript cache 167 | *.tsbuildinfo 168 | 169 | # Optional npm cache directory 170 | .npm 171 | 172 | # Optional eslint cache 173 | .eslintcache 174 | 175 | # Microbundle cache 176 | .rpt2_cache/ 177 | .rts2_cache_cjs/ 178 | .rts2_cache_es/ 179 | .rts2_cache_umd/ 180 | 181 | # Optional REPL history 182 | .node_repl_history 183 | 184 | # Output of 'npm pack' 185 | *.tgz 186 | 187 | # Yarn Integrity file 188 | .yarn-integrity 189 | 190 | # dotenv environment variables file 191 | .env 192 | .env.test 193 | .env.production 194 | 195 | # parcel-bundler cache (https://parceljs.org/) 196 | .cache 197 | .parcel-cache 198 | 199 | # Next.js build output 200 | .next 201 | out 202 | 203 | # Nuxt.js build / generate output 204 | .nuxt 205 | dist 206 | 207 | # Gatsby files 208 | .cache/ 209 | # Comment in the public line in if your project uses Gatsby and not Next.js 210 | # https://nextjs.org/blog/next-9-1#public-directory-support 211 | # public 212 | 213 | # vuepress build output 214 | .vuepress/dist 215 | 216 | # Serverless directories 217 | .serverless/ 218 | 219 | # FuseBox cache 220 | .fusebox/ 221 | 222 | # DynamoDB Local files 223 | .dynamodb/ 224 | 225 | # TernJS port file 226 | .tern-port 227 | 228 | # Stores VSCode versions used for testing VSCode extensions 229 | .vscode-test 230 | 231 | # yarn v2 232 | .yarn/cache 233 | .yarn/unplugged 234 | .yarn/build-state.yml 235 | .yarn/install-state.gz 236 | .pnp.* 237 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2021 siddharthkp 2 | 3 | Permission is hereby granted, free of 4 | charge, to any person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to the 9 | following conditions: 10 | 11 | The above copyright notice and this permission notice 12 | (including the next paragraph) shall be included in all copies or substantial 13 | portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/tracer-motion/README.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tracer-motion-workspace", 3 | "version": "0.0.0", 4 | "private": true, 5 | "workspaces": [ 6 | "packages/*" 7 | ], 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /packages/example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/example/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /packages/example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "framer-motion": "^4.1.17", 7 | "react": "^17.0.2", 8 | "react-dom": "^17.0.2", 9 | "react-scripts": "4.0.3", 10 | "tracer-motion": "1.0.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": [ 20 | "react-app", 21 | "react-app/jest" 22 | ] 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 3 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 4 | sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | padding-top: 100px; 8 | } 9 | 10 | .box { 11 | width: 100px; 12 | height: 100px; 13 | background-color: #0bf; 14 | border-radius: 10px; 15 | } 16 | -------------------------------------------------------------------------------- /packages/example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | 5 | import { motion } from 'framer-motion'; 6 | import { tracer } from 'tracer-motion'; 7 | 8 | function App() { 9 | return ( 10 | <> 11 |
12 | 22 |
23 | 24 | ); 25 | } 26 | 27 | ReactDOM.render( 28 | 29 | 30 | , 31 | document.getElementById('root') 32 | ); 33 | -------------------------------------------------------------------------------- /packages/tracer-motion/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | Visual debugger for framer-motion 5 |

6 | 7 |

8 | Demo 9 |

10 | 11 |   12 | 13 | #### install 14 | 15 | ``` 16 | npm install tracer-motion --save-dev 17 | 18 | # or 19 | 20 | yarn add tracer-motion --dev 21 | ``` 22 | 23 |   24 | 25 | #### usage 26 | 27 | ```diff 28 | import { motion } from 'framer-motion'; 29 | + import { tracer } from 'tracer-motion'; 30 | 31 | function App() { 32 | return ( 33 | <> 34 |
35 | - 42 |
43 | 44 | ); 45 | } 46 | ``` 47 | 48 |   49 | 50 | #### like it? 51 | 52 | :star: this repo 53 | 54 |   55 | 56 | #### license 57 | 58 | MIT © [siddharthkp](https://github.com/siddharthkp) 59 | 60 | -------------------------------------------------------------------------------- /packages/tracer-motion/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siddharthkp/tracer-motion/c4082ca34d63c05ad927ff52e014937caceac979/packages/tracer-motion/demo.gif -------------------------------------------------------------------------------- /packages/tracer-motion/dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | var React = require('react'); 6 | var framerMotion = require('framer-motion'); 7 | var leva = require('leva'); 8 | 9 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } 10 | 11 | var React__default = /*#__PURE__*/_interopDefaultLegacy(React); 12 | 13 | function ownKeys(object, enumerableOnly) { 14 | var keys = Object.keys(object); 15 | 16 | if (Object.getOwnPropertySymbols) { 17 | var symbols = Object.getOwnPropertySymbols(object); 18 | 19 | if (enumerableOnly) { 20 | symbols = symbols.filter(function (sym) { 21 | return Object.getOwnPropertyDescriptor(object, sym).enumerable; 22 | }); 23 | } 24 | 25 | keys.push.apply(keys, symbols); 26 | } 27 | 28 | return keys; 29 | } 30 | 31 | function _objectSpread2(target) { 32 | for (var i = 1; i < arguments.length; i++) { 33 | var source = arguments[i] != null ? arguments[i] : {}; 34 | 35 | if (i % 2) { 36 | ownKeys(Object(source), true).forEach(function (key) { 37 | _defineProperty(target, key, source[key]); 38 | }); 39 | } else if (Object.getOwnPropertyDescriptors) { 40 | Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 41 | } else { 42 | ownKeys(Object(source)).forEach(function (key) { 43 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 44 | }); 45 | } 46 | } 47 | 48 | return target; 49 | } 50 | 51 | function _defineProperty(obj, key, value) { 52 | if (key in obj) { 53 | Object.defineProperty(obj, key, { 54 | value: value, 55 | enumerable: true, 56 | configurable: true, 57 | writable: true 58 | }); 59 | } else { 60 | obj[key] = value; 61 | } 62 | 63 | return obj; 64 | } 65 | 66 | function _extends() { 67 | _extends = Object.assign || function (target) { 68 | for (var i = 1; i < arguments.length; i++) { 69 | var source = arguments[i]; 70 | 71 | for (var key in source) { 72 | if (Object.prototype.hasOwnProperty.call(source, key)) { 73 | target[key] = source[key]; 74 | } 75 | } 76 | } 77 | 78 | return target; 79 | }; 80 | 81 | return _extends.apply(this, arguments); 82 | } 83 | 84 | function _objectWithoutPropertiesLoose(source, excluded) { 85 | if (source == null) return {}; 86 | var target = {}; 87 | var sourceKeys = Object.keys(source); 88 | var key, i; 89 | 90 | for (i = 0; i < sourceKeys.length; i++) { 91 | key = sourceKeys[i]; 92 | if (excluded.indexOf(key) >= 0) continue; 93 | target[key] = source[key]; 94 | } 95 | 96 | return target; 97 | } 98 | 99 | function _objectWithoutProperties(source, excluded) { 100 | if (source == null) return {}; 101 | 102 | var target = _objectWithoutPropertiesLoose(source, excluded); 103 | 104 | var key, i; 105 | 106 | if (Object.getOwnPropertySymbols) { 107 | var sourceSymbolKeys = Object.getOwnPropertySymbols(source); 108 | 109 | for (i = 0; i < sourceSymbolKeys.length; i++) { 110 | key = sourceSymbolKeys[i]; 111 | if (excluded.indexOf(key) >= 0) continue; 112 | if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; 113 | target[key] = source[key]; 114 | } 115 | } 116 | 117 | return target; 118 | } 119 | 120 | function _slicedToArray(arr, i) { 121 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); 122 | } 123 | 124 | function _toConsumableArray(arr) { 125 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); 126 | } 127 | 128 | function _arrayWithoutHoles(arr) { 129 | if (Array.isArray(arr)) return _arrayLikeToArray(arr); 130 | } 131 | 132 | function _arrayWithHoles(arr) { 133 | if (Array.isArray(arr)) return arr; 134 | } 135 | 136 | function _iterableToArray(iter) { 137 | if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); 138 | } 139 | 140 | function _iterableToArrayLimit(arr, i) { 141 | var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; 142 | 143 | if (_i == null) return; 144 | var _arr = []; 145 | var _n = true; 146 | var _d = false; 147 | 148 | var _s, _e; 149 | 150 | try { 151 | for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { 152 | _arr.push(_s.value); 153 | 154 | if (i && _arr.length === i) break; 155 | } 156 | } catch (err) { 157 | _d = true; 158 | _e = err; 159 | } finally { 160 | try { 161 | if (!_n && _i["return"] != null) _i["return"](); 162 | } finally { 163 | if (_d) throw _e; 164 | } 165 | } 166 | 167 | return _arr; 168 | } 169 | 170 | function _unsupportedIterableToArray(o, minLen) { 171 | if (!o) return; 172 | if (typeof o === "string") return _arrayLikeToArray(o, minLen); 173 | var n = Object.prototype.toString.call(o).slice(8, -1); 174 | if (n === "Object" && o.constructor) n = o.constructor.name; 175 | if (n === "Map" || n === "Set") return Array.from(o); 176 | if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); 177 | } 178 | 179 | function _arrayLikeToArray(arr, len) { 180 | if (len == null || len > arr.length) len = arr.length; 181 | 182 | for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 183 | 184 | return arr2; 185 | } 186 | 187 | function _nonIterableSpread() { 188 | throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 189 | } 190 | 191 | function _nonIterableRest() { 192 | throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 193 | } 194 | 195 | // because we can't call the hook conditionally (rule of hooks) 196 | // so we initialise all TargetProperties 197 | // uncomment this line to chase the types: 198 | // import { Target } from 'framer-motion'; 199 | 200 | var useMotionValues = function useMotionValues(initial) { 201 | var motionValues = { 202 | // TransformProperties 203 | x: framerMotion.useMotionValue(initial.x), 204 | y: framerMotion.useMotionValue(initial.y), 205 | z: framerMotion.useMotionValue(initial.z), 206 | translateX: framerMotion.useMotionValue(initial.translateX), 207 | translateY: framerMotion.useMotionValue(initial.translateY), 208 | translateZ: framerMotion.useMotionValue(initial.translateZ), 209 | rotate: framerMotion.useMotionValue(initial.rotate), 210 | rotateX: framerMotion.useMotionValue(initial.rotateX), 211 | rotateY: framerMotion.useMotionValue(initial.rotateY), 212 | rotateZ: framerMotion.useMotionValue(initial.rotateZ), 213 | scale: framerMotion.useMotionValue(initial.scale), 214 | scaleX: framerMotion.useMotionValue(initial.scaleX), 215 | scaleY: framerMotion.useMotionValue(initial.scaleY), 216 | scaleZ: framerMotion.useMotionValue(initial.scaleZ), 217 | skew: framerMotion.useMotionValue(initial.skew), 218 | skewX: framerMotion.useMotionValue(initial.skewX), 219 | skewY: framerMotion.useMotionValue(initial.skewY), 220 | originX: framerMotion.useMotionValue(initial.originX), 221 | originY: framerMotion.useMotionValue(initial.originY), 222 | originZ: framerMotion.useMotionValue(initial.originZ), 223 | perspective: framerMotion.useMotionValue(initial.perspective), 224 | transformPerspective: framerMotion.useMotionValue(initial.transformPerspective), 225 | // CustomStyles 226 | size: framerMotion.useMotionValue(initial.size), 227 | radius: framerMotion.useMotionValue(initial.radius), 228 | shadow: framerMotion.useMotionValue(initial.shadow), 229 | image: framerMotion.useMotionValue(initial.image), 230 | // SVGPathProperties 231 | pathLength: framerMotion.useMotionValue(initial.pathLength), 232 | pathOffset: framerMotion.useMotionValue(initial.pathOffset), 233 | pathSpacing: framerMotion.useMotionValue(initial.pathSpacing), 234 | // StandardLonghandProperties 235 | alignContent: framerMotion.useMotionValue(initial.alignContent), 236 | alignItems: framerMotion.useMotionValue(initial.alignItems), 237 | alignSelf: framerMotion.useMotionValue(initial.alignSelf), 238 | alignTracks: framerMotion.useMotionValue(initial.alignTracks), 239 | animationDelay: framerMotion.useMotionValue(initial.animationDelay), 240 | animationDirection: framerMotion.useMotionValue(initial.animationDirection), 241 | animationDuration: framerMotion.useMotionValue(initial.animationDuration), 242 | animationFillMode: framerMotion.useMotionValue(initial.animationFillMode), 243 | animationIterationCount: framerMotion.useMotionValue(initial.animationIterationCount), 244 | animationName: framerMotion.useMotionValue(initial.animationName), 245 | animationPlayState: framerMotion.useMotionValue(initial.animationPlayState), 246 | animationTimingFunction: framerMotion.useMotionValue(initial.animationTimingFunction), 247 | appearance: framerMotion.useMotionValue(initial.appearance), 248 | aspectRatio: framerMotion.useMotionValue(initial.aspectRatio), 249 | backdropFilter: framerMotion.useMotionValue(initial.backdropFilter), 250 | backfaceVisibility: framerMotion.useMotionValue(initial.backfaceVisibility), 251 | backgroundAttachment: framerMotion.useMotionValue(initial.backgroundAttachment), 252 | backgroundBlendMode: framerMotion.useMotionValue(initial.backgroundBlendMode), 253 | backgroundClip: framerMotion.useMotionValue(initial.backgroundClip), 254 | backgroundColor: framerMotion.useMotionValue(initial.backgroundColor), 255 | backgroundImage: framerMotion.useMotionValue(initial.backgroundImage), 256 | backgroundOrigin: framerMotion.useMotionValue(initial.backgroundOrigin), 257 | backgroundPosition: framerMotion.useMotionValue(initial.backgroundPosition), 258 | backgroundPositionX: framerMotion.useMotionValue(initial.backgroundPositionX), 259 | backgroundPositionY: framerMotion.useMotionValue(initial.backgroundPositionY), 260 | backgroundRepeat: framerMotion.useMotionValue(initial.backgroundRepeat), 261 | backgroundSize: framerMotion.useMotionValue(initial.backgroundSize), 262 | blockOverflow: framerMotion.useMotionValue(initial.blockOverflow), 263 | blockSize: framerMotion.useMotionValue(initial.blockSize), 264 | borderBlockColor: framerMotion.useMotionValue(initial.borderBlockColor), 265 | borderBlockEndColor: framerMotion.useMotionValue(initial.borderBlockEndColor), 266 | borderBlockEndStyle: framerMotion.useMotionValue(initial.borderBlockEndStyle), 267 | borderBlockEndWidth: framerMotion.useMotionValue(initial.borderBlockEndWidth), 268 | borderBlockStartColor: framerMotion.useMotionValue(initial.borderBlockStartColor), 269 | borderBlockStartStyle: framerMotion.useMotionValue(initial.borderBlockStartStyle), 270 | borderBlockStartWidth: framerMotion.useMotionValue(initial.borderBlockStartWidth), 271 | borderBlockStyle: framerMotion.useMotionValue(initial.borderBlockStyle), 272 | borderBlockWidth: framerMotion.useMotionValue(initial.borderBlockWidth), 273 | borderBottomColor: framerMotion.useMotionValue(initial.borderBottomColor), 274 | borderBottomLeftRadius: framerMotion.useMotionValue(initial.borderBottomLeftRadius), 275 | borderBottomRightRadius: framerMotion.useMotionValue(initial.borderBottomRightRadius), 276 | borderBottomStyle: framerMotion.useMotionValue(initial.borderBottomStyle), 277 | borderBottomWidth: framerMotion.useMotionValue(initial.borderBottomWidth), 278 | borderCollapse: framerMotion.useMotionValue(initial.borderCollapse), 279 | borderEndEndRadius: framerMotion.useMotionValue(initial.borderEndEndRadius), 280 | borderEndStartRadius: framerMotion.useMotionValue(initial.borderEndStartRadius), 281 | borderImageOutset: framerMotion.useMotionValue(initial.borderImageOutset), 282 | borderImageRepeat: framerMotion.useMotionValue(initial.borderImageRepeat), 283 | borderImageSlice: framerMotion.useMotionValue(initial.borderImageSlice), 284 | borderImageSource: framerMotion.useMotionValue(initial.borderImageSource), 285 | borderImageWidth: framerMotion.useMotionValue(initial.borderImageWidth), 286 | borderInlineColor: framerMotion.useMotionValue(initial.borderInlineColor), 287 | borderInlineEndColor: framerMotion.useMotionValue(initial.borderInlineEndColor), 288 | borderInlineEndStyle: framerMotion.useMotionValue(initial.borderInlineEndStyle), 289 | borderInlineEndWidth: framerMotion.useMotionValue(initial.borderInlineEndWidth), 290 | borderInlineStartColor: framerMotion.useMotionValue(initial.borderInlineStartColor), 291 | borderInlineStartStyle: framerMotion.useMotionValue(initial.borderInlineStartStyle), 292 | borderInlineStartWidth: framerMotion.useMotionValue(initial.borderInlineStartWidth), 293 | borderInlineStyle: framerMotion.useMotionValue(initial.borderInlineStyle), 294 | borderInlineWidth: framerMotion.useMotionValue(initial.borderInlineWidth), 295 | borderLeftColor: framerMotion.useMotionValue(initial.borderLeftColor), 296 | borderLeftStyle: framerMotion.useMotionValue(initial.borderLeftStyle), 297 | borderLeftWidth: framerMotion.useMotionValue(initial.borderLeftWidth), 298 | borderRightColor: framerMotion.useMotionValue(initial.borderRightColor), 299 | borderRightStyle: framerMotion.useMotionValue(initial.borderRightStyle), 300 | borderRightWidth: framerMotion.useMotionValue(initial.borderRightWidth), 301 | borderSpacing: framerMotion.useMotionValue(initial.borderSpacing), 302 | borderStartEndRadius: framerMotion.useMotionValue(initial.borderStartEndRadius), 303 | borderStartStartRadius: framerMotion.useMotionValue(initial.borderStartStartRadius), 304 | borderTopColor: framerMotion.useMotionValue(initial.borderTopColor), 305 | borderTopLeftRadius: framerMotion.useMotionValue(initial.borderTopLeftRadius), 306 | borderTopRightRadius: framerMotion.useMotionValue(initial.borderTopRightRadius), 307 | borderTopStyle: framerMotion.useMotionValue(initial.borderTopStyle), 308 | borderTopWidth: framerMotion.useMotionValue(initial.borderTopWidth), 309 | bottom: framerMotion.useMotionValue(initial.bottom), 310 | boxDecorationBreak: framerMotion.useMotionValue(initial.boxDecorationBreak), 311 | boxShadow: framerMotion.useMotionValue(initial.boxShadow), 312 | boxSizing: framerMotion.useMotionValue(initial.boxSizing), 313 | breakAfter: framerMotion.useMotionValue(initial.breakAfter), 314 | breakBefore: framerMotion.useMotionValue(initial.breakBefore), 315 | breakInside: framerMotion.useMotionValue(initial.breakInside), 316 | captionSide: framerMotion.useMotionValue(initial.captionSide), 317 | caretColor: framerMotion.useMotionValue(initial.caretColor), 318 | clear: framerMotion.useMotionValue(initial.clear), 319 | clipPath: framerMotion.useMotionValue(initial.clipPath), 320 | color: framerMotion.useMotionValue(initial.color), 321 | colorAdjust: framerMotion.useMotionValue(initial.colorAdjust), 322 | columnCount: framerMotion.useMotionValue(initial.columnCount), 323 | columnFill: framerMotion.useMotionValue(initial.columnFill), 324 | columnGap: framerMotion.useMotionValue(initial.columnGap), 325 | columnRuleColor: framerMotion.useMotionValue(initial.columnRuleColor), 326 | columnRuleStyle: framerMotion.useMotionValue(initial.columnRuleStyle), 327 | columnRuleWidth: framerMotion.useMotionValue(initial.columnRuleWidth), 328 | columnSpan: framerMotion.useMotionValue(initial.columnSpan), 329 | columnWidth: framerMotion.useMotionValue(initial.columnWidth), 330 | contain: framerMotion.useMotionValue(initial.contain), 331 | content: framerMotion.useMotionValue(initial.content), 332 | contentVisibility: framerMotion.useMotionValue(initial.contentVisibility), 333 | counterIncrement: framerMotion.useMotionValue(initial.counterIncrement), 334 | counterReset: framerMotion.useMotionValue(initial.counterReset), 335 | counterSet: framerMotion.useMotionValue(initial.counterSet), 336 | cursor: framerMotion.useMotionValue(initial.cursor), 337 | direction: framerMotion.useMotionValue(initial.direction), 338 | display: framerMotion.useMotionValue(initial.display), 339 | emptyCells: framerMotion.useMotionValue(initial.emptyCells), 340 | filter: framerMotion.useMotionValue(initial.filter), 341 | flexBasis: framerMotion.useMotionValue(initial.flexBasis), 342 | flexDirection: framerMotion.useMotionValue(initial.flexDirection), 343 | flexGrow: framerMotion.useMotionValue(initial.flexGrow), 344 | flexShrink: framerMotion.useMotionValue(initial.flexShrink), 345 | flexWrap: framerMotion.useMotionValue(initial.flexWrap), 346 | "float": framerMotion.useMotionValue(initial["float"]), 347 | fontFamily: framerMotion.useMotionValue(initial.fontFamily), 348 | fontFeatureSettings: framerMotion.useMotionValue(initial.fontFeatureSettings), 349 | fontKerning: framerMotion.useMotionValue(initial.fontKerning), 350 | fontLanguageOverride: framerMotion.useMotionValue(initial.fontLanguageOverride), 351 | fontOpticalSizing: framerMotion.useMotionValue(initial.fontOpticalSizing), 352 | fontSize: framerMotion.useMotionValue(initial.fontSize), 353 | fontSizeAdjust: framerMotion.useMotionValue(initial.fontSizeAdjust), 354 | fontSmooth: framerMotion.useMotionValue(initial.fontSmooth), 355 | fontStretch: framerMotion.useMotionValue(initial.fontStretch), 356 | fontStyle: framerMotion.useMotionValue(initial.fontStyle), 357 | fontSynthesis: framerMotion.useMotionValue(initial.fontSynthesis), 358 | fontVariant: framerMotion.useMotionValue(initial.fontVariant), 359 | fontVariantCaps: framerMotion.useMotionValue(initial.fontVariantCaps), 360 | fontVariantEastAsian: framerMotion.useMotionValue(initial.fontVariantEastAsian), 361 | fontVariantLigatures: framerMotion.useMotionValue(initial.fontVariantLigatures), 362 | fontVariantNumeric: framerMotion.useMotionValue(initial.fontVariantNumeric), 363 | fontVariantPosition: framerMotion.useMotionValue(initial.fontVariantPosition), 364 | fontVariationSettings: framerMotion.useMotionValue(initial.fontVariationSettings), 365 | fontWeight: framerMotion.useMotionValue(initial.fontWeight), 366 | forcedColorAdjust: framerMotion.useMotionValue(initial.forcedColorAdjust), 367 | gridAutoColumns: framerMotion.useMotionValue(initial.gridAutoColumns), 368 | gridAutoFlow: framerMotion.useMotionValue(initial.gridAutoFlow), 369 | gridAutoRows: framerMotion.useMotionValue(initial.gridAutoRows), 370 | gridColumnEnd: framerMotion.useMotionValue(initial.gridColumnEnd), 371 | gridColumnStart: framerMotion.useMotionValue(initial.gridColumnStart), 372 | gridRowEnd: framerMotion.useMotionValue(initial.gridRowEnd), 373 | gridRowStart: framerMotion.useMotionValue(initial.gridRowStart), 374 | gridTemplateAreas: framerMotion.useMotionValue(initial.gridTemplateAreas), 375 | gridTemplateColumns: framerMotion.useMotionValue(initial.gridTemplateColumns), 376 | gridTemplateRows: framerMotion.useMotionValue(initial.gridTemplateRows), 377 | hangingPunctuation: framerMotion.useMotionValue(initial.hangingPunctuation), 378 | height: framerMotion.useMotionValue(initial.height), 379 | hyphens: framerMotion.useMotionValue(initial.hyphens), 380 | imageOrientation: framerMotion.useMotionValue(initial.imageOrientation), 381 | imageRendering: framerMotion.useMotionValue(initial.imageRendering), 382 | imageResolution: framerMotion.useMotionValue(initial.imageResolution), 383 | initialLetter: framerMotion.useMotionValue(initial.initialLetter), 384 | inlineSize: framerMotion.useMotionValue(initial.inlineSize), 385 | inset: framerMotion.useMotionValue(initial.inset), 386 | insetBlock: framerMotion.useMotionValue(initial.insetBlock), 387 | insetBlockEnd: framerMotion.useMotionValue(initial.insetBlockEnd), 388 | insetBlockStart: framerMotion.useMotionValue(initial.insetBlockStart), 389 | insetInline: framerMotion.useMotionValue(initial.insetInline), 390 | insetInlineEnd: framerMotion.useMotionValue(initial.insetInlineEnd), 391 | insetInlineStart: framerMotion.useMotionValue(initial.insetInlineStart), 392 | isolation: framerMotion.useMotionValue(initial.isolation), 393 | justifyContent: framerMotion.useMotionValue(initial.justifyContent), 394 | justifyItems: framerMotion.useMotionValue(initial.justifyItems), 395 | justifySelf: framerMotion.useMotionValue(initial.justifySelf), 396 | justifyTracks: framerMotion.useMotionValue(initial.justifyTracks), 397 | left: framerMotion.useMotionValue(initial.left), 398 | letterSpacing: framerMotion.useMotionValue(initial.letterSpacing), 399 | lineBreak: framerMotion.useMotionValue(initial.lineBreak), 400 | lineHeight: framerMotion.useMotionValue(initial.lineHeight), 401 | lineHeightStep: framerMotion.useMotionValue(initial.lineHeightStep), 402 | listStyleImage: framerMotion.useMotionValue(initial.listStyleImage), 403 | listStylePosition: framerMotion.useMotionValue(initial.listStylePosition), 404 | listStyleType: framerMotion.useMotionValue(initial.listStyleType), 405 | marginBlock: framerMotion.useMotionValue(initial.marginBlock), 406 | marginBlockEnd: framerMotion.useMotionValue(initial.marginBlockEnd), 407 | marginBlockStart: framerMotion.useMotionValue(initial.marginBlockStart), 408 | marginBottom: framerMotion.useMotionValue(initial.marginBottom), 409 | marginInline: framerMotion.useMotionValue(initial.marginInline), 410 | marginInlineEnd: framerMotion.useMotionValue(initial.marginInlineEnd), 411 | marginInlineStart: framerMotion.useMotionValue(initial.marginInlineStart), 412 | marginLeft: framerMotion.useMotionValue(initial.marginLeft), 413 | marginRight: framerMotion.useMotionValue(initial.marginRight), 414 | marginTop: framerMotion.useMotionValue(initial.marginTop), 415 | maskBorderMode: framerMotion.useMotionValue(initial.maskBorderMode), 416 | maskBorderOutset: framerMotion.useMotionValue(initial.maskBorderOutset), 417 | maskBorderRepeat: framerMotion.useMotionValue(initial.maskBorderRepeat), 418 | maskBorderSlice: framerMotion.useMotionValue(initial.maskBorderSlice), 419 | maskBorderSource: framerMotion.useMotionValue(initial.maskBorderSource), 420 | maskBorderWidth: framerMotion.useMotionValue(initial.maskBorderWidth), 421 | maskClip: framerMotion.useMotionValue(initial.maskClip), 422 | maskComposite: framerMotion.useMotionValue(initial.maskComposite), 423 | maskImage: framerMotion.useMotionValue(initial.maskImage), 424 | maskMode: framerMotion.useMotionValue(initial.maskMode), 425 | maskOrigin: framerMotion.useMotionValue(initial.maskOrigin), 426 | maskPosition: framerMotion.useMotionValue(initial.maskPosition), 427 | maskRepeat: framerMotion.useMotionValue(initial.maskRepeat), 428 | maskSize: framerMotion.useMotionValue(initial.maskSize), 429 | maskType: framerMotion.useMotionValue(initial.maskType), 430 | mathStyle: framerMotion.useMotionValue(initial.mathStyle), 431 | maxBlockSize: framerMotion.useMotionValue(initial.maxBlockSize), 432 | maxHeight: framerMotion.useMotionValue(initial.maxHeight), 433 | maxInlineSize: framerMotion.useMotionValue(initial.maxInlineSize), 434 | maxLines: framerMotion.useMotionValue(initial.maxLines), 435 | maxWidth: framerMotion.useMotionValue(initial.maxWidth), 436 | minBlockSize: framerMotion.useMotionValue(initial.minBlockSize), 437 | minHeight: framerMotion.useMotionValue(initial.minHeight), 438 | minInlineSize: framerMotion.useMotionValue(initial.minInlineSize), 439 | minWidth: framerMotion.useMotionValue(initial.minWidth), 440 | mixBlendMode: framerMotion.useMotionValue(initial.mixBlendMode), 441 | motionDistance: framerMotion.useMotionValue(initial.motionDistance), 442 | motionPath: framerMotion.useMotionValue(initial.motionPath), 443 | motionRotation: framerMotion.useMotionValue(initial.motionRotation), 444 | objectFit: framerMotion.useMotionValue(initial.objectFit), 445 | objectPosition: framerMotion.useMotionValue(initial.objectPosition), 446 | offsetAnchor: framerMotion.useMotionValue(initial.offsetAnchor), 447 | offsetDistance: framerMotion.useMotionValue(initial.offsetDistance), 448 | offsetPath: framerMotion.useMotionValue(initial.offsetPath), 449 | offsetRotate: framerMotion.useMotionValue(initial.offsetRotate), 450 | offsetRotation: framerMotion.useMotionValue(initial.offsetRotation), 451 | opacity: framerMotion.useMotionValue(initial.opacity), 452 | order: framerMotion.useMotionValue(initial.order), 453 | orphans: framerMotion.useMotionValue(initial.orphans), 454 | outlineColor: framerMotion.useMotionValue(initial.outlineColor), 455 | outlineOffset: framerMotion.useMotionValue(initial.outlineOffset), 456 | outlineStyle: framerMotion.useMotionValue(initial.outlineStyle), 457 | outlineWidth: framerMotion.useMotionValue(initial.outlineWidth), 458 | overflowAnchor: framerMotion.useMotionValue(initial.overflowAnchor), 459 | overflowBlock: framerMotion.useMotionValue(initial.overflowBlock), 460 | overflowClipBox: framerMotion.useMotionValue(initial.overflowClipBox), 461 | overflowInline: framerMotion.useMotionValue(initial.overflowInline), 462 | overflowWrap: framerMotion.useMotionValue(initial.overflowWrap), 463 | overflowX: framerMotion.useMotionValue(initial.overflowX), 464 | overflowY: framerMotion.useMotionValue(initial.overflowY), 465 | overscrollBehavior: framerMotion.useMotionValue(initial.overscrollBehavior), 466 | overscrollBehaviorBlock: framerMotion.useMotionValue(initial.overscrollBehaviorBlock), 467 | overscrollBehaviorInline: framerMotion.useMotionValue(initial.overscrollBehaviorInline), 468 | overscrollBehaviorX: framerMotion.useMotionValue(initial.overscrollBehaviorX), 469 | overscrollBehaviorY: framerMotion.useMotionValue(initial.overscrollBehaviorY), 470 | paddingBlock: framerMotion.useMotionValue(initial.paddingBlock), 471 | paddingBlockEnd: framerMotion.useMotionValue(initial.paddingBlockEnd), 472 | paddingBlockStart: framerMotion.useMotionValue(initial.paddingBlockStart), 473 | paddingBottom: framerMotion.useMotionValue(initial.paddingBottom), 474 | paddingInline: framerMotion.useMotionValue(initial.paddingInline), 475 | paddingInlineEnd: framerMotion.useMotionValue(initial.paddingInlineEnd), 476 | paddingInlineStart: framerMotion.useMotionValue(initial.paddingInlineStart), 477 | paddingLeft: framerMotion.useMotionValue(initial.paddingLeft), 478 | paddingRight: framerMotion.useMotionValue(initial.paddingRight), 479 | paddingTop: framerMotion.useMotionValue(initial.paddingTop), 480 | pageBreakAfter: framerMotion.useMotionValue(initial.pageBreakAfter), 481 | pageBreakBefore: framerMotion.useMotionValue(initial.pageBreakBefore), 482 | pageBreakInside: framerMotion.useMotionValue(initial.pageBreakInside), 483 | paintOrder: framerMotion.useMotionValue(initial.paintOrder), 484 | // perspective: useMotionValue(initial.perspective), 485 | perspectiveOrigin: framerMotion.useMotionValue(initial.perspectiveOrigin), 486 | placeContent: framerMotion.useMotionValue(initial.placeContent), 487 | pointerEvents: framerMotion.useMotionValue(initial.pointerEvents), 488 | position: framerMotion.useMotionValue(initial.position), 489 | quotes: framerMotion.useMotionValue(initial.quotes), 490 | resize: framerMotion.useMotionValue(initial.resize), 491 | right: framerMotion.useMotionValue(initial.right), 492 | // rotate: useMotionValue(initial.rotate), 493 | rowGap: framerMotion.useMotionValue(initial.rowGap), 494 | rubyAlign: framerMotion.useMotionValue(initial.rubyAlign), 495 | rubyMerge: framerMotion.useMotionValue(initial.rubyMerge), 496 | rubyPosition: framerMotion.useMotionValue(initial.rubyPosition), 497 | // scale: useMotionValue(initial.scale), 498 | scrollBehavior: framerMotion.useMotionValue(initial.scrollBehavior), 499 | scrollMargin: framerMotion.useMotionValue(initial.scrollMargin), 500 | scrollMarginBlock: framerMotion.useMotionValue(initial.scrollMarginBlock), 501 | scrollMarginBlockEnd: framerMotion.useMotionValue(initial.scrollMarginBlockEnd), 502 | scrollMarginBlockStart: framerMotion.useMotionValue(initial.scrollMarginBlockStart), 503 | scrollMarginBottom: framerMotion.useMotionValue(initial.scrollMarginBottom), 504 | scrollMarginInline: framerMotion.useMotionValue(initial.scrollMarginInline), 505 | scrollMarginInlineEnd: framerMotion.useMotionValue(initial.scrollMarginInlineEnd), 506 | scrollMarginInlineStart: framerMotion.useMotionValue(initial.scrollMarginInlineStart), 507 | scrollMarginLeft: framerMotion.useMotionValue(initial.scrollMarginLeft), 508 | scrollMarginRight: framerMotion.useMotionValue(initial.scrollMarginRight), 509 | scrollMarginTop: framerMotion.useMotionValue(initial.scrollMarginTop), 510 | scrollPadding: framerMotion.useMotionValue(initial.scrollPadding), 511 | scrollPaddingBlock: framerMotion.useMotionValue(initial.scrollPaddingBlock), 512 | scrollPaddingBlockEnd: framerMotion.useMotionValue(initial.scrollPaddingBlockEnd), 513 | scrollPaddingBlockStart: framerMotion.useMotionValue(initial.scrollPaddingBlockStart), 514 | scrollPaddingBottom: framerMotion.useMotionValue(initial.scrollPaddingBottom), 515 | scrollPaddingInline: framerMotion.useMotionValue(initial.scrollPaddingInline), 516 | scrollPaddingInlineEnd: framerMotion.useMotionValue(initial.scrollPaddingInlineEnd), 517 | scrollPaddingInlineStart: framerMotion.useMotionValue(initial.scrollPaddingInlineStart), 518 | scrollPaddingLeft: framerMotion.useMotionValue(initial.scrollPaddingLeft), 519 | scrollPaddingRight: framerMotion.useMotionValue(initial.scrollPaddingRight), 520 | scrollPaddingTop: framerMotion.useMotionValue(initial.scrollPaddingTop), 521 | scrollSnapAlign: framerMotion.useMotionValue(initial.scrollSnapAlign), 522 | scrollSnapMargin: framerMotion.useMotionValue(initial.scrollSnapMargin), 523 | scrollSnapMarginBottom: framerMotion.useMotionValue(initial.scrollSnapMarginBottom), 524 | scrollSnapMarginLeft: framerMotion.useMotionValue(initial.scrollSnapMarginLeft), 525 | scrollSnapMarginRight: framerMotion.useMotionValue(initial.scrollSnapMarginRight), 526 | scrollSnapMarginTop: framerMotion.useMotionValue(initial.scrollSnapMarginTop), 527 | scrollSnapStop: framerMotion.useMotionValue(initial.scrollSnapStop), 528 | scrollSnapType: framerMotion.useMotionValue(initial.scrollSnapType), 529 | scrollbarColor: framerMotion.useMotionValue(initial.scrollbarColor), 530 | scrollbarGutter: framerMotion.useMotionValue(initial.scrollbarGutter), 531 | scrollbarWidth: framerMotion.useMotionValue(initial.scrollbarWidth), 532 | shapeImageThreshold: framerMotion.useMotionValue(initial.shapeImageThreshold), 533 | shapeMargin: framerMotion.useMotionValue(initial.shapeMargin), 534 | shapeOutside: framerMotion.useMotionValue(initial.shapeOutside), 535 | tabSize: framerMotion.useMotionValue(initial.tabSize), 536 | tableLayout: framerMotion.useMotionValue(initial.tableLayout), 537 | textAlign: framerMotion.useMotionValue(initial.textAlign), 538 | textAlignLast: framerMotion.useMotionValue(initial.textAlignLast), 539 | textCombineUpright: framerMotion.useMotionValue(initial.textCombineUpright), 540 | textDecorationColor: framerMotion.useMotionValue(initial.textDecorationColor), 541 | textDecorationLine: framerMotion.useMotionValue(initial.textDecorationLine), 542 | textDecorationSkip: framerMotion.useMotionValue(initial.textDecorationSkip), 543 | textDecorationSkipInk: framerMotion.useMotionValue(initial.textDecorationSkipInk), 544 | textDecorationStyle: framerMotion.useMotionValue(initial.textDecorationStyle), 545 | textDecorationThickness: framerMotion.useMotionValue(initial.textDecorationThickness), 546 | textDecorationWidth: framerMotion.useMotionValue(initial.textDecorationWidth), 547 | textEmphasisColor: framerMotion.useMotionValue(initial.textEmphasisColor), 548 | textEmphasisPosition: framerMotion.useMotionValue(initial.textEmphasisPosition), 549 | textEmphasisStyle: framerMotion.useMotionValue(initial.textEmphasisStyle), 550 | textIndent: framerMotion.useMotionValue(initial.textIndent), 551 | textJustify: framerMotion.useMotionValue(initial.textJustify), 552 | textOrientation: framerMotion.useMotionValue(initial.textOrientation), 553 | textOverflow: framerMotion.useMotionValue(initial.textOverflow), 554 | textRendering: framerMotion.useMotionValue(initial.textRendering), 555 | textShadow: framerMotion.useMotionValue(initial.textShadow), 556 | textSizeAdjust: framerMotion.useMotionValue(initial.textSizeAdjust), 557 | textTransform: framerMotion.useMotionValue(initial.textTransform), 558 | textUnderlineOffset: framerMotion.useMotionValue(initial.textUnderlineOffset), 559 | textUnderlinePosition: framerMotion.useMotionValue(initial.textUnderlinePosition), 560 | top: framerMotion.useMotionValue(initial.top), 561 | touchAction: framerMotion.useMotionValue(initial.touchAction), 562 | transform: framerMotion.useMotionValue(initial.transform), 563 | transformOrigin: framerMotion.useMotionValue(initial.transformOrigin), 564 | transformStyle: framerMotion.useMotionValue(initial.transformStyle), 565 | transitionDelay: framerMotion.useMotionValue(initial.transitionDelay), 566 | transitionDuration: framerMotion.useMotionValue(initial.transitionDuration), 567 | transitionProperty: framerMotion.useMotionValue(initial.transitionProperty), 568 | transitionTimingFunction: framerMotion.useMotionValue(initial.transitionTimingFunction), 569 | translate: framerMotion.useMotionValue(initial.translate), 570 | unicodeBidi: framerMotion.useMotionValue(initial.unicodeBidi), 571 | userSelect: framerMotion.useMotionValue(initial.userSelect), 572 | verticalAlign: framerMotion.useMotionValue(initial.verticalAlign), 573 | visibility: framerMotion.useMotionValue(initial.visibility), 574 | whiteSpace: framerMotion.useMotionValue(initial.whiteSpace), 575 | widows: framerMotion.useMotionValue(initial.widows), 576 | width: framerMotion.useMotionValue(initial.width), 577 | willChange: framerMotion.useMotionValue(initial.willChange), 578 | wordBreak: framerMotion.useMotionValue(initial.wordBreak), 579 | wordSpacing: framerMotion.useMotionValue(initial.wordSpacing), 580 | wordWrap: framerMotion.useMotionValue(initial.wordWrap), 581 | writingMode: framerMotion.useMotionValue(initial.writingMode), 582 | zIndex: framerMotion.useMotionValue(initial.zIndex), 583 | zoom: framerMotion.useMotionValue(initial.zoom), 584 | // StandardShorthandProperties 585 | all: framerMotion.useMotionValue(initial.all), 586 | animation: framerMotion.useMotionValue(initial.animation), 587 | background: framerMotion.useMotionValue(initial.background), 588 | border: framerMotion.useMotionValue(initial.border), 589 | borderBlock: framerMotion.useMotionValue(initial.borderBlock), 590 | borderBlockEnd: framerMotion.useMotionValue(initial.borderBlockEnd), 591 | borderBlockStart: framerMotion.useMotionValue(initial.borderBlockStart), 592 | borderBottom: framerMotion.useMotionValue(initial.borderBottom), 593 | borderColor: framerMotion.useMotionValue(initial.borderColor), 594 | borderImage: framerMotion.useMotionValue(initial.borderImage), 595 | borderInline: framerMotion.useMotionValue(initial.borderInline), 596 | borderInlineEnd: framerMotion.useMotionValue(initial.borderInlineEnd), 597 | borderInlineStart: framerMotion.useMotionValue(initial.borderInlineStart), 598 | borderLeft: framerMotion.useMotionValue(initial.borderLeft), 599 | borderRadius: framerMotion.useMotionValue(initial.borderRadius), 600 | borderRight: framerMotion.useMotionValue(initial.borderRight), 601 | borderStyle: framerMotion.useMotionValue(initial.borderStyle), 602 | borderTop: framerMotion.useMotionValue(initial.borderTop), 603 | borderWidth: framerMotion.useMotionValue(initial.borderWidth), 604 | columnRule: framerMotion.useMotionValue(initial.columnRule), 605 | columns: framerMotion.useMotionValue(initial.columns), 606 | flex: framerMotion.useMotionValue(initial.flex), 607 | flexFlow: framerMotion.useMotionValue(initial.flexFlow), 608 | font: framerMotion.useMotionValue(initial.font), 609 | gap: framerMotion.useMotionValue(initial.gap), 610 | grid: framerMotion.useMotionValue(initial.grid), 611 | gridArea: framerMotion.useMotionValue(initial.gridArea), 612 | gridColumn: framerMotion.useMotionValue(initial.gridColumn), 613 | gridRow: framerMotion.useMotionValue(initial.gridRow), 614 | gridTemplate: framerMotion.useMotionValue(initial.gridTemplate), 615 | lineClamp: framerMotion.useMotionValue(initial.lineClamp), 616 | listStyle: framerMotion.useMotionValue(initial.listStyle), 617 | margin: framerMotion.useMotionValue(initial.margin), 618 | mask: framerMotion.useMotionValue(initial.mask), 619 | maskBorder: framerMotion.useMotionValue(initial.maskBorder), 620 | motion: framerMotion.useMotionValue(initial.motion), 621 | offset: framerMotion.useMotionValue(initial.offset), 622 | outline: framerMotion.useMotionValue(initial.outline), 623 | overflow: framerMotion.useMotionValue(initial.overflow), 624 | padding: framerMotion.useMotionValue(initial.padding), 625 | placeItems: framerMotion.useMotionValue(initial.placeItems), 626 | placeSelf: framerMotion.useMotionValue(initial.placeSelf), 627 | textDecoration: framerMotion.useMotionValue(initial.textDecoration), 628 | textEmphasis: framerMotion.useMotionValue(initial.textEmphasis), 629 | transition: framerMotion.useMotionValue(initial.transition), 630 | // VendorLonghandProperties 631 | MozAnimationDelay: framerMotion.useMotionValue(initial.MozAnimationDelay), 632 | MozAnimationDirection: framerMotion.useMotionValue(initial.MozAnimationDirection), 633 | MozAnimationDuration: framerMotion.useMotionValue(initial.MozAnimationDuration), 634 | MozAnimationFillMode: framerMotion.useMotionValue(initial.MozAnimationFillMode), 635 | MozAnimationIterationCount: framerMotion.useMotionValue(initial.MozAnimationIterationCount), 636 | MozAnimationName: framerMotion.useMotionValue(initial.MozAnimationName), 637 | MozAnimationPlayState: framerMotion.useMotionValue(initial.MozAnimationPlayState), 638 | MozAnimationTimingFunction: framerMotion.useMotionValue(initial.MozAnimationTimingFunction), 639 | MozAppearance: framerMotion.useMotionValue(initial.MozAppearance), 640 | MozBackfaceVisibility: framerMotion.useMotionValue(initial.MozBackfaceVisibility), 641 | MozBorderBottomColors: framerMotion.useMotionValue(initial.MozBorderBottomColors), 642 | MozBorderEndColor: framerMotion.useMotionValue(initial.MozBorderEndColor), 643 | MozBorderEndStyle: framerMotion.useMotionValue(initial.MozBorderEndStyle), 644 | MozBorderEndWidth: framerMotion.useMotionValue(initial.MozBorderEndWidth), 645 | MozBorderLeftColors: framerMotion.useMotionValue(initial.MozBorderLeftColors), 646 | MozBorderRightColors: framerMotion.useMotionValue(initial.MozBorderRightColors), 647 | MozBorderStartColor: framerMotion.useMotionValue(initial.MozBorderStartColor), 648 | MozBorderStartStyle: framerMotion.useMotionValue(initial.MozBorderStartStyle), 649 | MozBorderTopColors: framerMotion.useMotionValue(initial.MozBorderTopColors), 650 | MozBoxSizing: framerMotion.useMotionValue(initial.MozBoxSizing), 651 | MozColumnCount: framerMotion.useMotionValue(initial.MozColumnCount), 652 | MozColumnFill: framerMotion.useMotionValue(initial.MozColumnFill), 653 | MozColumnGap: framerMotion.useMotionValue(initial.MozColumnGap), 654 | MozColumnRuleColor: framerMotion.useMotionValue(initial.MozColumnRuleColor), 655 | MozColumnRuleStyle: framerMotion.useMotionValue(initial.MozColumnRuleStyle), 656 | MozColumnRuleWidth: framerMotion.useMotionValue(initial.MozColumnRuleWidth), 657 | MozColumnWidth: framerMotion.useMotionValue(initial.MozColumnWidth), 658 | MozContextProperties: framerMotion.useMotionValue(initial.MozContextProperties), 659 | MozFontFeatureSettings: framerMotion.useMotionValue(initial.MozFontFeatureSettings), 660 | MozFontLanguageOverride: framerMotion.useMotionValue(initial.MozFontLanguageOverride), 661 | MozHyphens: framerMotion.useMotionValue(initial.MozHyphens), 662 | MozImageRegion: framerMotion.useMotionValue(initial.MozImageRegion), 663 | MozMarginEnd: framerMotion.useMotionValue(initial.MozMarginEnd), 664 | MozMarginStart: framerMotion.useMotionValue(initial.MozMarginStart), 665 | MozOrient: framerMotion.useMotionValue(initial.MozOrient), 666 | MozOsxFontSmoothing: framerMotion.useMotionValue(initial.MozOsxFontSmoothing), 667 | MozPaddingEnd: framerMotion.useMotionValue(initial.MozPaddingEnd), 668 | MozPaddingStart: framerMotion.useMotionValue(initial.MozPaddingStart), 669 | MozPerspective: framerMotion.useMotionValue(initial.MozPerspective), 670 | MozPerspectiveOrigin: framerMotion.useMotionValue(initial.MozPerspectiveOrigin), 671 | MozStackSizing: framerMotion.useMotionValue(initial.MozStackSizing), 672 | MozTabSize: framerMotion.useMotionValue(initial.MozTabSize), 673 | MozTextBlink: framerMotion.useMotionValue(initial.MozTextBlink), 674 | MozTextSizeAdjust: framerMotion.useMotionValue(initial.MozTextSizeAdjust), 675 | MozTransformOrigin: framerMotion.useMotionValue(initial.MozTransformOrigin), 676 | MozTransformStyle: framerMotion.useMotionValue(initial.MozTransformStyle), 677 | MozTransitionDelay: framerMotion.useMotionValue(initial.MozTransitionDelay), 678 | MozTransitionDuration: framerMotion.useMotionValue(initial.MozTransitionDuration), 679 | MozTransitionProperty: framerMotion.useMotionValue(initial.MozTransitionProperty), 680 | MozTransitionTimingFunction: framerMotion.useMotionValue(initial.MozTransitionTimingFunction), 681 | MozUserFocus: framerMotion.useMotionValue(initial.MozUserFocus), 682 | MozUserModify: framerMotion.useMotionValue(initial.MozUserModify), 683 | MozUserSelect: framerMotion.useMotionValue(initial.MozUserSelect), 684 | MozWindowDragging: framerMotion.useMotionValue(initial.MozWindowDragging), 685 | MozWindowShadow: framerMotion.useMotionValue(initial.MozWindowShadow), 686 | msAccelerator: framerMotion.useMotionValue(initial.msAccelerator), 687 | msAlignSelf: framerMotion.useMotionValue(initial.msAlignSelf), 688 | msBlockProgression: framerMotion.useMotionValue(initial.msBlockProgression), 689 | msContentZoomChaining: framerMotion.useMotionValue(initial.msContentZoomChaining), 690 | msContentZoomLimitMax: framerMotion.useMotionValue(initial.msContentZoomLimitMax), 691 | msContentZoomLimitMin: framerMotion.useMotionValue(initial.msContentZoomLimitMin), 692 | msContentZoomSnapPoints: framerMotion.useMotionValue(initial.msContentZoomSnapPoints), 693 | msContentZoomSnapType: framerMotion.useMotionValue(initial.msContentZoomSnapType), 694 | msContentZooming: framerMotion.useMotionValue(initial.msContentZooming), 695 | msFilter: framerMotion.useMotionValue(initial.msFilter), 696 | msFlexDirection: framerMotion.useMotionValue(initial.msFlexDirection), 697 | msFlexPositive: framerMotion.useMotionValue(initial.msFlexPositive), 698 | msFlowFrom: framerMotion.useMotionValue(initial.msFlowFrom), 699 | msFlowInto: framerMotion.useMotionValue(initial.msFlowInto), 700 | msGridColumns: framerMotion.useMotionValue(initial.msGridColumns), 701 | msGridRows: framerMotion.useMotionValue(initial.msGridRows), 702 | msHighContrastAdjust: framerMotion.useMotionValue(initial.msHighContrastAdjust), 703 | msHyphenateLimitChars: framerMotion.useMotionValue(initial.msHyphenateLimitChars), 704 | msHyphenateLimitLines: framerMotion.useMotionValue(initial.msHyphenateLimitLines), 705 | msHyphenateLimitZone: framerMotion.useMotionValue(initial.msHyphenateLimitZone), 706 | msHyphens: framerMotion.useMotionValue(initial.msHyphens), 707 | msImeAlign: framerMotion.useMotionValue(initial.msImeAlign), 708 | msJustifySelf: framerMotion.useMotionValue(initial.msJustifySelf), 709 | msLineBreak: framerMotion.useMotionValue(initial.msLineBreak), 710 | msOrder: framerMotion.useMotionValue(initial.msOrder), 711 | msOverflowStyle: framerMotion.useMotionValue(initial.msOverflowStyle), 712 | msOverflowX: framerMotion.useMotionValue(initial.msOverflowX), 713 | msOverflowY: framerMotion.useMotionValue(initial.msOverflowY), 714 | msScrollChaining: framerMotion.useMotionValue(initial.msScrollChaining), 715 | msScrollLimitXMax: framerMotion.useMotionValue(initial.msScrollLimitXMax), 716 | msScrollLimitXMin: framerMotion.useMotionValue(initial.msScrollLimitXMin), 717 | msScrollLimitYMax: framerMotion.useMotionValue(initial.msScrollLimitYMax), 718 | msScrollLimitYMin: framerMotion.useMotionValue(initial.msScrollLimitYMin), 719 | msScrollRails: framerMotion.useMotionValue(initial.msScrollRails), 720 | msScrollSnapPointsX: framerMotion.useMotionValue(initial.msScrollSnapPointsX), 721 | msScrollSnapPointsY: framerMotion.useMotionValue(initial.msScrollSnapPointsY), 722 | msScrollSnapType: framerMotion.useMotionValue(initial.msScrollSnapType), 723 | msScrollTranslation: framerMotion.useMotionValue(initial.msScrollTranslation), 724 | msScrollbar3dlightColor: framerMotion.useMotionValue(initial.msScrollbar3dlightColor), 725 | msScrollbarArrowColor: framerMotion.useMotionValue(initial.msScrollbarArrowColor), 726 | msScrollbarBaseColor: framerMotion.useMotionValue(initial.msScrollbarBaseColor), 727 | msScrollbarDarkshadowColor: framerMotion.useMotionValue(initial.msScrollbarDarkshadowColor), 728 | msScrollbarFaceColor: framerMotion.useMotionValue(initial.msScrollbarFaceColor), 729 | msScrollbarHighlightColor: framerMotion.useMotionValue(initial.msScrollbarHighlightColor), 730 | msScrollbarShadowColor: framerMotion.useMotionValue(initial.msScrollbarShadowColor), 731 | msTextAutospace: framerMotion.useMotionValue(initial.msTextAutospace), 732 | msTextCombineHorizontal: framerMotion.useMotionValue(initial.msTextCombineHorizontal), 733 | msTextOverflow: framerMotion.useMotionValue(initial.msTextOverflow), 734 | msTouchAction: framerMotion.useMotionValue(initial.msTouchAction), 735 | msTouchSelect: framerMotion.useMotionValue(initial.msTouchSelect), 736 | msTransform: framerMotion.useMotionValue(initial.msTransform), 737 | msTransformOrigin: framerMotion.useMotionValue(initial.msTransformOrigin), 738 | msTransitionDelay: framerMotion.useMotionValue(initial.msTransitionDelay), 739 | msTransitionDuration: framerMotion.useMotionValue(initial.msTransitionDuration), 740 | msTransitionProperty: framerMotion.useMotionValue(initial.msTransitionProperty), 741 | msTransitionTimingFunction: framerMotion.useMotionValue(initial.msTransitionTimingFunction), 742 | msUserSelect: framerMotion.useMotionValue(initial.msUserSelect), 743 | msWordBreak: framerMotion.useMotionValue(initial.msWordBreak), 744 | msWrapFlow: framerMotion.useMotionValue(initial.msWrapFlow), 745 | msWrapMargin: framerMotion.useMotionValue(initial.msWrapMargin), 746 | msWrapThrough: framerMotion.useMotionValue(initial.msWrapThrough), 747 | msWritingMode: framerMotion.useMotionValue(initial.msWritingMode), 748 | WebkitAlignContent: framerMotion.useMotionValue(initial.WebkitAlignContent), 749 | WebkitAlignItems: framerMotion.useMotionValue(initial.WebkitAlignItems), 750 | WebkitAlignSelf: framerMotion.useMotionValue(initial.WebkitAlignSelf), 751 | WebkitAnimationDelay: framerMotion.useMotionValue(initial.WebkitAnimationDelay), 752 | WebkitAnimationDirection: framerMotion.useMotionValue(initial.WebkitAnimationDirection), 753 | WebkitAnimationDuration: framerMotion.useMotionValue(initial.WebkitAnimationDuration), 754 | WebkitAnimationFillMode: framerMotion.useMotionValue(initial.WebkitAnimationFillMode), 755 | WebkitAnimationIterationCount: framerMotion.useMotionValue(initial.WebkitAnimationIterationCount), 756 | WebkitAnimationName: framerMotion.useMotionValue(initial.WebkitAnimationName), 757 | WebkitAnimationPlayState: framerMotion.useMotionValue(initial.WebkitAnimationPlayState), 758 | WebkitAnimationTimingFunction: framerMotion.useMotionValue(initial.WebkitAnimationTimingFunction), 759 | WebkitAppearance: framerMotion.useMotionValue(initial.WebkitAppearance), 760 | WebkitBackdropFilter: framerMotion.useMotionValue(initial.WebkitBackdropFilter), 761 | WebkitBackfaceVisibility: framerMotion.useMotionValue(initial.WebkitBackfaceVisibility), 762 | WebkitBackgroundClip: framerMotion.useMotionValue(initial.WebkitBackgroundClip), 763 | WebkitBackgroundOrigin: framerMotion.useMotionValue(initial.WebkitBackgroundOrigin), 764 | WebkitBackgroundSize: framerMotion.useMotionValue(initial.WebkitBackgroundSize), 765 | WebkitBorderBeforeColor: framerMotion.useMotionValue(initial.WebkitBorderBeforeColor), 766 | WebkitBorderBeforeStyle: framerMotion.useMotionValue(initial.WebkitBorderBeforeStyle), 767 | WebkitBorderBeforeWidth: framerMotion.useMotionValue(initial.WebkitBorderBeforeWidth), 768 | WebkitBorderBottomLeftRadius: framerMotion.useMotionValue(initial.WebkitBorderBottomLeftRadius), 769 | WebkitBorderBottomRightRadius: framerMotion.useMotionValue(initial.WebkitBorderBottomRightRadius), 770 | WebkitBorderImageSlice: framerMotion.useMotionValue(initial.WebkitBorderImageSlice), 771 | WebkitBorderTopLeftRadius: framerMotion.useMotionValue(initial.WebkitBorderTopLeftRadius), 772 | WebkitBorderTopRightRadius: framerMotion.useMotionValue(initial.WebkitBorderTopRightRadius), 773 | WebkitBoxDecorationBreak: framerMotion.useMotionValue(initial.WebkitBoxDecorationBreak), 774 | WebkitBoxReflect: framerMotion.useMotionValue(initial.WebkitBoxReflect), 775 | WebkitBoxShadow: framerMotion.useMotionValue(initial.WebkitBoxShadow), 776 | WebkitBoxSizing: framerMotion.useMotionValue(initial.WebkitBoxSizing), 777 | WebkitClipPath: framerMotion.useMotionValue(initial.WebkitClipPath), 778 | WebkitColumnCount: framerMotion.useMotionValue(initial.WebkitColumnCount), 779 | WebkitColumnFill: framerMotion.useMotionValue(initial.WebkitColumnFill), 780 | WebkitColumnGap: framerMotion.useMotionValue(initial.WebkitColumnGap), 781 | WebkitColumnRuleColor: framerMotion.useMotionValue(initial.WebkitColumnRuleColor), 782 | WebkitColumnRuleStyle: framerMotion.useMotionValue(initial.WebkitColumnRuleStyle), 783 | WebkitColumnRuleWidth: framerMotion.useMotionValue(initial.WebkitColumnRuleWidth), 784 | WebkitColumnSpan: framerMotion.useMotionValue(initial.WebkitColumnSpan), 785 | WebkitColumnWidth: framerMotion.useMotionValue(initial.WebkitColumnWidth), 786 | WebkitFilter: framerMotion.useMotionValue(initial.WebkitFilter), 787 | WebkitFlexBasis: framerMotion.useMotionValue(initial.WebkitFlexBasis), 788 | WebkitFlexDirection: framerMotion.useMotionValue(initial.WebkitFlexDirection), 789 | WebkitFlexGrow: framerMotion.useMotionValue(initial.WebkitFlexGrow), 790 | WebkitFlexShrink: framerMotion.useMotionValue(initial.WebkitFlexShrink), 791 | WebkitFlexWrap: framerMotion.useMotionValue(initial.WebkitFlexWrap), 792 | WebkitFontFeatureSettings: framerMotion.useMotionValue(initial.WebkitFontFeatureSettings), 793 | WebkitFontKerning: framerMotion.useMotionValue(initial.WebkitFontKerning), 794 | WebkitFontSmoothing: framerMotion.useMotionValue(initial.WebkitFontSmoothing), 795 | WebkitFontVariantLigatures: framerMotion.useMotionValue(initial.WebkitFontVariantLigatures), 796 | WebkitHyphens: framerMotion.useMotionValue(initial.WebkitHyphens), 797 | WebkitJustifyContent: framerMotion.useMotionValue(initial.WebkitJustifyContent), 798 | WebkitLineBreak: framerMotion.useMotionValue(initial.WebkitLineBreak), 799 | WebkitLineClamp: framerMotion.useMotionValue(initial.WebkitLineClamp), 800 | WebkitMarginEnd: framerMotion.useMotionValue(initial.WebkitMarginEnd), 801 | WebkitMarginStart: framerMotion.useMotionValue(initial.WebkitMarginStart), 802 | WebkitMaskAttachment: framerMotion.useMotionValue(initial.WebkitMaskAttachment), 803 | WebkitMaskBoxImageOutset: framerMotion.useMotionValue(initial.WebkitMaskBoxImageOutset), 804 | WebkitMaskBoxImageRepeat: framerMotion.useMotionValue(initial.WebkitMaskBoxImageRepeat), 805 | WebkitMaskBoxImageSlice: framerMotion.useMotionValue(initial.WebkitMaskBoxImageSlice), 806 | WebkitMaskBoxImageSource: framerMotion.useMotionValue(initial.WebkitMaskBoxImageSource), 807 | WebkitMaskBoxImageWidth: framerMotion.useMotionValue(initial.WebkitMaskBoxImageWidth), 808 | WebkitMaskClip: framerMotion.useMotionValue(initial.WebkitMaskClip), 809 | WebkitMaskComposite: framerMotion.useMotionValue(initial.WebkitMaskComposite), 810 | WebkitMaskImage: framerMotion.useMotionValue(initial.WebkitMaskImage), 811 | WebkitMaskOrigin: framerMotion.useMotionValue(initial.WebkitMaskOrigin), 812 | WebkitMaskPosition: framerMotion.useMotionValue(initial.WebkitMaskPosition), 813 | WebkitMaskPositionX: framerMotion.useMotionValue(initial.WebkitMaskPositionX), 814 | WebkitMaskPositionY: framerMotion.useMotionValue(initial.WebkitMaskPositionY), 815 | WebkitMaskRepeat: framerMotion.useMotionValue(initial.WebkitMaskRepeat), 816 | WebkitMaskRepeatX: framerMotion.useMotionValue(initial.WebkitMaskRepeatX), 817 | WebkitMaskRepeatY: framerMotion.useMotionValue(initial.WebkitMaskRepeatY), 818 | WebkitMaskSize: framerMotion.useMotionValue(initial.WebkitMaskSize), 819 | WebkitMaxInlineSize: framerMotion.useMotionValue(initial.WebkitMaxInlineSize), 820 | WebkitOrder: framerMotion.useMotionValue(initial.WebkitOrder), 821 | WebkitOverflowScrolling: framerMotion.useMotionValue(initial.WebkitOverflowScrolling), 822 | WebkitPaddingEnd: framerMotion.useMotionValue(initial.WebkitPaddingEnd), 823 | WebkitPaddingStart: framerMotion.useMotionValue(initial.WebkitPaddingStart), 824 | WebkitPerspective: framerMotion.useMotionValue(initial.WebkitPerspective), 825 | WebkitPerspectiveOrigin: framerMotion.useMotionValue(initial.WebkitPerspectiveOrigin), 826 | WebkitPrintColorAdjust: framerMotion.useMotionValue(initial.WebkitPrintColorAdjust), 827 | WebkitRubyPosition: framerMotion.useMotionValue(initial.WebkitRubyPosition), 828 | WebkitScrollSnapType: framerMotion.useMotionValue(initial.WebkitScrollSnapType), 829 | WebkitShapeMargin: framerMotion.useMotionValue(initial.WebkitShapeMargin), 830 | WebkitTapHighlightColor: framerMotion.useMotionValue(initial.WebkitTapHighlightColor), 831 | WebkitTextCombine: framerMotion.useMotionValue(initial.WebkitTextCombine), 832 | WebkitTextDecorationColor: framerMotion.useMotionValue(initial.WebkitTextDecorationColor), 833 | WebkitTextDecorationLine: framerMotion.useMotionValue(initial.WebkitTextDecorationLine), 834 | WebkitTextDecorationSkip: framerMotion.useMotionValue(initial.WebkitTextDecorationSkip), 835 | WebkitTextDecorationStyle: framerMotion.useMotionValue(initial.WebkitTextDecorationStyle), 836 | WebkitTextEmphasisColor: framerMotion.useMotionValue(initial.WebkitTextEmphasisColor), 837 | WebkitTextEmphasisPosition: framerMotion.useMotionValue(initial.WebkitTextEmphasisPosition), 838 | WebkitTextEmphasisStyle: framerMotion.useMotionValue(initial.WebkitTextEmphasisStyle), 839 | WebkitTextFillColor: framerMotion.useMotionValue(initial.WebkitTextFillColor), 840 | WebkitTextOrientation: framerMotion.useMotionValue(initial.WebkitTextOrientation), 841 | WebkitTextSizeAdjust: framerMotion.useMotionValue(initial.WebkitTextSizeAdjust), 842 | WebkitTextStrokeColor: framerMotion.useMotionValue(initial.WebkitTextStrokeColor), 843 | WebkitTextStrokeWidth: framerMotion.useMotionValue(initial.WebkitTextStrokeWidth), 844 | WebkitTextUnderlinePosition: framerMotion.useMotionValue(initial.WebkitTextUnderlinePosition), 845 | WebkitTouchCallout: framerMotion.useMotionValue(initial.WebkitTouchCallout), 846 | WebkitTransform: framerMotion.useMotionValue(initial.WebkitTransform), 847 | WebkitTransformOrigin: framerMotion.useMotionValue(initial.WebkitTransformOrigin), 848 | WebkitTransformStyle: framerMotion.useMotionValue(initial.WebkitTransformStyle), 849 | WebkitTransitionDelay: framerMotion.useMotionValue(initial.WebkitTransitionDelay), 850 | WebkitTransitionDuration: framerMotion.useMotionValue(initial.WebkitTransitionDuration), 851 | WebkitTransitionProperty: framerMotion.useMotionValue(initial.WebkitTransitionProperty), 852 | WebkitTransitionTimingFunction: framerMotion.useMotionValue(initial.WebkitTransitionTimingFunction), 853 | WebkitUserModify: framerMotion.useMotionValue(initial.WebkitUserModify), 854 | WebkitUserSelect: framerMotion.useMotionValue(initial.WebkitUserSelect), 855 | WebkitWritingMode: framerMotion.useMotionValue(initial.WebkitWritingMode), 856 | // VendorShorthandProperties 857 | MozAnimation: framerMotion.useMotionValue(initial.MozAnimation), 858 | MozBorderImage: framerMotion.useMotionValue(initial.MozBorderImage), 859 | MozColumnRule: framerMotion.useMotionValue(initial.MozColumnRule), 860 | MozColumns: framerMotion.useMotionValue(initial.MozColumns), 861 | MozTransition: framerMotion.useMotionValue(initial.MozTransition), 862 | msContentZoomLimit: framerMotion.useMotionValue(initial.msContentZoomLimit), 863 | msContentZoomSnap: framerMotion.useMotionValue(initial.msContentZoomSnap), 864 | msFlex: framerMotion.useMotionValue(initial.msFlex), 865 | msScrollLimit: framerMotion.useMotionValue(initial.msScrollLimit), 866 | msScrollSnapX: framerMotion.useMotionValue(initial.msScrollSnapX), 867 | msScrollSnapY: framerMotion.useMotionValue(initial.msScrollSnapY), 868 | msTransition: framerMotion.useMotionValue(initial.msTransition), 869 | WebkitAnimation: framerMotion.useMotionValue(initial.WebkitAnimation), 870 | WebkitBorderBefore: framerMotion.useMotionValue(initial.WebkitBorderBefore), 871 | WebkitBorderImage: framerMotion.useMotionValue(initial.WebkitBorderImage), 872 | WebkitBorderRadius: framerMotion.useMotionValue(initial.WebkitBorderRadius), 873 | WebkitColumnRule: framerMotion.useMotionValue(initial.WebkitColumnRule), 874 | WebkitColumns: framerMotion.useMotionValue(initial.WebkitColumns), 875 | WebkitFlex: framerMotion.useMotionValue(initial.WebkitFlex), 876 | WebkitFlexFlow: framerMotion.useMotionValue(initial.WebkitFlexFlow), 877 | WebkitMask: framerMotion.useMotionValue(initial.WebkitMask), 878 | WebkitMaskBoxImage: framerMotion.useMotionValue(initial.WebkitMaskBoxImage), 879 | WebkitTextEmphasis: framerMotion.useMotionValue(initial.WebkitTextEmphasis), 880 | WebkitTextStroke: framerMotion.useMotionValue(initial.WebkitTextStroke), 881 | WebkitTransition: framerMotion.useMotionValue(initial.WebkitTransition), 882 | // ObsoleteProperties 883 | azimuth: framerMotion.useMotionValue(initial.azimuth), 884 | boxAlign: framerMotion.useMotionValue(initial.boxAlign), 885 | boxDirection: framerMotion.useMotionValue(initial.boxDirection), 886 | boxFlex: framerMotion.useMotionValue(initial.boxFlex), 887 | boxFlexGroup: framerMotion.useMotionValue(initial.boxFlexGroup), 888 | boxLines: framerMotion.useMotionValue(initial.boxLines), 889 | boxOrdinalGroup: framerMotion.useMotionValue(initial.boxOrdinalGroup), 890 | boxOrient: framerMotion.useMotionValue(initial.boxOrient), 891 | boxPack: framerMotion.useMotionValue(initial.boxPack), 892 | clip: framerMotion.useMotionValue(initial.clip), 893 | fontVariantAlternates: framerMotion.useMotionValue(initial.fontVariantAlternates), 894 | gridColumnGap: framerMotion.useMotionValue(initial.gridColumnGap), 895 | gridGap: framerMotion.useMotionValue(initial.gridGap), 896 | gridRowGap: framerMotion.useMotionValue(initial.gridRowGap), 897 | imeMode: framerMotion.useMotionValue(initial.imeMode), 898 | offsetBlock: framerMotion.useMotionValue(initial.offsetBlock), 899 | offsetBlockEnd: framerMotion.useMotionValue(initial.offsetBlockEnd), 900 | offsetBlockStart: framerMotion.useMotionValue(initial.offsetBlockStart), 901 | offsetInline: framerMotion.useMotionValue(initial.offsetInline), 902 | offsetInlineEnd: framerMotion.useMotionValue(initial.offsetInlineEnd), 903 | offsetInlineStart: framerMotion.useMotionValue(initial.offsetInlineStart), 904 | scrollSnapCoordinate: framerMotion.useMotionValue(initial.scrollSnapCoordinate), 905 | scrollSnapDestination: framerMotion.useMotionValue(initial.scrollSnapDestination), 906 | scrollSnapPointsX: framerMotion.useMotionValue(initial.scrollSnapPointsX), 907 | scrollSnapPointsY: framerMotion.useMotionValue(initial.scrollSnapPointsY), 908 | scrollSnapTypeX: framerMotion.useMotionValue(initial.scrollSnapTypeX), 909 | scrollSnapTypeY: framerMotion.useMotionValue(initial.scrollSnapTypeY), 910 | scrollbarTrackColor: framerMotion.useMotionValue(initial.scrollbarTrackColor), 911 | textCombineHorizontal: framerMotion.useMotionValue(initial.textCombineHorizontal), 912 | KhtmlBoxAlign: framerMotion.useMotionValue(initial.KhtmlBoxAlign), 913 | KhtmlBoxDirection: framerMotion.useMotionValue(initial.KhtmlBoxDirection), 914 | KhtmlBoxFlex: framerMotion.useMotionValue(initial.KhtmlBoxFlex), 915 | KhtmlBoxFlexGroup: framerMotion.useMotionValue(initial.KhtmlBoxFlexGroup), 916 | KhtmlBoxLines: framerMotion.useMotionValue(initial.KhtmlBoxLines), 917 | KhtmlBoxOrdinalGroup: framerMotion.useMotionValue(initial.KhtmlBoxOrdinalGroup), 918 | KhtmlBoxOrient: framerMotion.useMotionValue(initial.KhtmlBoxOrient), 919 | KhtmlBoxPack: framerMotion.useMotionValue(initial.KhtmlBoxPack), 920 | KhtmlLineBreak: framerMotion.useMotionValue(initial.KhtmlLineBreak), 921 | KhtmlOpacity: framerMotion.useMotionValue(initial.KhtmlOpacity), 922 | KhtmlUserSelect: framerMotion.useMotionValue(initial.KhtmlUserSelect), 923 | MozBackgroundClip: framerMotion.useMotionValue(initial.MozBackgroundClip), 924 | MozBackgroundInlinePolicy: framerMotion.useMotionValue(initial.MozBackgroundInlinePolicy), 925 | MozBackgroundOrigin: framerMotion.useMotionValue(initial.MozBackgroundOrigin), 926 | MozBackgroundSize: framerMotion.useMotionValue(initial.MozBackgroundSize), 927 | MozBinding: framerMotion.useMotionValue(initial.MozBinding), 928 | MozBorderRadius: framerMotion.useMotionValue(initial.MozBorderRadius), 929 | MozBorderRadiusBottomleft: framerMotion.useMotionValue(initial.MozBorderRadiusBottomleft), 930 | MozBorderRadiusBottomright: framerMotion.useMotionValue(initial.MozBorderRadiusBottomright), 931 | MozBorderRadiusTopleft: framerMotion.useMotionValue(initial.MozBorderRadiusTopleft), 932 | MozBorderRadiusTopright: framerMotion.useMotionValue(initial.MozBorderRadiusTopright), 933 | MozBoxAlign: framerMotion.useMotionValue(initial.MozBoxAlign), 934 | MozBoxDirection: framerMotion.useMotionValue(initial.MozBoxDirection), 935 | MozBoxFlex: framerMotion.useMotionValue(initial.MozBoxFlex), 936 | MozBoxOrdinalGroup: framerMotion.useMotionValue(initial.MozBoxOrdinalGroup), 937 | MozBoxOrient: framerMotion.useMotionValue(initial.MozBoxOrient), 938 | MozBoxPack: framerMotion.useMotionValue(initial.MozBoxPack), 939 | MozBoxShadow: framerMotion.useMotionValue(initial.MozBoxShadow), 940 | MozFloatEdge: framerMotion.useMotionValue(initial.MozFloatEdge), 941 | MozForceBrokenImageIcon: framerMotion.useMotionValue(initial.MozForceBrokenImageIcon), 942 | MozOpacity: framerMotion.useMotionValue(initial.MozOpacity), 943 | MozOutline: framerMotion.useMotionValue(initial.MozOutline), 944 | MozOutlineColor: framerMotion.useMotionValue(initial.MozOutlineColor), 945 | MozOutlineRadius: framerMotion.useMotionValue(initial.MozOutlineRadius), 946 | MozOutlineRadiusBottomleft: framerMotion.useMotionValue(initial.MozOutlineRadiusBottomleft), 947 | MozOutlineRadiusBottomright: framerMotion.useMotionValue(initial.MozOutlineRadiusBottomright), 948 | MozOutlineRadiusTopleft: framerMotion.useMotionValue(initial.MozOutlineRadiusTopleft), 949 | MozOutlineRadiusTopright: framerMotion.useMotionValue(initial.MozOutlineRadiusTopright), 950 | MozOutlineStyle: framerMotion.useMotionValue(initial.MozOutlineStyle), 951 | MozOutlineWidth: framerMotion.useMotionValue(initial.MozOutlineWidth), 952 | MozTextAlignLast: framerMotion.useMotionValue(initial.MozTextAlignLast), 953 | MozTextDecorationColor: framerMotion.useMotionValue(initial.MozTextDecorationColor), 954 | MozTextDecorationLine: framerMotion.useMotionValue(initial.MozTextDecorationLine), 955 | MozTextDecorationStyle: framerMotion.useMotionValue(initial.MozTextDecorationStyle), 956 | MozUserInput: framerMotion.useMotionValue(initial.MozUserInput), 957 | msImeMode: framerMotion.useMotionValue(initial.msImeMode), 958 | msScrollbarTrackColor: framerMotion.useMotionValue(initial.msScrollbarTrackColor), 959 | OAnimation: framerMotion.useMotionValue(initial.OAnimation), 960 | OAnimationDelay: framerMotion.useMotionValue(initial.OAnimationDelay), 961 | OAnimationDirection: framerMotion.useMotionValue(initial.OAnimationDirection), 962 | OAnimationDuration: framerMotion.useMotionValue(initial.OAnimationDuration), 963 | OAnimationFillMode: framerMotion.useMotionValue(initial.OAnimationFillMode), 964 | OAnimationIterationCount: framerMotion.useMotionValue(initial.OAnimationIterationCount), 965 | OAnimationName: framerMotion.useMotionValue(initial.OAnimationName), 966 | OAnimationPlayState: framerMotion.useMotionValue(initial.OAnimationPlayState), 967 | OAnimationTimingFunction: framerMotion.useMotionValue(initial.OAnimationTimingFunction), 968 | OBackgroundSize: framerMotion.useMotionValue(initial.OBackgroundSize), 969 | OBorderImage: framerMotion.useMotionValue(initial.OBorderImage), 970 | OObjectFit: framerMotion.useMotionValue(initial.OObjectFit), 971 | OObjectPosition: framerMotion.useMotionValue(initial.OObjectPosition), 972 | OTabSize: framerMotion.useMotionValue(initial.OTabSize), 973 | OTextOverflow: framerMotion.useMotionValue(initial.OTextOverflow), 974 | OTransform: framerMotion.useMotionValue(initial.OTransform), 975 | OTransformOrigin: framerMotion.useMotionValue(initial.OTransformOrigin), 976 | OTransition: framerMotion.useMotionValue(initial.OTransition), 977 | OTransitionDelay: framerMotion.useMotionValue(initial.OTransitionDelay), 978 | OTransitionDuration: framerMotion.useMotionValue(initial.OTransitionDuration), 979 | OTransitionProperty: framerMotion.useMotionValue(initial.OTransitionProperty), 980 | OTransitionTimingFunction: framerMotion.useMotionValue(initial.OTransitionTimingFunction), 981 | WebkitBoxAlign: framerMotion.useMotionValue(initial.WebkitBoxAlign), 982 | WebkitBoxDirection: framerMotion.useMotionValue(initial.WebkitBoxDirection), 983 | WebkitBoxFlex: framerMotion.useMotionValue(initial.WebkitBoxFlex), 984 | WebkitBoxFlexGroup: framerMotion.useMotionValue(initial.WebkitBoxFlexGroup), 985 | WebkitBoxLines: framerMotion.useMotionValue(initial.WebkitBoxLines), 986 | WebkitBoxOrdinalGroup: framerMotion.useMotionValue(initial.WebkitBoxOrdinalGroup), 987 | WebkitBoxOrient: framerMotion.useMotionValue(initial.WebkitBoxOrient), 988 | WebkitBoxPack: framerMotion.useMotionValue(initial.WebkitBoxPack), 989 | WebkitScrollSnapPointsX: framerMotion.useMotionValue(initial.WebkitScrollSnapPointsX), 990 | WebkitScrollSnapPointsY: framerMotion.useMotionValue(initial.WebkitScrollSnapPointsY), 991 | // SvgProperties 992 | alignmentBaseline: framerMotion.useMotionValue(initial.alignmentBaseline), 993 | baselineShift: framerMotion.useMotionValue(initial.baselineShift), 994 | // clip: useMotionValue(initial.clip), 995 | // clipPath: useMotionValue(initial.clipPath), 996 | clipRule: framerMotion.useMotionValue(initial.clipRule), 997 | // color: useMotionValue(initial.color), 998 | colorInterpolation: framerMotion.useMotionValue(initial.colorInterpolation), 999 | colorRendering: framerMotion.useMotionValue(initial.colorRendering), 1000 | // cursor: useMotionValue(initial.cursor), 1001 | // direction: useMotionValue(initial.direction), 1002 | // display: useMotionValue(initial.display), 1003 | dominantBaseline: framerMotion.useMotionValue(initial.dominantBaseline), 1004 | fill: framerMotion.useMotionValue(initial.fill), 1005 | fillOpacity: framerMotion.useMotionValue(initial.fillOpacity), 1006 | fillRule: framerMotion.useMotionValue(initial.fillRule), 1007 | // filter: useMotionValue(initial.filter), 1008 | floodColor: framerMotion.useMotionValue(initial.floodColor), 1009 | floodOpacity: framerMotion.useMotionValue(initial.floodOpacity), 1010 | // font: useMotionValue(initial.font), 1011 | // fontFamily: useMotionValue(initial.fontFamily), 1012 | // fontSize: useMotionValue(initial.fontSize), 1013 | // fontSizeAdjust: useMotionValue(initial.fontSizeAdjust), 1014 | // fontStretch: useMotionValue(initial.fontStretch), 1015 | // fontStyle: useMotionValue(initial.fontStyle), 1016 | // fontVariant: useMotionValue(initial.fontVariant), 1017 | // fontWeight: useMotionValue(initial.fontWeight), 1018 | glyphOrientationVertical: framerMotion.useMotionValue(initial.glyphOrientationVertical), 1019 | // imageRendering: useMotionValue(initial.imageRendering), 1020 | // letterSpacing: useMotionValue(initial.letterSpacing), 1021 | lightingColor: framerMotion.useMotionValue(initial.lightingColor), 1022 | // lineHeight: useMotionValue(initial.lineHeight), 1023 | marker: framerMotion.useMotionValue(initial.marker), 1024 | markerEnd: framerMotion.useMotionValue(initial.markerEnd), 1025 | markerMid: framerMotion.useMotionValue(initial.markerMid), 1026 | markerStart: framerMotion.useMotionValue(initial.markerStart), 1027 | // mask: useMotionValue(initial.mask), 1028 | // opacity: useMotionValue(initial.opacity), 1029 | // overflow: useMotionValue(initial.overflow), 1030 | // paintOrder: useMotionValue(initial.paintOrder), 1031 | // pointerEvents: useMotionValue(initial.pointerEvents), 1032 | shapeRendering: framerMotion.useMotionValue(initial.shapeRendering), 1033 | stopColor: framerMotion.useMotionValue(initial.stopColor), 1034 | stopOpacity: framerMotion.useMotionValue(initial.stopOpacity), 1035 | stroke: framerMotion.useMotionValue(initial.stroke), 1036 | strokeDasharray: framerMotion.useMotionValue(initial.strokeDasharray), 1037 | strokeDashoffset: framerMotion.useMotionValue(initial.strokeDashoffset), 1038 | strokeLinecap: framerMotion.useMotionValue(initial.strokeLinecap), 1039 | strokeLinejoin: framerMotion.useMotionValue(initial.strokeLinejoin), 1040 | strokeMiterlimit: framerMotion.useMotionValue(initial.strokeMiterlimit), 1041 | strokeOpacity: framerMotion.useMotionValue(initial.strokeOpacity), 1042 | strokeWidth: framerMotion.useMotionValue(initial.strokeWidth), 1043 | textAnchor: framerMotion.useMotionValue(initial.textAnchor), 1044 | // textDecoration: useMotionValue(initial.textDecoration), 1045 | // textRendering: useMotionValue(initial.textRendering), 1046 | // unicodeBidi: useMotionValue(initial.unicodeBidi), 1047 | vectorEffect: framerMotion.useMotionValue(initial.vectorEffect) // visibility: useMotionValue(initial.visibility), 1048 | // whiteSpace: useMotionValue(initial.whiteSpace), 1049 | // wordSpacing: useMotionValue(initial.wordSpacing), 1050 | // writingMode: useMotionValue(initial.writingMode), 1051 | 1052 | }; 1053 | return motionValues; 1054 | }; 1055 | 1056 | var _excluded = ["initial", "variants", "style", "onAnimationComplete", "onAnimationStart"]; 1057 | var target = {}; 1058 | var handler = { 1059 | get: function get(target, prop) { 1060 | return function (props) { 1061 | return /*#__PURE__*/React__default['default'].createElement(Wrapper, { 1062 | props: props, 1063 | type: prop 1064 | }); 1065 | }; 1066 | } 1067 | }; 1068 | var tracer = new Proxy(target, handler); 1069 | 1070 | var Wrapper = function Wrapper(_ref) { 1071 | var type = _ref.type, 1072 | props = _ref.props; 1073 | var MotionComponent = framerMotion.motion[type]; 1074 | 1075 | var _props$initial = props.initial, 1076 | initial = _props$initial === void 0 ? {} : _props$initial, 1077 | variants = props.variants, 1078 | _props$style = props.style, 1079 | style = _props$style === void 0 ? {} : _props$style, 1080 | onAnimationComplete = props.onAnimationComplete, 1081 | onAnimationStart = props.onAnimationStart, 1082 | rest = _objectWithoutProperties(props, _excluded); 1083 | 1084 | var initialValues = null; 1085 | if (variants && variants[initial]) initialValues = variants[initial];else initialValues = initial; 1086 | 1087 | var _useTracer = useTracer(initialValues), 1088 | _useTracer2 = _slicedToArray(_useTracer, 3), 1089 | animatedStyles = _useTracer2[0], 1090 | Frames = _useTracer2[1], 1091 | ref = _useTracer2[2]; 1092 | 1093 | var _React$useState = React__default['default'].useState({ 1094 | top: null, 1095 | left: null 1096 | }), 1097 | _React$useState2 = _slicedToArray(_React$useState, 2), 1098 | startPosition = _React$useState2[0], 1099 | setStartPosition = _React$useState2[1]; 1100 | 1101 | var combinedOnAnimationStart = function combinedOnAnimationStart() { 1102 | setStartPosition({ 1103 | top: ref.current.getBoundingClientRect().top, 1104 | left: ref.current.getBoundingClientRect().left 1105 | }); 1106 | if (typeof onAnimationStart === 'function') onAnimationStart.apply(void 0, arguments); 1107 | }; 1108 | 1109 | var _React$useState3 = React__default['default'].useState(false), 1110 | _React$useState4 = _slicedToArray(_React$useState3, 2), 1111 | animationComplete = _React$useState4[0], 1112 | setAnimationComplete = _React$useState4[1]; 1113 | 1114 | var combinedOnAnimationComplete = function combinedOnAnimationComplete() { 1115 | setAnimationComplete(true); 1116 | if (typeof onAnimationComplete === 'function') onAnimationComplete.apply(void 0, arguments); 1117 | }; 1118 | 1119 | return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(MotionComponent, _extends({ 1120 | ref: ref, 1121 | initial: initial, 1122 | variants: variants, 1123 | style: _objectSpread2(_objectSpread2({}, style), animatedStyles), 1124 | onAnimationStart: combinedOnAnimationStart, 1125 | onAnimationComplete: combinedOnAnimationComplete 1126 | }, rest)), animationComplete && /*#__PURE__*/React__default['default'].createElement(framerMotion.motion.div, { 1127 | initial: { 1128 | opacity: 0 1129 | }, 1130 | animate: { 1131 | opacity: 1 1132 | } 1133 | }, /*#__PURE__*/React__default['default'].createElement(Frames, { 1134 | startPosition: startPosition 1135 | }))); 1136 | }; 1137 | 1138 | var useTracer = function useTracer(initial) { 1139 | var motionValues = useMotionValues(initial); // clean up keys that don't exist 1140 | 1141 | Object.keys(motionValues).forEach(function (key) { 1142 | if (typeof initial[key] === 'undefined') delete motionValues[key]; 1143 | }); 1144 | var initialState = {}; 1145 | Object.keys(motionValues).forEach(function (key) { 1146 | initialState[key] = []; 1147 | }); 1148 | 1149 | var _React$useState5 = React__default['default'].useState(initialState), 1150 | _React$useState6 = _slicedToArray(_React$useState5, 2), 1151 | values = _React$useState6[0], 1152 | setValues = _React$useState6[1]; 1153 | 1154 | React__default['default'].useEffect(function () { 1155 | var unsubcribeFns = Object.keys(motionValues).map(function (key) { 1156 | return motionValues[key].onChange(function (v) { 1157 | setValues(function (values) { 1158 | return _objectSpread2(_objectSpread2({}, values), {}, _defineProperty({}, key, [].concat(_toConsumableArray(values[key]), [v]))); 1159 | }); 1160 | }); 1161 | }); 1162 | return function () { 1163 | unsubcribeFns.forEach(function (fn) { 1164 | fn(); 1165 | }); 1166 | }; // eslint-disable-next-line react-hooks/exhaustive-deps 1167 | }, []); 1168 | var style = motionValues; 1169 | 1170 | var FramesComponent = function FramesComponent(_ref2) { 1171 | var startPosition = _ref2.startPosition; 1172 | return /*#__PURE__*/React__default['default'].createElement(Frames, { 1173 | values: values, 1174 | startPosition: startPosition 1175 | }); 1176 | }; 1177 | 1178 | var ref = React__default['default'].useRef(null); 1179 | return [style, FramesComponent, ref]; 1180 | }; 1181 | 1182 | var Frames = function Frames(_ref3) { 1183 | var values = _ref3.values, 1184 | startPosition = _ref3.startPosition; 1185 | var length = Math.max.apply(Math, _toConsumableArray(Object.values(values).map(function (arr) { 1186 | return arr.length; 1187 | }))); 1188 | var lastValues = {}; 1189 | Object.keys(values).forEach(function (key) { 1190 | var valuesForKey = values[key]; 1191 | lastValues[key] = valuesForKey[valuesForKey.length - 1]; 1192 | }); 1193 | 1194 | var _useControls = leva.useControls({ 1195 | 'frame #': { 1196 | value: 0, 1197 | min: 0, 1198 | max: length - 1, 1199 | step: 1 1200 | } 1201 | }), 1202 | frame = _useControls['frame #']; 1203 | 1204 | var frames = []; 1205 | 1206 | var _loop = function _loop(index) { 1207 | var style = {}; 1208 | Object.keys(values).forEach(function (key) { 1209 | style[key] = values[key][index] || lastValues[key]; 1210 | }); 1211 | frames.push( /*#__PURE__*/React__default['default'].createElement(framerMotion.motion.div, { 1212 | key: index, 1213 | className: "box", 1214 | style: _objectSpread2(_objectSpread2(_objectSpread2({ 1215 | position: 'absolute' 1216 | }, startPosition), style), {}, { 1217 | opacity: index === frame ? style.opacity : 0.05, 1218 | boxShadow: index === frame ? 'inset 0 0 0 2px blue' : style.boxShadow, 1219 | zIndex: index === frame ? 99999999 : style.zIndex 1220 | }) 1221 | })); 1222 | }; 1223 | 1224 | for (var index = 0; index < length; index++) { 1225 | _loop(index); 1226 | } 1227 | 1228 | var frameMotionValues = {}; 1229 | Object.keys(values).forEach(function (key) { 1230 | frameMotionValues[key] = values[key][frame] || lastValues[key]; 1231 | }); 1232 | return /*#__PURE__*/React__default['default'].createElement("div", { 1233 | style: { 1234 | position: 'absolute', 1235 | top: 0, 1236 | left: 0 1237 | } 1238 | }, frames, " ", /*#__PURE__*/React__default['default'].createElement(leva.Leva, { 1239 | titleBar: { 1240 | filter: false 1241 | } 1242 | })); 1243 | }; 1244 | 1245 | exports.tracer = tracer; 1246 | -------------------------------------------------------------------------------- /packages/tracer-motion/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { Leva, useControls } from 'leva'; 4 | import useMotionValues from './use-motion-values'; 5 | 6 | const target = {}; 7 | const handler = { 8 | get: (target, prop) => { 9 | return (props) => ; 10 | }, 11 | }; 12 | 13 | export const tracer = new Proxy(target, handler); 14 | 15 | const Wrapper = ({ type, props }) => { 16 | const MotionComponent = motion[type]; 17 | 18 | const { 19 | initial = {}, 20 | variants, 21 | style = {}, 22 | onAnimationComplete, 23 | onAnimationStart, 24 | ...rest 25 | } = props; 26 | 27 | let initialValues = null; 28 | 29 | if (variants && variants[initial]) initialValues = variants[initial]; 30 | else initialValues = initial; 31 | 32 | const [animatedStyles, Frames, ref] = useTracer(initialValues); 33 | 34 | const [startPosition, setStartPosition] = React.useState({ 35 | top: null, 36 | left: null, 37 | }); 38 | 39 | const combinedOnAnimationStart = (...args) => { 40 | setStartPosition({ 41 | top: ref.current.getBoundingClientRect().top, 42 | left: ref.current.getBoundingClientRect().left, 43 | }); 44 | if (typeof onAnimationStart === 'function') onAnimationStart(...args); 45 | }; 46 | 47 | const [animationComplete, setAnimationComplete] = React.useState(false); 48 | const combinedOnAnimationComplete = (...args) => { 49 | setAnimationComplete(true); 50 | 51 | if (typeof onAnimationComplete === 'function') onAnimationComplete(...args); 52 | }; 53 | 54 | return ( 55 | <> 56 | 65 | {animationComplete && ( 66 | 67 | 68 | 69 | )} 70 | 71 | ); 72 | }; 73 | 74 | const useTracer = (initial) => { 75 | const motionValues = useMotionValues(initial); 76 | 77 | // clean up keys that don't exist 78 | Object.keys(motionValues).forEach((key) => { 79 | if (typeof initial[key] === 'undefined') delete motionValues[key]; 80 | }); 81 | 82 | const initialState = {}; 83 | Object.keys(motionValues).forEach((key) => { 84 | initialState[key] = []; 85 | }); 86 | const [values, setValues] = React.useState(initialState); 87 | 88 | React.useEffect(() => { 89 | const unsubcribeFns = Object.keys(motionValues).map((key) => { 90 | return motionValues[key].onChange((v) => { 91 | setValues((values) => { 92 | return { ...values, [key]: [...values[key], v] }; 93 | }); 94 | }); 95 | }); 96 | 97 | return () => { 98 | unsubcribeFns.forEach((fn) => { 99 | fn(); 100 | }); 101 | }; 102 | // eslint-disable-next-line react-hooks/exhaustive-deps 103 | }, []); 104 | 105 | const style = motionValues; 106 | const FramesComponent = ({ startPosition }) => { 107 | return ; 108 | }; 109 | 110 | const ref = React.useRef(null); 111 | 112 | return [style, FramesComponent, ref]; 113 | }; 114 | 115 | const Frames = ({ values, startPosition }) => { 116 | const length = Math.max(...Object.values(values).map((arr) => arr.length)); 117 | 118 | const lastValues = {}; 119 | 120 | Object.keys(values).forEach((key) => { 121 | const valuesForKey = values[key]; 122 | lastValues[key] = valuesForKey[valuesForKey.length - 1]; 123 | }); 124 | 125 | const { 'frame #': frame } = useControls({ 126 | 'frame #': { value: 0, min: 0, max: length - 1, step: 1 }, 127 | }); 128 | 129 | const frames = []; 130 | for (let index = 0; index < length; index++) { 131 | const style = {}; 132 | Object.keys(values).forEach((key) => { 133 | style[key] = values[key][index] || lastValues[key]; 134 | }); 135 | 136 | frames.push( 137 | 149 | ); 150 | } 151 | 152 | const frameMotionValues = {}; 153 | Object.keys(values).forEach((key) => { 154 | frameMotionValues[key] = values[key][frame] || lastValues[key]; 155 | }); 156 | 157 | return ( 158 |
159 | {frames} 160 |
161 | ); 162 | }; 163 | -------------------------------------------------------------------------------- /packages/tracer-motion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tracer-motion", 3 | "version": "1.1.0", 4 | "description": "visual debugger for framer-motion", 5 | "source": "index.js", 6 | "main": "dist.js", 7 | "files": [ 8 | "dist.js" 9 | ], 10 | "scripts": { 11 | "dev": "rollup -c -w", 12 | "build": "rollup -c" 13 | }, 14 | "dependencies": { 15 | "leva": "^0.9.13" 16 | }, 17 | "devDependencies": { 18 | "rollup": "^2.55.0", 19 | "rollup-plugin-babel": "^4.4.0", 20 | "rollup-plugin-commonjs": "^10.1.0" 21 | }, 22 | "peerDependencies": { 23 | "framer-motion": ">4.0.0", 24 | "react": ">16.8.0", 25 | "react-dom": ">16.8.0" 26 | }, 27 | "author": "siddharthkp", 28 | "license": "MIT", 29 | "keywords": [ 30 | "debugger", 31 | "frames", 32 | "framer-motion" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /packages/tracer-motion/rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | 4 | import pkg from './package.json'; 5 | 6 | export default [ 7 | { 8 | input: pkg.source, 9 | output: [{ file: pkg.main, format: 'cjs' }], 10 | plugins: [ 11 | babel({ 12 | presets: [ 13 | ['@babel/preset-env', { modules: false }], 14 | '@babel/preset-react', 15 | ], 16 | exclude: 'node_modules/**', 17 | }), 18 | commonjs(), 19 | ], 20 | }, 21 | ]; 22 | -------------------------------------------------------------------------------- /packages/tracer-motion/use-motion-values.js: -------------------------------------------------------------------------------- 1 | import { useMotionValue } from 'framer-motion'; 2 | 3 | // we maintain a giant config of all possible motion values 4 | // because we can't call the hook conditionally (rule of hooks) 5 | 6 | // so we initialise all TargetProperties 7 | // uncomment this line to chase the types: 8 | // import { Target } from 'framer-motion'; 9 | 10 | const useMotionValues = (initial) => { 11 | const motionValues = { 12 | // TransformProperties 13 | x: useMotionValue(initial.x), 14 | y: useMotionValue(initial.y), 15 | z: useMotionValue(initial.z), 16 | translateX: useMotionValue(initial.translateX), 17 | translateY: useMotionValue(initial.translateY), 18 | translateZ: useMotionValue(initial.translateZ), 19 | rotate: useMotionValue(initial.rotate), 20 | rotateX: useMotionValue(initial.rotateX), 21 | rotateY: useMotionValue(initial.rotateY), 22 | rotateZ: useMotionValue(initial.rotateZ), 23 | scale: useMotionValue(initial.scale), 24 | scaleX: useMotionValue(initial.scaleX), 25 | scaleY: useMotionValue(initial.scaleY), 26 | scaleZ: useMotionValue(initial.scaleZ), 27 | skew: useMotionValue(initial.skew), 28 | skewX: useMotionValue(initial.skewX), 29 | skewY: useMotionValue(initial.skewY), 30 | originX: useMotionValue(initial.originX), 31 | originY: useMotionValue(initial.originY), 32 | originZ: useMotionValue(initial.originZ), 33 | perspective: useMotionValue(initial.perspective), 34 | transformPerspective: useMotionValue(initial.transformPerspective), 35 | 36 | // CustomStyles 37 | size: useMotionValue(initial.size), 38 | radius: useMotionValue(initial.radius), 39 | shadow: useMotionValue(initial.shadow), 40 | image: useMotionValue(initial.image), 41 | 42 | // SVGPathProperties 43 | pathLength: useMotionValue(initial.pathLength), 44 | pathOffset: useMotionValue(initial.pathOffset), 45 | pathSpacing: useMotionValue(initial.pathSpacing), 46 | 47 | // StandardLonghandProperties 48 | alignContent: useMotionValue(initial.alignContent), 49 | alignItems: useMotionValue(initial.alignItems), 50 | alignSelf: useMotionValue(initial.alignSelf), 51 | alignTracks: useMotionValue(initial.alignTracks), 52 | animationDelay: useMotionValue(initial.animationDelay), 53 | animationDirection: useMotionValue(initial.animationDirection), 54 | animationDuration: useMotionValue(initial.animationDuration), 55 | animationFillMode: useMotionValue(initial.animationFillMode), 56 | animationIterationCount: useMotionValue(initial.animationIterationCount), 57 | animationName: useMotionValue(initial.animationName), 58 | animationPlayState: useMotionValue(initial.animationPlayState), 59 | animationTimingFunction: useMotionValue(initial.animationTimingFunction), 60 | appearance: useMotionValue(initial.appearance), 61 | aspectRatio: useMotionValue(initial.aspectRatio), 62 | backdropFilter: useMotionValue(initial.backdropFilter), 63 | backfaceVisibility: useMotionValue(initial.backfaceVisibility), 64 | backgroundAttachment: useMotionValue(initial.backgroundAttachment), 65 | backgroundBlendMode: useMotionValue(initial.backgroundBlendMode), 66 | backgroundClip: useMotionValue(initial.backgroundClip), 67 | backgroundColor: useMotionValue(initial.backgroundColor), 68 | backgroundImage: useMotionValue(initial.backgroundImage), 69 | backgroundOrigin: useMotionValue(initial.backgroundOrigin), 70 | backgroundPosition: useMotionValue(initial.backgroundPosition), 71 | backgroundPositionX: useMotionValue(initial.backgroundPositionX), 72 | backgroundPositionY: useMotionValue(initial.backgroundPositionY), 73 | backgroundRepeat: useMotionValue(initial.backgroundRepeat), 74 | backgroundSize: useMotionValue(initial.backgroundSize), 75 | blockOverflow: useMotionValue(initial.blockOverflow), 76 | blockSize: useMotionValue(initial.blockSize), 77 | borderBlockColor: useMotionValue(initial.borderBlockColor), 78 | borderBlockEndColor: useMotionValue(initial.borderBlockEndColor), 79 | borderBlockEndStyle: useMotionValue(initial.borderBlockEndStyle), 80 | borderBlockEndWidth: useMotionValue(initial.borderBlockEndWidth), 81 | borderBlockStartColor: useMotionValue(initial.borderBlockStartColor), 82 | borderBlockStartStyle: useMotionValue(initial.borderBlockStartStyle), 83 | borderBlockStartWidth: useMotionValue(initial.borderBlockStartWidth), 84 | borderBlockStyle: useMotionValue(initial.borderBlockStyle), 85 | borderBlockWidth: useMotionValue(initial.borderBlockWidth), 86 | borderBottomColor: useMotionValue(initial.borderBottomColor), 87 | borderBottomLeftRadius: useMotionValue(initial.borderBottomLeftRadius), 88 | borderBottomRightRadius: useMotionValue(initial.borderBottomRightRadius), 89 | borderBottomStyle: useMotionValue(initial.borderBottomStyle), 90 | borderBottomWidth: useMotionValue(initial.borderBottomWidth), 91 | borderCollapse: useMotionValue(initial.borderCollapse), 92 | borderEndEndRadius: useMotionValue(initial.borderEndEndRadius), 93 | borderEndStartRadius: useMotionValue(initial.borderEndStartRadius), 94 | borderImageOutset: useMotionValue(initial.borderImageOutset), 95 | borderImageRepeat: useMotionValue(initial.borderImageRepeat), 96 | borderImageSlice: useMotionValue(initial.borderImageSlice), 97 | borderImageSource: useMotionValue(initial.borderImageSource), 98 | borderImageWidth: useMotionValue(initial.borderImageWidth), 99 | borderInlineColor: useMotionValue(initial.borderInlineColor), 100 | borderInlineEndColor: useMotionValue(initial.borderInlineEndColor), 101 | borderInlineEndStyle: useMotionValue(initial.borderInlineEndStyle), 102 | borderInlineEndWidth: useMotionValue(initial.borderInlineEndWidth), 103 | borderInlineStartColor: useMotionValue(initial.borderInlineStartColor), 104 | borderInlineStartStyle: useMotionValue(initial.borderInlineStartStyle), 105 | borderInlineStartWidth: useMotionValue(initial.borderInlineStartWidth), 106 | borderInlineStyle: useMotionValue(initial.borderInlineStyle), 107 | borderInlineWidth: useMotionValue(initial.borderInlineWidth), 108 | borderLeftColor: useMotionValue(initial.borderLeftColor), 109 | borderLeftStyle: useMotionValue(initial.borderLeftStyle), 110 | borderLeftWidth: useMotionValue(initial.borderLeftWidth), 111 | borderRightColor: useMotionValue(initial.borderRightColor), 112 | borderRightStyle: useMotionValue(initial.borderRightStyle), 113 | borderRightWidth: useMotionValue(initial.borderRightWidth), 114 | borderSpacing: useMotionValue(initial.borderSpacing), 115 | borderStartEndRadius: useMotionValue(initial.borderStartEndRadius), 116 | borderStartStartRadius: useMotionValue(initial.borderStartStartRadius), 117 | borderTopColor: useMotionValue(initial.borderTopColor), 118 | borderTopLeftRadius: useMotionValue(initial.borderTopLeftRadius), 119 | borderTopRightRadius: useMotionValue(initial.borderTopRightRadius), 120 | borderTopStyle: useMotionValue(initial.borderTopStyle), 121 | borderTopWidth: useMotionValue(initial.borderTopWidth), 122 | bottom: useMotionValue(initial.bottom), 123 | boxDecorationBreak: useMotionValue(initial.boxDecorationBreak), 124 | boxShadow: useMotionValue(initial.boxShadow), 125 | boxSizing: useMotionValue(initial.boxSizing), 126 | breakAfter: useMotionValue(initial.breakAfter), 127 | breakBefore: useMotionValue(initial.breakBefore), 128 | breakInside: useMotionValue(initial.breakInside), 129 | captionSide: useMotionValue(initial.captionSide), 130 | caretColor: useMotionValue(initial.caretColor), 131 | clear: useMotionValue(initial.clear), 132 | clipPath: useMotionValue(initial.clipPath), 133 | color: useMotionValue(initial.color), 134 | colorAdjust: useMotionValue(initial.colorAdjust), 135 | columnCount: useMotionValue(initial.columnCount), 136 | columnFill: useMotionValue(initial.columnFill), 137 | columnGap: useMotionValue(initial.columnGap), 138 | columnRuleColor: useMotionValue(initial.columnRuleColor), 139 | columnRuleStyle: useMotionValue(initial.columnRuleStyle), 140 | columnRuleWidth: useMotionValue(initial.columnRuleWidth), 141 | columnSpan: useMotionValue(initial.columnSpan), 142 | columnWidth: useMotionValue(initial.columnWidth), 143 | contain: useMotionValue(initial.contain), 144 | content: useMotionValue(initial.content), 145 | contentVisibility: useMotionValue(initial.contentVisibility), 146 | counterIncrement: useMotionValue(initial.counterIncrement), 147 | counterReset: useMotionValue(initial.counterReset), 148 | counterSet: useMotionValue(initial.counterSet), 149 | cursor: useMotionValue(initial.cursor), 150 | direction: useMotionValue(initial.direction), 151 | display: useMotionValue(initial.display), 152 | emptyCells: useMotionValue(initial.emptyCells), 153 | filter: useMotionValue(initial.filter), 154 | flexBasis: useMotionValue(initial.flexBasis), 155 | flexDirection: useMotionValue(initial.flexDirection), 156 | flexGrow: useMotionValue(initial.flexGrow), 157 | flexShrink: useMotionValue(initial.flexShrink), 158 | flexWrap: useMotionValue(initial.flexWrap), 159 | float: useMotionValue(initial.float), 160 | fontFamily: useMotionValue(initial.fontFamily), 161 | fontFeatureSettings: useMotionValue(initial.fontFeatureSettings), 162 | fontKerning: useMotionValue(initial.fontKerning), 163 | fontLanguageOverride: useMotionValue(initial.fontLanguageOverride), 164 | fontOpticalSizing: useMotionValue(initial.fontOpticalSizing), 165 | fontSize: useMotionValue(initial.fontSize), 166 | fontSizeAdjust: useMotionValue(initial.fontSizeAdjust), 167 | fontSmooth: useMotionValue(initial.fontSmooth), 168 | fontStretch: useMotionValue(initial.fontStretch), 169 | fontStyle: useMotionValue(initial.fontStyle), 170 | fontSynthesis: useMotionValue(initial.fontSynthesis), 171 | fontVariant: useMotionValue(initial.fontVariant), 172 | fontVariantCaps: useMotionValue(initial.fontVariantCaps), 173 | fontVariantEastAsian: useMotionValue(initial.fontVariantEastAsian), 174 | fontVariantLigatures: useMotionValue(initial.fontVariantLigatures), 175 | fontVariantNumeric: useMotionValue(initial.fontVariantNumeric), 176 | fontVariantPosition: useMotionValue(initial.fontVariantPosition), 177 | fontVariationSettings: useMotionValue(initial.fontVariationSettings), 178 | fontWeight: useMotionValue(initial.fontWeight), 179 | forcedColorAdjust: useMotionValue(initial.forcedColorAdjust), 180 | gridAutoColumns: useMotionValue(initial.gridAutoColumns), 181 | gridAutoFlow: useMotionValue(initial.gridAutoFlow), 182 | gridAutoRows: useMotionValue(initial.gridAutoRows), 183 | gridColumnEnd: useMotionValue(initial.gridColumnEnd), 184 | gridColumnStart: useMotionValue(initial.gridColumnStart), 185 | gridRowEnd: useMotionValue(initial.gridRowEnd), 186 | gridRowStart: useMotionValue(initial.gridRowStart), 187 | gridTemplateAreas: useMotionValue(initial.gridTemplateAreas), 188 | gridTemplateColumns: useMotionValue(initial.gridTemplateColumns), 189 | gridTemplateRows: useMotionValue(initial.gridTemplateRows), 190 | hangingPunctuation: useMotionValue(initial.hangingPunctuation), 191 | height: useMotionValue(initial.height), 192 | hyphens: useMotionValue(initial.hyphens), 193 | imageOrientation: useMotionValue(initial.imageOrientation), 194 | imageRendering: useMotionValue(initial.imageRendering), 195 | imageResolution: useMotionValue(initial.imageResolution), 196 | initialLetter: useMotionValue(initial.initialLetter), 197 | inlineSize: useMotionValue(initial.inlineSize), 198 | inset: useMotionValue(initial.inset), 199 | insetBlock: useMotionValue(initial.insetBlock), 200 | insetBlockEnd: useMotionValue(initial.insetBlockEnd), 201 | insetBlockStart: useMotionValue(initial.insetBlockStart), 202 | insetInline: useMotionValue(initial.insetInline), 203 | insetInlineEnd: useMotionValue(initial.insetInlineEnd), 204 | insetInlineStart: useMotionValue(initial.insetInlineStart), 205 | isolation: useMotionValue(initial.isolation), 206 | justifyContent: useMotionValue(initial.justifyContent), 207 | justifyItems: useMotionValue(initial.justifyItems), 208 | justifySelf: useMotionValue(initial.justifySelf), 209 | justifyTracks: useMotionValue(initial.justifyTracks), 210 | left: useMotionValue(initial.left), 211 | letterSpacing: useMotionValue(initial.letterSpacing), 212 | lineBreak: useMotionValue(initial.lineBreak), 213 | lineHeight: useMotionValue(initial.lineHeight), 214 | lineHeightStep: useMotionValue(initial.lineHeightStep), 215 | listStyleImage: useMotionValue(initial.listStyleImage), 216 | listStylePosition: useMotionValue(initial.listStylePosition), 217 | listStyleType: useMotionValue(initial.listStyleType), 218 | marginBlock: useMotionValue(initial.marginBlock), 219 | marginBlockEnd: useMotionValue(initial.marginBlockEnd), 220 | marginBlockStart: useMotionValue(initial.marginBlockStart), 221 | marginBottom: useMotionValue(initial.marginBottom), 222 | marginInline: useMotionValue(initial.marginInline), 223 | marginInlineEnd: useMotionValue(initial.marginInlineEnd), 224 | marginInlineStart: useMotionValue(initial.marginInlineStart), 225 | marginLeft: useMotionValue(initial.marginLeft), 226 | marginRight: useMotionValue(initial.marginRight), 227 | marginTop: useMotionValue(initial.marginTop), 228 | maskBorderMode: useMotionValue(initial.maskBorderMode), 229 | maskBorderOutset: useMotionValue(initial.maskBorderOutset), 230 | maskBorderRepeat: useMotionValue(initial.maskBorderRepeat), 231 | maskBorderSlice: useMotionValue(initial.maskBorderSlice), 232 | maskBorderSource: useMotionValue(initial.maskBorderSource), 233 | maskBorderWidth: useMotionValue(initial.maskBorderWidth), 234 | maskClip: useMotionValue(initial.maskClip), 235 | maskComposite: useMotionValue(initial.maskComposite), 236 | maskImage: useMotionValue(initial.maskImage), 237 | maskMode: useMotionValue(initial.maskMode), 238 | maskOrigin: useMotionValue(initial.maskOrigin), 239 | maskPosition: useMotionValue(initial.maskPosition), 240 | maskRepeat: useMotionValue(initial.maskRepeat), 241 | maskSize: useMotionValue(initial.maskSize), 242 | maskType: useMotionValue(initial.maskType), 243 | mathStyle: useMotionValue(initial.mathStyle), 244 | maxBlockSize: useMotionValue(initial.maxBlockSize), 245 | maxHeight: useMotionValue(initial.maxHeight), 246 | maxInlineSize: useMotionValue(initial.maxInlineSize), 247 | maxLines: useMotionValue(initial.maxLines), 248 | maxWidth: useMotionValue(initial.maxWidth), 249 | minBlockSize: useMotionValue(initial.minBlockSize), 250 | minHeight: useMotionValue(initial.minHeight), 251 | minInlineSize: useMotionValue(initial.minInlineSize), 252 | minWidth: useMotionValue(initial.minWidth), 253 | mixBlendMode: useMotionValue(initial.mixBlendMode), 254 | motionDistance: useMotionValue(initial.motionDistance), 255 | motionPath: useMotionValue(initial.motionPath), 256 | motionRotation: useMotionValue(initial.motionRotation), 257 | objectFit: useMotionValue(initial.objectFit), 258 | objectPosition: useMotionValue(initial.objectPosition), 259 | offsetAnchor: useMotionValue(initial.offsetAnchor), 260 | offsetDistance: useMotionValue(initial.offsetDistance), 261 | offsetPath: useMotionValue(initial.offsetPath), 262 | offsetRotate: useMotionValue(initial.offsetRotate), 263 | offsetRotation: useMotionValue(initial.offsetRotation), 264 | opacity: useMotionValue(initial.opacity), 265 | order: useMotionValue(initial.order), 266 | orphans: useMotionValue(initial.orphans), 267 | outlineColor: useMotionValue(initial.outlineColor), 268 | outlineOffset: useMotionValue(initial.outlineOffset), 269 | outlineStyle: useMotionValue(initial.outlineStyle), 270 | outlineWidth: useMotionValue(initial.outlineWidth), 271 | overflowAnchor: useMotionValue(initial.overflowAnchor), 272 | overflowBlock: useMotionValue(initial.overflowBlock), 273 | overflowClipBox: useMotionValue(initial.overflowClipBox), 274 | overflowInline: useMotionValue(initial.overflowInline), 275 | overflowWrap: useMotionValue(initial.overflowWrap), 276 | overflowX: useMotionValue(initial.overflowX), 277 | overflowY: useMotionValue(initial.overflowY), 278 | overscrollBehavior: useMotionValue(initial.overscrollBehavior), 279 | overscrollBehaviorBlock: useMotionValue(initial.overscrollBehaviorBlock), 280 | overscrollBehaviorInline: useMotionValue(initial.overscrollBehaviorInline), 281 | overscrollBehaviorX: useMotionValue(initial.overscrollBehaviorX), 282 | overscrollBehaviorY: useMotionValue(initial.overscrollBehaviorY), 283 | paddingBlock: useMotionValue(initial.paddingBlock), 284 | paddingBlockEnd: useMotionValue(initial.paddingBlockEnd), 285 | paddingBlockStart: useMotionValue(initial.paddingBlockStart), 286 | paddingBottom: useMotionValue(initial.paddingBottom), 287 | paddingInline: useMotionValue(initial.paddingInline), 288 | paddingInlineEnd: useMotionValue(initial.paddingInlineEnd), 289 | paddingInlineStart: useMotionValue(initial.paddingInlineStart), 290 | paddingLeft: useMotionValue(initial.paddingLeft), 291 | paddingRight: useMotionValue(initial.paddingRight), 292 | paddingTop: useMotionValue(initial.paddingTop), 293 | pageBreakAfter: useMotionValue(initial.pageBreakAfter), 294 | pageBreakBefore: useMotionValue(initial.pageBreakBefore), 295 | pageBreakInside: useMotionValue(initial.pageBreakInside), 296 | paintOrder: useMotionValue(initial.paintOrder), 297 | // perspective: useMotionValue(initial.perspective), 298 | perspectiveOrigin: useMotionValue(initial.perspectiveOrigin), 299 | placeContent: useMotionValue(initial.placeContent), 300 | pointerEvents: useMotionValue(initial.pointerEvents), 301 | position: useMotionValue(initial.position), 302 | quotes: useMotionValue(initial.quotes), 303 | resize: useMotionValue(initial.resize), 304 | right: useMotionValue(initial.right), 305 | // rotate: useMotionValue(initial.rotate), 306 | rowGap: useMotionValue(initial.rowGap), 307 | rubyAlign: useMotionValue(initial.rubyAlign), 308 | rubyMerge: useMotionValue(initial.rubyMerge), 309 | rubyPosition: useMotionValue(initial.rubyPosition), 310 | // scale: useMotionValue(initial.scale), 311 | scrollBehavior: useMotionValue(initial.scrollBehavior), 312 | scrollMargin: useMotionValue(initial.scrollMargin), 313 | scrollMarginBlock: useMotionValue(initial.scrollMarginBlock), 314 | scrollMarginBlockEnd: useMotionValue(initial.scrollMarginBlockEnd), 315 | scrollMarginBlockStart: useMotionValue(initial.scrollMarginBlockStart), 316 | scrollMarginBottom: useMotionValue(initial.scrollMarginBottom), 317 | scrollMarginInline: useMotionValue(initial.scrollMarginInline), 318 | scrollMarginInlineEnd: useMotionValue(initial.scrollMarginInlineEnd), 319 | scrollMarginInlineStart: useMotionValue(initial.scrollMarginInlineStart), 320 | scrollMarginLeft: useMotionValue(initial.scrollMarginLeft), 321 | scrollMarginRight: useMotionValue(initial.scrollMarginRight), 322 | scrollMarginTop: useMotionValue(initial.scrollMarginTop), 323 | scrollPadding: useMotionValue(initial.scrollPadding), 324 | scrollPaddingBlock: useMotionValue(initial.scrollPaddingBlock), 325 | scrollPaddingBlockEnd: useMotionValue(initial.scrollPaddingBlockEnd), 326 | scrollPaddingBlockStart: useMotionValue(initial.scrollPaddingBlockStart), 327 | scrollPaddingBottom: useMotionValue(initial.scrollPaddingBottom), 328 | scrollPaddingInline: useMotionValue(initial.scrollPaddingInline), 329 | scrollPaddingInlineEnd: useMotionValue(initial.scrollPaddingInlineEnd), 330 | scrollPaddingInlineStart: useMotionValue(initial.scrollPaddingInlineStart), 331 | scrollPaddingLeft: useMotionValue(initial.scrollPaddingLeft), 332 | scrollPaddingRight: useMotionValue(initial.scrollPaddingRight), 333 | scrollPaddingTop: useMotionValue(initial.scrollPaddingTop), 334 | scrollSnapAlign: useMotionValue(initial.scrollSnapAlign), 335 | scrollSnapMargin: useMotionValue(initial.scrollSnapMargin), 336 | scrollSnapMarginBottom: useMotionValue(initial.scrollSnapMarginBottom), 337 | scrollSnapMarginLeft: useMotionValue(initial.scrollSnapMarginLeft), 338 | scrollSnapMarginRight: useMotionValue(initial.scrollSnapMarginRight), 339 | scrollSnapMarginTop: useMotionValue(initial.scrollSnapMarginTop), 340 | scrollSnapStop: useMotionValue(initial.scrollSnapStop), 341 | scrollSnapType: useMotionValue(initial.scrollSnapType), 342 | scrollbarColor: useMotionValue(initial.scrollbarColor), 343 | scrollbarGutter: useMotionValue(initial.scrollbarGutter), 344 | scrollbarWidth: useMotionValue(initial.scrollbarWidth), 345 | shapeImageThreshold: useMotionValue(initial.shapeImageThreshold), 346 | shapeMargin: useMotionValue(initial.shapeMargin), 347 | shapeOutside: useMotionValue(initial.shapeOutside), 348 | tabSize: useMotionValue(initial.tabSize), 349 | tableLayout: useMotionValue(initial.tableLayout), 350 | textAlign: useMotionValue(initial.textAlign), 351 | textAlignLast: useMotionValue(initial.textAlignLast), 352 | textCombineUpright: useMotionValue(initial.textCombineUpright), 353 | textDecorationColor: useMotionValue(initial.textDecorationColor), 354 | textDecorationLine: useMotionValue(initial.textDecorationLine), 355 | textDecorationSkip: useMotionValue(initial.textDecorationSkip), 356 | textDecorationSkipInk: useMotionValue(initial.textDecorationSkipInk), 357 | textDecorationStyle: useMotionValue(initial.textDecorationStyle), 358 | textDecorationThickness: useMotionValue(initial.textDecorationThickness), 359 | textDecorationWidth: useMotionValue(initial.textDecorationWidth), 360 | textEmphasisColor: useMotionValue(initial.textEmphasisColor), 361 | textEmphasisPosition: useMotionValue(initial.textEmphasisPosition), 362 | textEmphasisStyle: useMotionValue(initial.textEmphasisStyle), 363 | textIndent: useMotionValue(initial.textIndent), 364 | textJustify: useMotionValue(initial.textJustify), 365 | textOrientation: useMotionValue(initial.textOrientation), 366 | textOverflow: useMotionValue(initial.textOverflow), 367 | textRendering: useMotionValue(initial.textRendering), 368 | textShadow: useMotionValue(initial.textShadow), 369 | textSizeAdjust: useMotionValue(initial.textSizeAdjust), 370 | textTransform: useMotionValue(initial.textTransform), 371 | textUnderlineOffset: useMotionValue(initial.textUnderlineOffset), 372 | textUnderlinePosition: useMotionValue(initial.textUnderlinePosition), 373 | top: useMotionValue(initial.top), 374 | touchAction: useMotionValue(initial.touchAction), 375 | transform: useMotionValue(initial.transform), 376 | transformOrigin: useMotionValue(initial.transformOrigin), 377 | transformStyle: useMotionValue(initial.transformStyle), 378 | transitionDelay: useMotionValue(initial.transitionDelay), 379 | transitionDuration: useMotionValue(initial.transitionDuration), 380 | transitionProperty: useMotionValue(initial.transitionProperty), 381 | transitionTimingFunction: useMotionValue(initial.transitionTimingFunction), 382 | translate: useMotionValue(initial.translate), 383 | unicodeBidi: useMotionValue(initial.unicodeBidi), 384 | userSelect: useMotionValue(initial.userSelect), 385 | verticalAlign: useMotionValue(initial.verticalAlign), 386 | visibility: useMotionValue(initial.visibility), 387 | whiteSpace: useMotionValue(initial.whiteSpace), 388 | widows: useMotionValue(initial.widows), 389 | width: useMotionValue(initial.width), 390 | willChange: useMotionValue(initial.willChange), 391 | wordBreak: useMotionValue(initial.wordBreak), 392 | wordSpacing: useMotionValue(initial.wordSpacing), 393 | wordWrap: useMotionValue(initial.wordWrap), 394 | writingMode: useMotionValue(initial.writingMode), 395 | zIndex: useMotionValue(initial.zIndex), 396 | zoom: useMotionValue(initial.zoom), 397 | 398 | // StandardShorthandProperties 399 | all: useMotionValue(initial.all), 400 | animation: useMotionValue(initial.animation), 401 | background: useMotionValue(initial.background), 402 | border: useMotionValue(initial.border), 403 | borderBlock: useMotionValue(initial.borderBlock), 404 | borderBlockEnd: useMotionValue(initial.borderBlockEnd), 405 | borderBlockStart: useMotionValue(initial.borderBlockStart), 406 | borderBottom: useMotionValue(initial.borderBottom), 407 | borderColor: useMotionValue(initial.borderColor), 408 | borderImage: useMotionValue(initial.borderImage), 409 | borderInline: useMotionValue(initial.borderInline), 410 | borderInlineEnd: useMotionValue(initial.borderInlineEnd), 411 | borderInlineStart: useMotionValue(initial.borderInlineStart), 412 | borderLeft: useMotionValue(initial.borderLeft), 413 | borderRadius: useMotionValue(initial.borderRadius), 414 | borderRight: useMotionValue(initial.borderRight), 415 | borderStyle: useMotionValue(initial.borderStyle), 416 | borderTop: useMotionValue(initial.borderTop), 417 | borderWidth: useMotionValue(initial.borderWidth), 418 | columnRule: useMotionValue(initial.columnRule), 419 | columns: useMotionValue(initial.columns), 420 | flex: useMotionValue(initial.flex), 421 | flexFlow: useMotionValue(initial.flexFlow), 422 | font: useMotionValue(initial.font), 423 | gap: useMotionValue(initial.gap), 424 | grid: useMotionValue(initial.grid), 425 | gridArea: useMotionValue(initial.gridArea), 426 | gridColumn: useMotionValue(initial.gridColumn), 427 | gridRow: useMotionValue(initial.gridRow), 428 | gridTemplate: useMotionValue(initial.gridTemplate), 429 | lineClamp: useMotionValue(initial.lineClamp), 430 | listStyle: useMotionValue(initial.listStyle), 431 | margin: useMotionValue(initial.margin), 432 | mask: useMotionValue(initial.mask), 433 | maskBorder: useMotionValue(initial.maskBorder), 434 | motion: useMotionValue(initial.motion), 435 | offset: useMotionValue(initial.offset), 436 | outline: useMotionValue(initial.outline), 437 | overflow: useMotionValue(initial.overflow), 438 | padding: useMotionValue(initial.padding), 439 | placeItems: useMotionValue(initial.placeItems), 440 | placeSelf: useMotionValue(initial.placeSelf), 441 | textDecoration: useMotionValue(initial.textDecoration), 442 | textEmphasis: useMotionValue(initial.textEmphasis), 443 | transition: useMotionValue(initial.transition), 444 | 445 | // VendorLonghandProperties 446 | MozAnimationDelay: useMotionValue(initial.MozAnimationDelay), 447 | MozAnimationDirection: useMotionValue(initial.MozAnimationDirection), 448 | MozAnimationDuration: useMotionValue(initial.MozAnimationDuration), 449 | MozAnimationFillMode: useMotionValue(initial.MozAnimationFillMode), 450 | MozAnimationIterationCount: useMotionValue( 451 | initial.MozAnimationIterationCount 452 | ), 453 | MozAnimationName: useMotionValue(initial.MozAnimationName), 454 | MozAnimationPlayState: useMotionValue(initial.MozAnimationPlayState), 455 | MozAnimationTimingFunction: useMotionValue( 456 | initial.MozAnimationTimingFunction 457 | ), 458 | MozAppearance: useMotionValue(initial.MozAppearance), 459 | MozBackfaceVisibility: useMotionValue(initial.MozBackfaceVisibility), 460 | MozBorderBottomColors: useMotionValue(initial.MozBorderBottomColors), 461 | MozBorderEndColor: useMotionValue(initial.MozBorderEndColor), 462 | MozBorderEndStyle: useMotionValue(initial.MozBorderEndStyle), 463 | MozBorderEndWidth: useMotionValue(initial.MozBorderEndWidth), 464 | MozBorderLeftColors: useMotionValue(initial.MozBorderLeftColors), 465 | MozBorderRightColors: useMotionValue(initial.MozBorderRightColors), 466 | MozBorderStartColor: useMotionValue(initial.MozBorderStartColor), 467 | MozBorderStartStyle: useMotionValue(initial.MozBorderStartStyle), 468 | MozBorderTopColors: useMotionValue(initial.MozBorderTopColors), 469 | MozBoxSizing: useMotionValue(initial.MozBoxSizing), 470 | MozColumnCount: useMotionValue(initial.MozColumnCount), 471 | MozColumnFill: useMotionValue(initial.MozColumnFill), 472 | MozColumnGap: useMotionValue(initial.MozColumnGap), 473 | MozColumnRuleColor: useMotionValue(initial.MozColumnRuleColor), 474 | MozColumnRuleStyle: useMotionValue(initial.MozColumnRuleStyle), 475 | MozColumnRuleWidth: useMotionValue(initial.MozColumnRuleWidth), 476 | MozColumnWidth: useMotionValue(initial.MozColumnWidth), 477 | MozContextProperties: useMotionValue(initial.MozContextProperties), 478 | MozFontFeatureSettings: useMotionValue(initial.MozFontFeatureSettings), 479 | MozFontLanguageOverride: useMotionValue(initial.MozFontLanguageOverride), 480 | MozHyphens: useMotionValue(initial.MozHyphens), 481 | MozImageRegion: useMotionValue(initial.MozImageRegion), 482 | MozMarginEnd: useMotionValue(initial.MozMarginEnd), 483 | MozMarginStart: useMotionValue(initial.MozMarginStart), 484 | MozOrient: useMotionValue(initial.MozOrient), 485 | MozOsxFontSmoothing: useMotionValue(initial.MozOsxFontSmoothing), 486 | MozPaddingEnd: useMotionValue(initial.MozPaddingEnd), 487 | MozPaddingStart: useMotionValue(initial.MozPaddingStart), 488 | MozPerspective: useMotionValue(initial.MozPerspective), 489 | MozPerspectiveOrigin: useMotionValue(initial.MozPerspectiveOrigin), 490 | MozStackSizing: useMotionValue(initial.MozStackSizing), 491 | MozTabSize: useMotionValue(initial.MozTabSize), 492 | MozTextBlink: useMotionValue(initial.MozTextBlink), 493 | MozTextSizeAdjust: useMotionValue(initial.MozTextSizeAdjust), 494 | MozTransformOrigin: useMotionValue(initial.MozTransformOrigin), 495 | MozTransformStyle: useMotionValue(initial.MozTransformStyle), 496 | MozTransitionDelay: useMotionValue(initial.MozTransitionDelay), 497 | MozTransitionDuration: useMotionValue(initial.MozTransitionDuration), 498 | MozTransitionProperty: useMotionValue(initial.MozTransitionProperty), 499 | MozTransitionTimingFunction: useMotionValue( 500 | initial.MozTransitionTimingFunction 501 | ), 502 | MozUserFocus: useMotionValue(initial.MozUserFocus), 503 | MozUserModify: useMotionValue(initial.MozUserModify), 504 | MozUserSelect: useMotionValue(initial.MozUserSelect), 505 | MozWindowDragging: useMotionValue(initial.MozWindowDragging), 506 | MozWindowShadow: useMotionValue(initial.MozWindowShadow), 507 | msAccelerator: useMotionValue(initial.msAccelerator), 508 | msAlignSelf: useMotionValue(initial.msAlignSelf), 509 | msBlockProgression: useMotionValue(initial.msBlockProgression), 510 | msContentZoomChaining: useMotionValue(initial.msContentZoomChaining), 511 | msContentZoomLimitMax: useMotionValue(initial.msContentZoomLimitMax), 512 | msContentZoomLimitMin: useMotionValue(initial.msContentZoomLimitMin), 513 | msContentZoomSnapPoints: useMotionValue(initial.msContentZoomSnapPoints), 514 | msContentZoomSnapType: useMotionValue(initial.msContentZoomSnapType), 515 | msContentZooming: useMotionValue(initial.msContentZooming), 516 | msFilter: useMotionValue(initial.msFilter), 517 | msFlexDirection: useMotionValue(initial.msFlexDirection), 518 | msFlexPositive: useMotionValue(initial.msFlexPositive), 519 | msFlowFrom: useMotionValue(initial.msFlowFrom), 520 | msFlowInto: useMotionValue(initial.msFlowInto), 521 | msGridColumns: useMotionValue(initial.msGridColumns), 522 | msGridRows: useMotionValue(initial.msGridRows), 523 | msHighContrastAdjust: useMotionValue(initial.msHighContrastAdjust), 524 | msHyphenateLimitChars: useMotionValue(initial.msHyphenateLimitChars), 525 | msHyphenateLimitLines: useMotionValue(initial.msHyphenateLimitLines), 526 | msHyphenateLimitZone: useMotionValue(initial.msHyphenateLimitZone), 527 | msHyphens: useMotionValue(initial.msHyphens), 528 | msImeAlign: useMotionValue(initial.msImeAlign), 529 | msJustifySelf: useMotionValue(initial.msJustifySelf), 530 | msLineBreak: useMotionValue(initial.msLineBreak), 531 | msOrder: useMotionValue(initial.msOrder), 532 | msOverflowStyle: useMotionValue(initial.msOverflowStyle), 533 | msOverflowX: useMotionValue(initial.msOverflowX), 534 | msOverflowY: useMotionValue(initial.msOverflowY), 535 | msScrollChaining: useMotionValue(initial.msScrollChaining), 536 | msScrollLimitXMax: useMotionValue(initial.msScrollLimitXMax), 537 | msScrollLimitXMin: useMotionValue(initial.msScrollLimitXMin), 538 | msScrollLimitYMax: useMotionValue(initial.msScrollLimitYMax), 539 | msScrollLimitYMin: useMotionValue(initial.msScrollLimitYMin), 540 | msScrollRails: useMotionValue(initial.msScrollRails), 541 | msScrollSnapPointsX: useMotionValue(initial.msScrollSnapPointsX), 542 | msScrollSnapPointsY: useMotionValue(initial.msScrollSnapPointsY), 543 | msScrollSnapType: useMotionValue(initial.msScrollSnapType), 544 | msScrollTranslation: useMotionValue(initial.msScrollTranslation), 545 | msScrollbar3dlightColor: useMotionValue(initial.msScrollbar3dlightColor), 546 | msScrollbarArrowColor: useMotionValue(initial.msScrollbarArrowColor), 547 | msScrollbarBaseColor: useMotionValue(initial.msScrollbarBaseColor), 548 | msScrollbarDarkshadowColor: useMotionValue( 549 | initial.msScrollbarDarkshadowColor 550 | ), 551 | msScrollbarFaceColor: useMotionValue(initial.msScrollbarFaceColor), 552 | msScrollbarHighlightColor: useMotionValue( 553 | initial.msScrollbarHighlightColor 554 | ), 555 | msScrollbarShadowColor: useMotionValue(initial.msScrollbarShadowColor), 556 | msTextAutospace: useMotionValue(initial.msTextAutospace), 557 | msTextCombineHorizontal: useMotionValue(initial.msTextCombineHorizontal), 558 | msTextOverflow: useMotionValue(initial.msTextOverflow), 559 | msTouchAction: useMotionValue(initial.msTouchAction), 560 | msTouchSelect: useMotionValue(initial.msTouchSelect), 561 | msTransform: useMotionValue(initial.msTransform), 562 | msTransformOrigin: useMotionValue(initial.msTransformOrigin), 563 | msTransitionDelay: useMotionValue(initial.msTransitionDelay), 564 | msTransitionDuration: useMotionValue(initial.msTransitionDuration), 565 | msTransitionProperty: useMotionValue(initial.msTransitionProperty), 566 | msTransitionTimingFunction: useMotionValue( 567 | initial.msTransitionTimingFunction 568 | ), 569 | msUserSelect: useMotionValue(initial.msUserSelect), 570 | msWordBreak: useMotionValue(initial.msWordBreak), 571 | msWrapFlow: useMotionValue(initial.msWrapFlow), 572 | msWrapMargin: useMotionValue(initial.msWrapMargin), 573 | msWrapThrough: useMotionValue(initial.msWrapThrough), 574 | msWritingMode: useMotionValue(initial.msWritingMode), 575 | WebkitAlignContent: useMotionValue(initial.WebkitAlignContent), 576 | WebkitAlignItems: useMotionValue(initial.WebkitAlignItems), 577 | WebkitAlignSelf: useMotionValue(initial.WebkitAlignSelf), 578 | WebkitAnimationDelay: useMotionValue(initial.WebkitAnimationDelay), 579 | WebkitAnimationDirection: useMotionValue(initial.WebkitAnimationDirection), 580 | WebkitAnimationDuration: useMotionValue(initial.WebkitAnimationDuration), 581 | WebkitAnimationFillMode: useMotionValue(initial.WebkitAnimationFillMode), 582 | WebkitAnimationIterationCount: useMotionValue( 583 | initial.WebkitAnimationIterationCount 584 | ), 585 | WebkitAnimationName: useMotionValue(initial.WebkitAnimationName), 586 | WebkitAnimationPlayState: useMotionValue(initial.WebkitAnimationPlayState), 587 | WebkitAnimationTimingFunction: useMotionValue( 588 | initial.WebkitAnimationTimingFunction 589 | ), 590 | WebkitAppearance: useMotionValue(initial.WebkitAppearance), 591 | WebkitBackdropFilter: useMotionValue(initial.WebkitBackdropFilter), 592 | WebkitBackfaceVisibility: useMotionValue(initial.WebkitBackfaceVisibility), 593 | WebkitBackgroundClip: useMotionValue(initial.WebkitBackgroundClip), 594 | WebkitBackgroundOrigin: useMotionValue(initial.WebkitBackgroundOrigin), 595 | WebkitBackgroundSize: useMotionValue(initial.WebkitBackgroundSize), 596 | WebkitBorderBeforeColor: useMotionValue(initial.WebkitBorderBeforeColor), 597 | WebkitBorderBeforeStyle: useMotionValue(initial.WebkitBorderBeforeStyle), 598 | WebkitBorderBeforeWidth: useMotionValue(initial.WebkitBorderBeforeWidth), 599 | WebkitBorderBottomLeftRadius: useMotionValue( 600 | initial.WebkitBorderBottomLeftRadius 601 | ), 602 | WebkitBorderBottomRightRadius: useMotionValue( 603 | initial.WebkitBorderBottomRightRadius 604 | ), 605 | WebkitBorderImageSlice: useMotionValue(initial.WebkitBorderImageSlice), 606 | WebkitBorderTopLeftRadius: useMotionValue( 607 | initial.WebkitBorderTopLeftRadius 608 | ), 609 | WebkitBorderTopRightRadius: useMotionValue( 610 | initial.WebkitBorderTopRightRadius 611 | ), 612 | WebkitBoxDecorationBreak: useMotionValue(initial.WebkitBoxDecorationBreak), 613 | WebkitBoxReflect: useMotionValue(initial.WebkitBoxReflect), 614 | WebkitBoxShadow: useMotionValue(initial.WebkitBoxShadow), 615 | WebkitBoxSizing: useMotionValue(initial.WebkitBoxSizing), 616 | WebkitClipPath: useMotionValue(initial.WebkitClipPath), 617 | WebkitColumnCount: useMotionValue(initial.WebkitColumnCount), 618 | WebkitColumnFill: useMotionValue(initial.WebkitColumnFill), 619 | WebkitColumnGap: useMotionValue(initial.WebkitColumnGap), 620 | WebkitColumnRuleColor: useMotionValue(initial.WebkitColumnRuleColor), 621 | WebkitColumnRuleStyle: useMotionValue(initial.WebkitColumnRuleStyle), 622 | WebkitColumnRuleWidth: useMotionValue(initial.WebkitColumnRuleWidth), 623 | WebkitColumnSpan: useMotionValue(initial.WebkitColumnSpan), 624 | WebkitColumnWidth: useMotionValue(initial.WebkitColumnWidth), 625 | WebkitFilter: useMotionValue(initial.WebkitFilter), 626 | WebkitFlexBasis: useMotionValue(initial.WebkitFlexBasis), 627 | WebkitFlexDirection: useMotionValue(initial.WebkitFlexDirection), 628 | WebkitFlexGrow: useMotionValue(initial.WebkitFlexGrow), 629 | WebkitFlexShrink: useMotionValue(initial.WebkitFlexShrink), 630 | WebkitFlexWrap: useMotionValue(initial.WebkitFlexWrap), 631 | WebkitFontFeatureSettings: useMotionValue( 632 | initial.WebkitFontFeatureSettings 633 | ), 634 | WebkitFontKerning: useMotionValue(initial.WebkitFontKerning), 635 | WebkitFontSmoothing: useMotionValue(initial.WebkitFontSmoothing), 636 | WebkitFontVariantLigatures: useMotionValue( 637 | initial.WebkitFontVariantLigatures 638 | ), 639 | WebkitHyphens: useMotionValue(initial.WebkitHyphens), 640 | WebkitJustifyContent: useMotionValue(initial.WebkitJustifyContent), 641 | WebkitLineBreak: useMotionValue(initial.WebkitLineBreak), 642 | WebkitLineClamp: useMotionValue(initial.WebkitLineClamp), 643 | WebkitMarginEnd: useMotionValue(initial.WebkitMarginEnd), 644 | WebkitMarginStart: useMotionValue(initial.WebkitMarginStart), 645 | WebkitMaskAttachment: useMotionValue(initial.WebkitMaskAttachment), 646 | WebkitMaskBoxImageOutset: useMotionValue(initial.WebkitMaskBoxImageOutset), 647 | WebkitMaskBoxImageRepeat: useMotionValue(initial.WebkitMaskBoxImageRepeat), 648 | WebkitMaskBoxImageSlice: useMotionValue(initial.WebkitMaskBoxImageSlice), 649 | WebkitMaskBoxImageSource: useMotionValue(initial.WebkitMaskBoxImageSource), 650 | WebkitMaskBoxImageWidth: useMotionValue(initial.WebkitMaskBoxImageWidth), 651 | WebkitMaskClip: useMotionValue(initial.WebkitMaskClip), 652 | WebkitMaskComposite: useMotionValue(initial.WebkitMaskComposite), 653 | WebkitMaskImage: useMotionValue(initial.WebkitMaskImage), 654 | WebkitMaskOrigin: useMotionValue(initial.WebkitMaskOrigin), 655 | WebkitMaskPosition: useMotionValue(initial.WebkitMaskPosition), 656 | WebkitMaskPositionX: useMotionValue(initial.WebkitMaskPositionX), 657 | WebkitMaskPositionY: useMotionValue(initial.WebkitMaskPositionY), 658 | WebkitMaskRepeat: useMotionValue(initial.WebkitMaskRepeat), 659 | WebkitMaskRepeatX: useMotionValue(initial.WebkitMaskRepeatX), 660 | WebkitMaskRepeatY: useMotionValue(initial.WebkitMaskRepeatY), 661 | WebkitMaskSize: useMotionValue(initial.WebkitMaskSize), 662 | WebkitMaxInlineSize: useMotionValue(initial.WebkitMaxInlineSize), 663 | WebkitOrder: useMotionValue(initial.WebkitOrder), 664 | WebkitOverflowScrolling: useMotionValue(initial.WebkitOverflowScrolling), 665 | WebkitPaddingEnd: useMotionValue(initial.WebkitPaddingEnd), 666 | WebkitPaddingStart: useMotionValue(initial.WebkitPaddingStart), 667 | WebkitPerspective: useMotionValue(initial.WebkitPerspective), 668 | WebkitPerspectiveOrigin: useMotionValue(initial.WebkitPerspectiveOrigin), 669 | WebkitPrintColorAdjust: useMotionValue(initial.WebkitPrintColorAdjust), 670 | WebkitRubyPosition: useMotionValue(initial.WebkitRubyPosition), 671 | WebkitScrollSnapType: useMotionValue(initial.WebkitScrollSnapType), 672 | WebkitShapeMargin: useMotionValue(initial.WebkitShapeMargin), 673 | WebkitTapHighlightColor: useMotionValue(initial.WebkitTapHighlightColor), 674 | WebkitTextCombine: useMotionValue(initial.WebkitTextCombine), 675 | WebkitTextDecorationColor: useMotionValue( 676 | initial.WebkitTextDecorationColor 677 | ), 678 | WebkitTextDecorationLine: useMotionValue(initial.WebkitTextDecorationLine), 679 | WebkitTextDecorationSkip: useMotionValue(initial.WebkitTextDecorationSkip), 680 | WebkitTextDecorationStyle: useMotionValue( 681 | initial.WebkitTextDecorationStyle 682 | ), 683 | WebkitTextEmphasisColor: useMotionValue(initial.WebkitTextEmphasisColor), 684 | WebkitTextEmphasisPosition: useMotionValue( 685 | initial.WebkitTextEmphasisPosition 686 | ), 687 | WebkitTextEmphasisStyle: useMotionValue(initial.WebkitTextEmphasisStyle), 688 | WebkitTextFillColor: useMotionValue(initial.WebkitTextFillColor), 689 | WebkitTextOrientation: useMotionValue(initial.WebkitTextOrientation), 690 | WebkitTextSizeAdjust: useMotionValue(initial.WebkitTextSizeAdjust), 691 | WebkitTextStrokeColor: useMotionValue(initial.WebkitTextStrokeColor), 692 | WebkitTextStrokeWidth: useMotionValue(initial.WebkitTextStrokeWidth), 693 | WebkitTextUnderlinePosition: useMotionValue( 694 | initial.WebkitTextUnderlinePosition 695 | ), 696 | WebkitTouchCallout: useMotionValue(initial.WebkitTouchCallout), 697 | WebkitTransform: useMotionValue(initial.WebkitTransform), 698 | WebkitTransformOrigin: useMotionValue(initial.WebkitTransformOrigin), 699 | WebkitTransformStyle: useMotionValue(initial.WebkitTransformStyle), 700 | WebkitTransitionDelay: useMotionValue(initial.WebkitTransitionDelay), 701 | WebkitTransitionDuration: useMotionValue(initial.WebkitTransitionDuration), 702 | WebkitTransitionProperty: useMotionValue(initial.WebkitTransitionProperty), 703 | WebkitTransitionTimingFunction: useMotionValue( 704 | initial.WebkitTransitionTimingFunction 705 | ), 706 | WebkitUserModify: useMotionValue(initial.WebkitUserModify), 707 | WebkitUserSelect: useMotionValue(initial.WebkitUserSelect), 708 | WebkitWritingMode: useMotionValue(initial.WebkitWritingMode), 709 | 710 | // VendorShorthandProperties 711 | MozAnimation: useMotionValue(initial.MozAnimation), 712 | MozBorderImage: useMotionValue(initial.MozBorderImage), 713 | MozColumnRule: useMotionValue(initial.MozColumnRule), 714 | MozColumns: useMotionValue(initial.MozColumns), 715 | MozTransition: useMotionValue(initial.MozTransition), 716 | msContentZoomLimit: useMotionValue(initial.msContentZoomLimit), 717 | msContentZoomSnap: useMotionValue(initial.msContentZoomSnap), 718 | msFlex: useMotionValue(initial.msFlex), 719 | msScrollLimit: useMotionValue(initial.msScrollLimit), 720 | msScrollSnapX: useMotionValue(initial.msScrollSnapX), 721 | msScrollSnapY: useMotionValue(initial.msScrollSnapY), 722 | msTransition: useMotionValue(initial.msTransition), 723 | WebkitAnimation: useMotionValue(initial.WebkitAnimation), 724 | WebkitBorderBefore: useMotionValue(initial.WebkitBorderBefore), 725 | WebkitBorderImage: useMotionValue(initial.WebkitBorderImage), 726 | WebkitBorderRadius: useMotionValue(initial.WebkitBorderRadius), 727 | WebkitColumnRule: useMotionValue(initial.WebkitColumnRule), 728 | WebkitColumns: useMotionValue(initial.WebkitColumns), 729 | WebkitFlex: useMotionValue(initial.WebkitFlex), 730 | WebkitFlexFlow: useMotionValue(initial.WebkitFlexFlow), 731 | WebkitMask: useMotionValue(initial.WebkitMask), 732 | WebkitMaskBoxImage: useMotionValue(initial.WebkitMaskBoxImage), 733 | WebkitTextEmphasis: useMotionValue(initial.WebkitTextEmphasis), 734 | WebkitTextStroke: useMotionValue(initial.WebkitTextStroke), 735 | WebkitTransition: useMotionValue(initial.WebkitTransition), 736 | 737 | // ObsoleteProperties 738 | azimuth: useMotionValue(initial.azimuth), 739 | boxAlign: useMotionValue(initial.boxAlign), 740 | boxDirection: useMotionValue(initial.boxDirection), 741 | boxFlex: useMotionValue(initial.boxFlex), 742 | boxFlexGroup: useMotionValue(initial.boxFlexGroup), 743 | boxLines: useMotionValue(initial.boxLines), 744 | boxOrdinalGroup: useMotionValue(initial.boxOrdinalGroup), 745 | boxOrient: useMotionValue(initial.boxOrient), 746 | boxPack: useMotionValue(initial.boxPack), 747 | clip: useMotionValue(initial.clip), 748 | fontVariantAlternates: useMotionValue(initial.fontVariantAlternates), 749 | gridColumnGap: useMotionValue(initial.gridColumnGap), 750 | gridGap: useMotionValue(initial.gridGap), 751 | gridRowGap: useMotionValue(initial.gridRowGap), 752 | imeMode: useMotionValue(initial.imeMode), 753 | offsetBlock: useMotionValue(initial.offsetBlock), 754 | offsetBlockEnd: useMotionValue(initial.offsetBlockEnd), 755 | offsetBlockStart: useMotionValue(initial.offsetBlockStart), 756 | offsetInline: useMotionValue(initial.offsetInline), 757 | offsetInlineEnd: useMotionValue(initial.offsetInlineEnd), 758 | offsetInlineStart: useMotionValue(initial.offsetInlineStart), 759 | scrollSnapCoordinate: useMotionValue(initial.scrollSnapCoordinate), 760 | scrollSnapDestination: useMotionValue(initial.scrollSnapDestination), 761 | scrollSnapPointsX: useMotionValue(initial.scrollSnapPointsX), 762 | scrollSnapPointsY: useMotionValue(initial.scrollSnapPointsY), 763 | scrollSnapTypeX: useMotionValue(initial.scrollSnapTypeX), 764 | scrollSnapTypeY: useMotionValue(initial.scrollSnapTypeY), 765 | scrollbarTrackColor: useMotionValue(initial.scrollbarTrackColor), 766 | textCombineHorizontal: useMotionValue(initial.textCombineHorizontal), 767 | KhtmlBoxAlign: useMotionValue(initial.KhtmlBoxAlign), 768 | KhtmlBoxDirection: useMotionValue(initial.KhtmlBoxDirection), 769 | KhtmlBoxFlex: useMotionValue(initial.KhtmlBoxFlex), 770 | KhtmlBoxFlexGroup: useMotionValue(initial.KhtmlBoxFlexGroup), 771 | KhtmlBoxLines: useMotionValue(initial.KhtmlBoxLines), 772 | KhtmlBoxOrdinalGroup: useMotionValue(initial.KhtmlBoxOrdinalGroup), 773 | KhtmlBoxOrient: useMotionValue(initial.KhtmlBoxOrient), 774 | KhtmlBoxPack: useMotionValue(initial.KhtmlBoxPack), 775 | KhtmlLineBreak: useMotionValue(initial.KhtmlLineBreak), 776 | KhtmlOpacity: useMotionValue(initial.KhtmlOpacity), 777 | KhtmlUserSelect: useMotionValue(initial.KhtmlUserSelect), 778 | MozBackgroundClip: useMotionValue(initial.MozBackgroundClip), 779 | MozBackgroundInlinePolicy: useMotionValue( 780 | initial.MozBackgroundInlinePolicy 781 | ), 782 | MozBackgroundOrigin: useMotionValue(initial.MozBackgroundOrigin), 783 | MozBackgroundSize: useMotionValue(initial.MozBackgroundSize), 784 | MozBinding: useMotionValue(initial.MozBinding), 785 | MozBorderRadius: useMotionValue(initial.MozBorderRadius), 786 | MozBorderRadiusBottomleft: useMotionValue( 787 | initial.MozBorderRadiusBottomleft 788 | ), 789 | MozBorderRadiusBottomright: useMotionValue( 790 | initial.MozBorderRadiusBottomright 791 | ), 792 | MozBorderRadiusTopleft: useMotionValue(initial.MozBorderRadiusTopleft), 793 | MozBorderRadiusTopright: useMotionValue(initial.MozBorderRadiusTopright), 794 | MozBoxAlign: useMotionValue(initial.MozBoxAlign), 795 | MozBoxDirection: useMotionValue(initial.MozBoxDirection), 796 | MozBoxFlex: useMotionValue(initial.MozBoxFlex), 797 | MozBoxOrdinalGroup: useMotionValue(initial.MozBoxOrdinalGroup), 798 | MozBoxOrient: useMotionValue(initial.MozBoxOrient), 799 | MozBoxPack: useMotionValue(initial.MozBoxPack), 800 | MozBoxShadow: useMotionValue(initial.MozBoxShadow), 801 | MozFloatEdge: useMotionValue(initial.MozFloatEdge), 802 | MozForceBrokenImageIcon: useMotionValue(initial.MozForceBrokenImageIcon), 803 | MozOpacity: useMotionValue(initial.MozOpacity), 804 | MozOutline: useMotionValue(initial.MozOutline), 805 | MozOutlineColor: useMotionValue(initial.MozOutlineColor), 806 | MozOutlineRadius: useMotionValue(initial.MozOutlineRadius), 807 | MozOutlineRadiusBottomleft: useMotionValue( 808 | initial.MozOutlineRadiusBottomleft 809 | ), 810 | MozOutlineRadiusBottomright: useMotionValue( 811 | initial.MozOutlineRadiusBottomright 812 | ), 813 | MozOutlineRadiusTopleft: useMotionValue(initial.MozOutlineRadiusTopleft), 814 | MozOutlineRadiusTopright: useMotionValue(initial.MozOutlineRadiusTopright), 815 | MozOutlineStyle: useMotionValue(initial.MozOutlineStyle), 816 | MozOutlineWidth: useMotionValue(initial.MozOutlineWidth), 817 | MozTextAlignLast: useMotionValue(initial.MozTextAlignLast), 818 | MozTextDecorationColor: useMotionValue(initial.MozTextDecorationColor), 819 | MozTextDecorationLine: useMotionValue(initial.MozTextDecorationLine), 820 | MozTextDecorationStyle: useMotionValue(initial.MozTextDecorationStyle), 821 | MozUserInput: useMotionValue(initial.MozUserInput), 822 | msImeMode: useMotionValue(initial.msImeMode), 823 | msScrollbarTrackColor: useMotionValue(initial.msScrollbarTrackColor), 824 | OAnimation: useMotionValue(initial.OAnimation), 825 | OAnimationDelay: useMotionValue(initial.OAnimationDelay), 826 | OAnimationDirection: useMotionValue(initial.OAnimationDirection), 827 | OAnimationDuration: useMotionValue(initial.OAnimationDuration), 828 | OAnimationFillMode: useMotionValue(initial.OAnimationFillMode), 829 | OAnimationIterationCount: useMotionValue(initial.OAnimationIterationCount), 830 | OAnimationName: useMotionValue(initial.OAnimationName), 831 | OAnimationPlayState: useMotionValue(initial.OAnimationPlayState), 832 | OAnimationTimingFunction: useMotionValue(initial.OAnimationTimingFunction), 833 | OBackgroundSize: useMotionValue(initial.OBackgroundSize), 834 | OBorderImage: useMotionValue(initial.OBorderImage), 835 | OObjectFit: useMotionValue(initial.OObjectFit), 836 | OObjectPosition: useMotionValue(initial.OObjectPosition), 837 | OTabSize: useMotionValue(initial.OTabSize), 838 | OTextOverflow: useMotionValue(initial.OTextOverflow), 839 | OTransform: useMotionValue(initial.OTransform), 840 | OTransformOrigin: useMotionValue(initial.OTransformOrigin), 841 | OTransition: useMotionValue(initial.OTransition), 842 | OTransitionDelay: useMotionValue(initial.OTransitionDelay), 843 | OTransitionDuration: useMotionValue(initial.OTransitionDuration), 844 | OTransitionProperty: useMotionValue(initial.OTransitionProperty), 845 | OTransitionTimingFunction: useMotionValue( 846 | initial.OTransitionTimingFunction 847 | ), 848 | WebkitBoxAlign: useMotionValue(initial.WebkitBoxAlign), 849 | WebkitBoxDirection: useMotionValue(initial.WebkitBoxDirection), 850 | WebkitBoxFlex: useMotionValue(initial.WebkitBoxFlex), 851 | WebkitBoxFlexGroup: useMotionValue(initial.WebkitBoxFlexGroup), 852 | WebkitBoxLines: useMotionValue(initial.WebkitBoxLines), 853 | WebkitBoxOrdinalGroup: useMotionValue(initial.WebkitBoxOrdinalGroup), 854 | WebkitBoxOrient: useMotionValue(initial.WebkitBoxOrient), 855 | WebkitBoxPack: useMotionValue(initial.WebkitBoxPack), 856 | WebkitScrollSnapPointsX: useMotionValue(initial.WebkitScrollSnapPointsX), 857 | WebkitScrollSnapPointsY: useMotionValue(initial.WebkitScrollSnapPointsY), 858 | 859 | // SvgProperties 860 | alignmentBaseline: useMotionValue(initial.alignmentBaseline), 861 | baselineShift: useMotionValue(initial.baselineShift), 862 | // clip: useMotionValue(initial.clip), 863 | // clipPath: useMotionValue(initial.clipPath), 864 | clipRule: useMotionValue(initial.clipRule), 865 | // color: useMotionValue(initial.color), 866 | colorInterpolation: useMotionValue(initial.colorInterpolation), 867 | colorRendering: useMotionValue(initial.colorRendering), 868 | // cursor: useMotionValue(initial.cursor), 869 | // direction: useMotionValue(initial.direction), 870 | // display: useMotionValue(initial.display), 871 | dominantBaseline: useMotionValue(initial.dominantBaseline), 872 | fill: useMotionValue(initial.fill), 873 | fillOpacity: useMotionValue(initial.fillOpacity), 874 | fillRule: useMotionValue(initial.fillRule), 875 | // filter: useMotionValue(initial.filter), 876 | floodColor: useMotionValue(initial.floodColor), 877 | floodOpacity: useMotionValue(initial.floodOpacity), 878 | // font: useMotionValue(initial.font), 879 | // fontFamily: useMotionValue(initial.fontFamily), 880 | // fontSize: useMotionValue(initial.fontSize), 881 | // fontSizeAdjust: useMotionValue(initial.fontSizeAdjust), 882 | // fontStretch: useMotionValue(initial.fontStretch), 883 | // fontStyle: useMotionValue(initial.fontStyle), 884 | // fontVariant: useMotionValue(initial.fontVariant), 885 | // fontWeight: useMotionValue(initial.fontWeight), 886 | glyphOrientationVertical: useMotionValue(initial.glyphOrientationVertical), 887 | // imageRendering: useMotionValue(initial.imageRendering), 888 | // letterSpacing: useMotionValue(initial.letterSpacing), 889 | lightingColor: useMotionValue(initial.lightingColor), 890 | // lineHeight: useMotionValue(initial.lineHeight), 891 | marker: useMotionValue(initial.marker), 892 | markerEnd: useMotionValue(initial.markerEnd), 893 | markerMid: useMotionValue(initial.markerMid), 894 | markerStart: useMotionValue(initial.markerStart), 895 | // mask: useMotionValue(initial.mask), 896 | // opacity: useMotionValue(initial.opacity), 897 | // overflow: useMotionValue(initial.overflow), 898 | // paintOrder: useMotionValue(initial.paintOrder), 899 | // pointerEvents: useMotionValue(initial.pointerEvents), 900 | shapeRendering: useMotionValue(initial.shapeRendering), 901 | stopColor: useMotionValue(initial.stopColor), 902 | stopOpacity: useMotionValue(initial.stopOpacity), 903 | stroke: useMotionValue(initial.stroke), 904 | strokeDasharray: useMotionValue(initial.strokeDasharray), 905 | strokeDashoffset: useMotionValue(initial.strokeDashoffset), 906 | strokeLinecap: useMotionValue(initial.strokeLinecap), 907 | strokeLinejoin: useMotionValue(initial.strokeLinejoin), 908 | strokeMiterlimit: useMotionValue(initial.strokeMiterlimit), 909 | strokeOpacity: useMotionValue(initial.strokeOpacity), 910 | strokeWidth: useMotionValue(initial.strokeWidth), 911 | textAnchor: useMotionValue(initial.textAnchor), 912 | // textDecoration: useMotionValue(initial.textDecoration), 913 | // textRendering: useMotionValue(initial.textRendering), 914 | // unicodeBidi: useMotionValue(initial.unicodeBidi), 915 | vectorEffect: useMotionValue(initial.vectorEffect), 916 | // visibility: useMotionValue(initial.visibility), 917 | // whiteSpace: useMotionValue(initial.whiteSpace), 918 | // wordSpacing: useMotionValue(initial.wordSpacing), 919 | // writingMode: useMotionValue(initial.writingMode), 920 | }; 921 | 922 | return motionValues; 923 | }; 924 | 925 | export default useMotionValues; 926 | --------------------------------------------------------------------------------