Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/moti support component config #2319

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

ehxxn
Copy link
Member

@ehxxn ehxxn commented Feb 22, 2024

know issues
for some reason translateX: { type: 'spring', overshootClamping: true } doesn't work, but if I use transform instead it works.
@nandorojo probably an issue in moti useMotify()

Copy link

vercel bot commented Feb 22, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
site ❌ Failed (Inspect) Feb 23, 2024 8:47am
studio 🔄 Building (Inspect) Visit Preview Feb 23, 2024 8:47am

@nandorojo
Copy link
Contributor

Code looks a bit complex to me. The transform issue makes sense and should be an easy fix though.

@nandorojo
Copy link
Contributor

Oh sorry thought this was a PR on the moti repo

@nandorojo
Copy link
Contributor

But yeah I can fix this upstream

@ehxxn
Copy link
Member Author

ehxxn commented Feb 22, 2024

thanks!
yea I'll improve the code, ok I'll keep it translateX then

@nandorojo
Copy link
Contributor

@TheEhsanSarshar can you try moti 0.28.1? Should be fixed there.

@nandorojo
Copy link
Contributor

nandorojo commented Feb 22, 2024

For shorthands, what if you just did it before the useMotify step. This way the transition has a stable reference and does less work at render time.

createAnimations(animations) {
  const shorthands = { x: 'translateX', y: 'translateY' }

  for (const animationKey in animations) {
    for (const shorthand in shorthands) {
      if (animations[animationKey][shorthand]) {
        const styleName = shorthands[shorthand]
        animations[animationKey][styleName] = animations[animationKey][shorthand]
      }
    }
  }

  return { ... }
}

Then in useMotify, you can do transition: inlineTransition ? Object.assign(transition, inlineTransition) : transition

Where transition = animations[animationKey]. This way you only create a new object reference if someone used the inline animation config in the array.

: props.animation
const normalizedAnimationObject =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets use a for loop and a single object, should be quite a bit more performance sensitive

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same for the animationObject above probably we can do everything in one loop

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank! updated

@ehxxn
Copy link
Member Author

ehxxn commented Feb 23, 2024

@nandorojo for now we only have x, y so I guess it's fine to do it in a render loop?

