Fade InHoverStagger ListLayout ShiftModal BackdropPage TransitionRotateScale UpScroll ParallaxShape MorphingSlide UpText Typing

Slide Up Animation (Framer Motion)

Framer Motion Animation Preview: Slide Up

Slide Up

This box slides up while fading in.

Code Snippet


<motion.div
  initial={{ y: 50, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  transition={{ duration: 0.8, ease: 'easeOut' }}
/>

Explanation

  • initial: Starts y: 50 and opacity: 0, so it’s below and invisible.
  • animate: Moves to y: 0 and opacity: 1 to appear and slide up.
  • transition: Duration 0.8s with easeOut for smooth motion.
  • Perfect for animating elements entering the screen from below.
  • Can be combined with other transforms like scale or rotate for richer effects.