Fade InHoverStagger ListLayout ShiftModal BackdropPage TransitionRotateScale UpScroll ParallaxShape MorphingSlide UpText Typing

Scale Up Animation (Framer Motion)

Framer Motion Animation Preview: Scale Up

Scale Up

Code Snippet


<motion.div
  initial={{ scale: 0.6, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  transition={{ duration: 0.6, ease: 'backOut' }}
/>

Explanation

  • initial: Sets the starting scale to 0.6 and opacity to 0.
  • animate: Scales the element to full size (1) and fades it in.
  • transition: Uses backOut easing for a bouncy, natural scale effect over 0.6 seconds.
  • Ideal for making elements pop into view smoothly.