Copy link

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/node-releases@2.0.14 None 0 34 kB chicoxyzzy
npm/normalize-path@3.0.0 None 0 9.22 kB jonschlinkert
npm/npm-run-path@4.0.1 environment +1 12.7 kB sindresorhus
npm/nth-check@2.1.1 None +1 43.9 kB feedic
npm/nullthrows@1.1.1 None 0 2.84 kB zertosh
npm/object-assign@4.1.1 None 0 5.49 kB sindresorhus
npm/object-inspect@1.13.1 None 0 97.2 kB ljharb
npm/on-finished@2.3.0 None +1 18.6 kB dougwilson
npm/on-headers@1.0.2 None 0 7.54 kB dougwilson
npm/once@1.4.0 None +1 7.01 kB isaacs
npm/onetime@5.1.2 None +1 10.6 kB sindresorhus
npm/open@6.4.0 filesystem, shell Transitive: environment +1 39.9 kB sindresorhus
npm/outdent@0.8.0 None 0 42.9 kB cspotcode
npm/p-limit@3.1.0 None +1 13.8 kB sindresorhus
npm/p-locate@5.0.0 None +2 21 kB sindresorhus
npm/p-try@2.2.0 None 0 4.37 kB sindresorhus
npm/param-case@3.0.4 None +4 147 kB blakeembrey
npm/parseurl@1.3.3 None 0 10.3 kB dougwilson
npm/pascal-case@3.1.2 None +3 142 kB blakeembrey
npm/path-exists@4.0.0 filesystem 0 3.92 kB sindresorhus
npm/path-is-absolute@1.0.1 None 0 3.62 kB sindresorhus
npm/path-key@3.1.1 None 0 4.55 kB sindresorhus
npm/path-parse@1.0.7 None 0 4.51 kB jbgutierrez
npm/path-to-regexp@0.1.7 None 0 6.78 kB blakeembrey
npm/path-type@4.0.0 filesystem 0 5.41 kB sindresorhus
npm/performant-array-to-tree@1.11.0 None 0 76.6 kB philipstanislaus
npm/picocolors@1.0.0 environment 0 5.66 kB alexeyraspopov
npm/picomatch@2.3.1 None 0 90 kB mrmlnc
npm/pkg-dir@4.2.0 Transitive: filesystem +5 38.5 kB sindresorhus
npm/postcss-modules-extract-imports@3.0.0 Transitive: environment, filesystem +4 388 kB evilebottnawi
npm/postcss-modules-local-by-default@4.0.4 Transitive: environment, filesystem +9 644 kB evilebottnawi
npm/postcss-modules-scope@3.1.1 Transitive: environment, filesystem +7 599 kB evilebottnawi
npm/postcss-modules-values@4.0.0 Transitive: environment, filesystem +5 395 kB evilebottnawi
npm/postcss-selector-parser@6.0.15 None +2 209 kB evilebottnawi
npm/postcss-value-parser@4.2.0 None 0 27.2 kB evilebottnawi
npm/postcss@8.4.35 environment, filesystem +3 376 kB ai
npm/pretty-error@4.0.0 Transitive: network +16 2.18 MB ariaminaei
npm/process-nextick-args@2.0.1 None 0 3.17 kB cwmma
npm/promise-inflight@1.0.1 None 0 3.04 kB iarna
npm/promise@7.3.1 eval +1 125 kB forbeslindesay
npm/punycode@2.3.1 None 0 33.5 kB google-wombot
npm/queue-microtask@1.2.3 None 0 8.37 kB feross
npm/r-json@1.3.0 filesystem +1 20.2 kB ionicabizau
npm/range-parser@1.2.1 None 0 8.46 kB dougwilson
npm/react-dom@18.2.0 environment +4 4.93 MB gnoff
npm/react-freeze@1.0.3 Transitive: environment +3 357 kB kacperkapusciak
npm/react-native-web-internals@1.90.6 Transitive: environment +9 2.84 MB nwienert
npm/react-native-web-lite@1.90.6 Transitive: environment +13 11.2 MB alitnk, nwienert
npm/react-native-web@0.19.10 environment Transitive: eval, network +28 9.77 MB necolas
npm/react-refresh@0.14.0 environment 0 58.7 kB gnoff
npm/react-remove-scroll@2.5.5 Transitive: environment +4 493 kB kashey
npm/react@18.2.0 environment +2 337 kB gnoff
npm/readdirp@3.6.0 filesystem +1 110 kB paulmillr
npm/reforest@0.13.0 Transitive: environment +4 499 kB souporserious
npm/regenerator-runtime@0.14.1 None 0 27.9 kB benjamn
npm/relateurl@0.2.7 None 0 31.4 kB stevenvachon
npm/renderkid@3.0.0 Transitive: network +15 2.12 MB ariaminaei
npm/require-from-string@2.0.2 unsafe 0 3.42 kB floatdrop
npm/requires-port@1.0.0 None 0 8.56 kB 3rdeden
npm/resolve-from@3.0.0 unsafe 0 4.39 kB sindresorhus
npm/resolve-pkg-maps@1.0.0 None 0 15 kB hirokiosame
npm/resolve@1.22.8 environment, filesystem +2 159 kB ljharb
npm/retry@0.12.0 None 0 32.2 kB tim-kos
npm/reusify@1.0.4 None 0 9.44 kB matteo.collina
npm/rimraf@3.0.2 filesystem Transitive: environment +8 139 kB isaacs
npm/run-parallel@1.2.0 None +1 14.9 kB feross
npm/safe-buffer@5.1.2 None 0 31.7 kB feross
npm/safer-buffer@2.1.2 None 0 42.3 kB chalker
npm/scheduler@0.23.0 environment +2 114 kB gnoff
npm/schema-utils@3.3.0 environment Transitive: eval +8 1.67 MB evilebottnawi
npm/selfsigned@2.4.1 None +1 1.68 MB jfromaniello
npm/semver@6.3.1 None 0 68.3 kB lukekarrys
npm/serve-static@1.15.0 None +3 47.1 kB dougwilson
npm/set-blocking@2.0.0 None 0 4.22 kB bcoe
npm/set-value@4.1.0 None +3 42 kB jonschlinkert
npm/setimmediate@1.0.5 None 0 8.56 kB domenic
npm/setprototypeof@1.2.0 None 0 4.03 kB wesleytodd
npm/shebang-command@2.0.0 None +1 5.38 kB kevva
npm/shebang-regex@3.0.0 None 0 2.83 kB sindresorhus
npm/shell-quote@1.8.1 None 0 45 kB ljharb
npm/signal-exit@3.0.7 None 0 9.96 kB isaacs
npm/slash@4.0.0 None 0 3.83 kB sindresorhus
npm/slice-ansi@4.0.0 None +5 65.7 kB sindresorhus
npm/smart-buffer@4.2.0 None 0 138 kB joshglazebrook
npm/source-list-map@2.0.1 None 0 26.4 kB sokra
npm/source-map-js@1.0.2 None 0 148 kB 7rulnik
npm/source-map@0.7.4 filesystem, network 0 226 kB eemeli
npm/stackframe@1.3.4 None 0 23.6 kB eriwen
npm/statuses@1.5.0 None 0 11 kB dougwilson
npm/string-width@4.2.3 None +4 68 kB sindresorhus
npm/strip-ansi@6.0.1 None +1 9.64 kB sindresorhus
npm/strip-final-newline@2.0.0 None 0 3.05 kB sindresorhus
npm/style-loader@3.3.4 Transitive: environment, eval, filesystem, network, shell, unsafe +28 10.2 MB evilebottnawi
npm/styleq@0.1.3 None 0 28.3 kB necolas
npm/supports-color@5.5.0 environment +1 9.76 kB sindresorhus
npm/supports-preserve-symlinks-flag@1.0.0 None 0 9.18 kB ljharb
npm/tabbable@6.2.0 None 0 412 kB stefcameron
npm/table@6.8.1 Transitive: eval, unsafe +17 2.05 MB gajus-table
npm/tamagui-loader@1.90.6 Transitive: environment, eval, filesystem, network, shell, unsafe +286 740 MB alitnk, nwienert
npm/tamagui@1.90.6 Transitive: environment, eval, filesystem, network, shell, unsafe +523 209 MB alitnk, nwienert
npm/tapable@2.2.1 None 0 46.9 kB sokra
npm/terser@5.27.2 environment, eval Transitive: filesystem, shell +2 2.72 MB fabiosantoscode
npm/thread-loader@3.0.4 filesystem, shell, unsafe Transitive: environment, eval, network +32 10.6 MB evilebottnawi
npm/to-fast-properties@2.0.0 None 0 3.5 kB sindresorhus
npm/to-regex-range@5.0.1 None +1 32.6 kB jonschlinkert
npm/toidentifier@1.0.1 None 0 4.68 kB dougwilson
npm/tr46@0.0.3 None 0 268 kB sebmaster
npm/tslib@2.6.2 None 0 84 kB typescript-bot
npm/type-fest@3.13.1 None 0 274 kB sindresorhus
npm/ua-parser-js@1.0.37 None 0 112 kB faisalman
npm/universalify@2.0.1 None 0 4.67 kB ryanzim
npm/unpipe@1.0.0 None 0 4.31 kB dougwilson
npm/update-browserslist-db@1.0.13 filesystem, shell Transitive: environment +6 2.37 MB ai
npm/uri-js@4.4.1 None +1 503 kB garycourt
npm/url-loader@4.1.1 Transitive: environment, eval, filesystem, network, shell, unsafe +32 10.6 MB evilebottnawi
npm/util-deprecate@1.0.2 None 0 5.48 kB tootallnate
npm/utila@0.4.0 None 0 24.2 kB ariaminaei
npm/utils-merge@1.0.1 None 0 3.72 kB jaredhanson
npm/uuid@8.3.2 None 0 116 kB ctavan
npm/vary@1.1.2 None 0 8.75 kB dougwilson
npm/vite@5.1.4 Transitive: environment, eval, filesystem, network, shell +36 235 MB antfu, patak, soda, ...2 more
npm/w-json@1.3.10 filesystem 0 8.83 kB ionicabizau
npm/webidl-conversions@3.0.1 None 0 12.4 kB sebmaster
npm/webpack-bundle-analyzer@4.10.1 environment, filesystem, network Transitive: shell +5 1.98 MB valscion
npm/webpack-cli@4.10.0 environment, filesystem Transitive: eval, network, shell, unsafe +35 10.3 MB evilebottnawi
npm/webpack-dev-server@4.15.1 environment, eval, network Transitive: filesystem, shell, unsafe +74 14.9 MB evilebottnawi
npm/webpack-sources@1.4.3 None +1 63.1 kB sokra
npm/webpack@5.90.3 environment, filesystem, network, unsafe Transitive: eval, shell +27 10.2 MB evilebottnawi
npm/whatwg-url@5.0.0 None +2 331 kB domenic
npm/which@2.0.2 environment Transitive: filesystem +1 20.9 kB isaacs
npm/wrappy@1.0.2 None 0 2.96 kB zkat
npm/ws@6.2.2 network +1 109 kB lpinca
npm/yallist@4.0.0 None 0 14.8 kB isaacs
npm/yocto-queue@0.1.0 None 0 6.03 kB sindresorhus

