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/[email protected] None 0 34 kB chicoxyzzy
npm/[email protected] None 0 9.22 kB jonschlinkert
npm/[email protected] environment +1 12.7 kB sindresorhus
npm/[email protected] None +1 43.9 kB feedic
npm/[email protected] None 0 2.84 kB zertosh
npm/[email protected] None 0 5.49 kB sindresorhus
npm/[email protected] None 0 97.2 kB ljharb
npm/[email protected] None +1 18.6 kB dougwilson
npm/[email protected] None 0 7.54 kB dougwilson
npm/[email protected] None +1 7.01 kB isaacs
npm/[email protected] None +1 10.6 kB sindresorhus
npm/[email protected] filesystem, shell Transitive: environment +1 39.9 kB sindresorhus
npm/[email protected] None 0 42.9 kB cspotcode
npm/[email protected] None +1 13.8 kB sindresorhus
npm/[email protected] None +2 21 kB sindresorhus
npm/[email protected] None 0 4.37 kB sindresorhus
npm/[email protected] None +4 147 kB blakeembrey
npm/[email protected] None 0 10.3 kB dougwilson
npm/[email protected] None +3 142 kB blakeembrey
npm/[email protected] filesystem 0 3.92 kB sindresorhus
npm/[email protected] None 0 3.62 kB sindresorhus
npm/[email protected] None 0 4.55 kB sindresorhus
npm/[email protected] None 0 4.51 kB jbgutierrez
npm/[email protected] None 0 6.78 kB blakeembrey
npm/[email protected] filesystem 0 5.41 kB sindresorhus
npm/[email protected] None 0 76.6 kB philipstanislaus
npm/[email protected] environment 0 5.66 kB alexeyraspopov
npm/[email protected] None 0 90 kB mrmlnc
npm/[email protected] Transitive: filesystem +5 38.5 kB sindresorhus
npm/[email protected] Transitive: environment, filesystem +4 388 kB evilebottnawi
npm/[email protected] Transitive: environment, filesystem +9 644 kB evilebottnawi
npm/[email protected] Transitive: environment, filesystem +7 599 kB evilebottnawi
npm/[email protected] Transitive: environment, filesystem +5 395 kB evilebottnawi
npm/[email protected] None +2 209 kB evilebottnawi
npm/[email protected] None 0 27.2 kB evilebottnawi
npm/[email protected] environment, filesystem +3 376 kB ai
npm/[email protected] Transitive: network +16 2.18 MB ariaminaei
npm/[email protected] None 0 3.17 kB cwmma
npm/[email protected] None 0 3.04 kB iarna
npm/[email protected] eval +1 125 kB forbeslindesay
npm/[email protected] None 0 33.5 kB google-wombot
npm/[email protected] None 0 8.37 kB feross
npm/[email protected] filesystem +1 20.2 kB ionicabizau
npm/[email protected] None 0 8.46 kB dougwilson
npm/[email protected] environment +4 4.93 MB gnoff
npm/[email protected] Transitive: environment +3 357 kB kacperkapusciak
npm/[email protected] Transitive: environment +9 2.84 MB nwienert
npm/[email protected] Transitive: environment +13 11.2 MB alitnk, nwienert
npm/[email protected] environment Transitive: eval, network +28 9.77 MB necolas
npm/[email protected] environment 0 58.7 kB gnoff
npm/[email protected] Transitive: environment +4 493 kB kashey
npm/[email protected] environment +2 337 kB gnoff
npm/[email protected] filesystem +1 110 kB paulmillr
npm/[email protected] Transitive: environment +4 499 kB souporserious
npm/[email protected] None 0 27.9 kB benjamn
npm/[email protected] None 0 31.4 kB stevenvachon
npm/[email protected] Transitive: network +15 2.12 MB ariaminaei
npm/[email protected] unsafe 0 3.42 kB floatdrop
npm/[email protected] None 0 8.56 kB 3rdeden
npm/[email protected] unsafe 0 4.39 kB sindresorhus
npm/[email protected] None 0 15 kB hirokiosame
npm/[email protected] environment, filesystem +2 159 kB ljharb
npm/[email protected] None 0 32.2 kB tim-kos
npm/[email protected] None 0 9.44 kB matteo.collina
npm/[email protected] filesystem Transitive: environment +8 139 kB isaacs
npm/[email protected] None +1 14.9 kB feross
npm/[email protected] None 0 31.7 kB feross
npm/[email protected] None 0 42.3 kB chalker
npm/[email protected] environment +2 114 kB gnoff
npm/[email protected] environment Transitive: eval +8 1.67 MB evilebottnawi
npm/[email protected] None +1 1.68 MB jfromaniello
npm/[email protected] None 0 68.3 kB lukekarrys
npm/[email protected] None +3 47.1 kB dougwilson
npm/[email protected] None 0 4.22 kB bcoe
npm/[email protected] None +3 42 kB jonschlinkert
npm/[email protected] None 0 8.56 kB domenic
npm/[email protected] None 0 4.03 kB wesleytodd
npm/[email protected] None +1 5.38 kB kevva
npm/[email protected] None 0 2.83 kB sindresorhus
npm/[email protected] None 0 45 kB ljharb
npm/[email protected] None 0 9.96 kB isaacs
npm/[email protected] None 0 3.83 kB sindresorhus
npm/[email protected] None +5 65.7 kB sindresorhus
npm/[email protected] None 0 138 kB joshglazebrook
npm/[email protected] None 0 26.4 kB sokra
npm/[email protected] None 0 148 kB 7rulnik
npm/[email protected] filesystem, network 0 226 kB eemeli
npm/[email protected] None 0 23.6 kB eriwen
npm/[email protected] None 0 11 kB dougwilson
npm/[email protected] None +4 68 kB sindresorhus
npm/[email protected] None +1 9.64 kB sindresorhus
npm/[email protected] None 0 3.05 kB sindresorhus
npm/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +28 10.2 MB evilebottnawi
npm/[email protected] None 0 28.3 kB necolas
npm/[email protected] environment +1 9.76 kB sindresorhus
npm/[email protected] None 0 9.18 kB ljharb
npm/[email protected] None 0 412 kB stefcameron
npm/[email protected] Transitive: eval, unsafe +17 2.05 MB gajus-table
npm/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +286 740 MB alitnk, nwienert
npm/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +523 209 MB alitnk, nwienert
npm/[email protected] None 0 46.9 kB sokra
npm/[email protected] environment, eval Transitive: filesystem, shell +2 2.72 MB fabiosantoscode
npm/[email protected] filesystem, shell, unsafe Transitive: environment, eval, network +32 10.6 MB evilebottnawi
npm/[email protected] None 0 3.5 kB sindresorhus
npm/[email protected] None +1 32.6 kB jonschlinkert
npm/[email protected] None 0 4.68 kB dougwilson
npm/[email protected] None 0 268 kB sebmaster
npm/[email protected] None 0 84 kB typescript-bot
npm/[email protected] None 0 274 kB sindresorhus
npm/[email protected] None 0 112 kB faisalman
npm/[email protected] None 0 4.67 kB ryanzim
npm/[email protected] None 0 4.31 kB dougwilson
npm/[email protected] filesystem, shell Transitive: environment +6 2.37 MB ai
npm/[email protected] None +1 503 kB garycourt
npm/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +32 10.6 MB evilebottnawi
npm/[email protected] None 0 5.48 kB tootallnate
npm/[email protected] None 0 24.2 kB ariaminaei
npm/[email protected] None 0 3.72 kB jaredhanson
npm/[email protected] None 0 116 kB ctavan
npm/[email protected] None 0 8.75 kB dougwilson
npm/[email protected] Transitive: environment, eval, filesystem, network, shell +36 235 MB antfu, patak, soda, ...2 more
npm/[email protected] filesystem 0 8.83 kB ionicabizau
npm/[email protected] None 0 12.4 kB sebmaster
npm/[email protected] environment, filesystem, network Transitive: shell +5 1.98 MB valscion
npm/[email protected] environment, filesystem Transitive: eval, network, shell, unsafe +35 10.3 MB evilebottnawi
npm/[email protected] environment, eval, network Transitive: filesystem, shell, unsafe +74 14.9 MB evilebottnawi
npm/[email protected] None +1 63.1 kB sokra
npm/[email protected] environment, filesystem, network, unsafe Transitive: eval, shell +27 10.2 MB evilebottnawi
npm/[email protected] None +2 331 kB domenic
npm/[email protected] environment Transitive: filesystem +1 20.9 kB isaacs
npm/[email protected] None 0 2.96 kB zkat
npm/[email protected] network +1 109 kB lpinca
npm/[email protected] None 0 14.8 kB isaacs
npm/[email protected] None 0 6.03 kB sindresorhus

🚮 Removed packages: npm/@discoveryjs/[email protected], npm/@jridgewell/[email protected], npm/@leichtgewicht/[email protected], npm/@npmcli/[email protected], npm/@npmcli/[email protected], npm/@polka/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@rollup/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webpack-cli/[email protected], npm/@webpack-cli/[email protected], npm/@webpack-cli/[email protected], npm/@xtuc/[email protected], npm/@xtuc/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

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