search

skorphil / nextjs-form

Educational NextJs project to build a complex mobile-first form
https://www.chromatic.com/library?appId=65b2882ac1586a6b21cba0dd
MIT License
2 stars 0 forks source link

Implement Framer motion Animation to InstitutionsTabList #25

Open skorphil opened 5 months ago

skorphil commented 5 months ago

Framer motion size glitch can be fixed with layout="position" property

https://codesandbox.io/p/devbox/grid-framer-motion-forked-qq2njt?embed=1&file=%2Fsrc%2Fstyles.css

skorphil commented 4 months ago

Issues so far:

  1. as={motion.div} not working properly causing spring-like motion
  2. pure motion.div not being animated when changing in styles occurs due to viewport size changing

https://github.com/skorphil/nextjs-form/assets/6762009/2300124c-5510-4e1f-8f79-159312c7efd9

skorphil commented 4 months ago

Issues so far:

  1. as={motion.div} not working properly causing spring-like motion

  2. pure motion.div not being animated when changing in styles occurs due to viewport size changing

    bug.animation.mov

Prob this is cuz continuing changing of classes due to hook, reacting to change in viewport. Need to try to implement breakpoint logic, so change will occur only once

skorphil commented 4 months ago

https://github.com/chakra-ui/chakra-ui/discussions/8283