🚮 Removed packages: npm/@discoveryjs/json-ext@0.5.7, npm/@jridgewell/source-map@0.3.5, npm/@leichtgewicht/ip-codec@2.0.4, npm/@npmcli/fs@2.1.2, npm/@npmcli/move-file@2.0.1, npm/@polka/url@1.0.0-next.21, npm/@rollup/rollup-android-arm-eabi@4.12.0, npm/@rollup/rollup-android-arm64@4.12.0, npm/@rollup/rollup-darwin-arm64@4.12.0, npm/@rollup/rollup-darwin-x64@4.12.0, npm/@rollup/rollup-linux-arm-gnueabihf@4.12.0, npm/@rollup/rollup-linux-arm64-gnu@4.12.0, npm/@rollup/rollup-linux-arm64-musl@4.12.0, npm/@rollup/rollup-linux-x64-gnu@4.12.0, npm/@rollup/rollup-linux-x64-musl@4.12.0, npm/@rollup/rollup-win32-arm64-msvc@4.12.0, npm/@rollup/rollup-win32-ia32-msvc@4.12.0, npm/@rollup/rollup-win32-x64-msvc@4.12.0, npm/@types/body-parser@1.19.5, npm/@types/bonjour@3.5.13, npm/@types/connect-history-api-fallback@1.5.4, npm/@types/connect@3.4.38, npm/@types/eslint-scope@3.7.7, npm/@types/eslint@8.56.3, npm/@types/express-serve-static-core@4.17.43, npm/@types/express@4.17.21, npm/@types/http-proxy@1.17.14, npm/@types/retry@0.12.0, npm/@types/send@0.17.4, npm/@types/serve-index@1.9.4, npm/@types/serve-static@1.15.5, npm/@types/sockjs@0.3.36, npm/@types/ws@8.5.10, npm/@webassemblyjs/ast@1.11.6, npm/@webassemblyjs/floating-point-hex-parser@1.11.6, npm/@webassemblyjs/helper-api-error@1.11.6, npm/@webassemblyjs/helper-buffer@1.11.6, npm/@webassemblyjs/helper-numbers@1.11.6, npm/@webassemblyjs/helper-wasm-bytecode@1.11.6, npm/@webassemblyjs/helper-wasm-section@1.11.6, npm/@webassemblyjs/ieee754@1.11.6, npm/@webassemblyjs/leb128@1.11.6, npm/@webassemblyjs/utf8@1.11.6, npm/@webassemblyjs/wasm-edit@1.11.6, npm/@webassemblyjs/wasm-gen@1.11.6, npm/@webassemblyjs/wasm-opt@1.11.6, npm/@webassemblyjs/wasm-parser@1.11.6, npm/@webassemblyjs/wast-printer@1.11.6, npm/@webpack-cli/configtest@1.2.0, npm/@webpack-cli/info@1.5.0, npm/@webpack-cli/serve@1.7.0, npm/@xtuc/ieee754@1.2.0, npm/@xtuc/long@4.2.2, npm/acorn-import-assertions@1.9.0, npm/agent-base@6.0.2, npm/agentkeepalive@4.3.0, npm/aggregate-error@3.1.0, npm/are-we-there-yet@3.0.1, npm/batch@0.6.1, npm/body-parser@1.20.1, npm/bonjour-service@1.2.1, npm/brace-expansion@1.1.11, npm/cacache@16.1.3, npm/call-bind@1.0.7, npm/chrome-trace-event@1.0.3, npm/clone-deep@4.0.1, npm/connect-history-api-fallback@2.0.0, npm/content-disposition@0.5.4, npm/default-gateway@6.0.3, npm/detect-node@2.1.0, npm/dns-equal@1.0.0, npm/dns-packet@5.6.1, npm/duplexer@0.1.2, npm/encoding@0.1.13, npm/enhanced-resolve@5.15.0, npm/es-module-lexer@1.4.1, npm/eslint-scope@5.1.1, npm/esrecurse@4.3.0, npm/events@3.3.0, npm/express@4.18.2, npm/fastest-levenshtein@1.0.16, npm/faye-websocket@0.11.4, npm/follow-redirects@1.15.5, npm/fs-minipass@2.1.0, npm/fs-monkey@1.0.5, npm/gauge@4.0.4, npm/get-intrinsic@1.2.4, npm/gzip-size@6.0.0, npm/handle-thing@2.0.1, npm/has@1.0.3, npm/hpack.js@2.1.6, npm/http-deceiver@1.2.7, npm/http-errors@2.0.0, npm/http-parser-js@0.5.8, npm/http-proxy-agent@5.0.0, npm/http-proxy-middleware@2.0.6, npm/http-proxy@1.18.1, npm/https-proxy-agent@5.0.1, npm/humanize-ms@1.2.1, npm/iconv-lite@0.4.24, npm/import-local@3.1.0, npm/interpret@2.2.0, npm/ipaddr.js@2.1.0, npm/is-core-module@2.13.1, npm/jest-worker@27.5.1, npm/launch-editor@2.6.1, npm/lightningcss-darwin-arm64@1.23.0, npm/lightningcss-darwin-x64@1.23.0, npm/lightningcss-freebsd-x64@1.23.0, npm/lightningcss-linux-arm-gnueabihf@1.23.0, npm/lightningcss-linux-arm64-gnu@1.23.0, npm/lightningcss-linux-arm64-musl@1.23.0, npm/lightningcss-linux-x64-gnu@1.23.0, npm/lightningcss-linux-x64-musl@1.23.0, npm/lightningcss-win32-x64-msvc@1.23.0, npm/make-fetch-happen@10.2.1, npm/memfs@3.6.0, npm/minimalistic-assert@1.0.1, npm/minipass-collect@1.0.2, npm/minipass-fetch@2.1.2, npm/minipass-flush@1.0.5, npm/minipass-pipeline@1.2.4, npm/minipass-sized@1.0.3, npm/minipass@3.3.6, npm/minizlib@2.1.2, npm/mrmime@1.0.1, npm/multicast-dns@7.2.5, npm/node-gyp@9.3.1

View full report↗︎

@nandorojo
Copy link
Contributor

What I suggested is better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants