Rizqi's Logo

I am a stupid person.

Currently Reading

  • Shape Up
    Shape Up: Stop Running in Circles and Ship Work that Mattersby Ryan Singer, Jason Fried
September 4th, 2020

TIL about AnimateShareLayout from Framer Motion

Video https://www.learnwithjason.dev/let-s-learn-framer-motion
Codesandbox https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-yn8y1

  1. By adding <motion.div> you can animate css state
  2. Use AnimateShareLayout and pass layoutId to connected element that want to animate
  3. type = crossfade is helpful to prevent junky animation while transitioning

Another resources:

  1. Animated menu
  2. Simple toggle
Powered byGatsby+❤️