Framer Motion Animation Presets

A collection of reusable animation presets for Framer Motion to enhance your React applications.

Getting Started

To use these animation presets in your project, import them from the animations file:

1import { fadeIn, slideInLeft } from "@/animations/animations";
2
3// Then use in your components
4<motion.div 
5  variants={fadeIn}
6  initial="hidden"
7  animate="visible"
8>
9  Content goes here
10</motion.div>

Bounce

Bouncy entrance animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const bounceVariants: Variants = {
4  hidden: {
5    y: -100,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 300,
14      damping: 10,
15      mass: 1
16    }
17  }
18}; 
19

Bounce In Down

Bounce in from top with high spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const bounceInDownVariants: Variants = {
4  hidden: {
5    y: -100,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 400,
14      damping: 10,
15      duration: 0.8
16    }
17  },
18  exit: {
19    y: -100,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Bounce In Rotate

Bounce in with rotation effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const bounceInRotateVariants: Variants = {
4  hidden: {
5    scale: 0.3,
6    rotate: -180,
7    opacity: 0,
8  },
9  visible: {
10    scale: 1,
11    rotate: 0,
12    opacity: 1,
13    transition: {
14      type: "spring",
15      stiffness: 400,
16      damping: 10,
17      duration: 0.8
18    }
19  },
20  exit: {
21    scale: 0.3,
22    rotate: 180,
23    opacity: 0,
24    transition: {
25      duration: 0.3
26    }
27  }
28}; 
29

Bounce In Scale

Bounce in with scale effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const bounceInScaleVariants: Variants = {
4  hidden: {
5    scale: 0.3,
6    opacity: 0,
7  },
8  visible: {
9    scale: 1,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 400,
14      damping: 10,
15      duration: 0.8
16    }
17  },
18  exit: {
19    scale: 0.3,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Bounce In Up

Bounce in from bottom with high spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const bounceInUpVariants: Variants = {
4  hidden: {
5    y: 100,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 400,
14      damping: 10,
15      duration: 0.8
16    }
17  },
18  exit: {
19    y: 100,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Confetti

Celebration confetti effect

🎉

Preset Code

1import { Variants } from 'framer-motion';
2
3export const confettiVariants: Variants = {
4  hidden: {
5    opacity: 0,
6  },
7  visible: {
8    opacity: 1,
9    transition: {
10      staggerChildren: 0.05,
11      delayChildren: 0.1
12    }
13  }
14};
15
16export const confettiItemVariants: Variants = {
17  hidden: {
18    y: 0,
19    x: 0,
20    opacity: 0,
21  },
22  visible: (i: number) => ({
23    y: [0, -100, 200],
24    x: [0, (i % 2 === 0 ? 50 : -50) * (i % 3 + 1)],
25    rotate: [0, 180, 360],
26    opacity: [0, 1, 0],
27    transition: {
28      duration: 2,
29      ease: "easeOut",
30      delay: i * 0.05
31    }
32  })
33}; 
34

Fade In

Simple fade in animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const fadeInVariants: Variants = {
4  hidden: {
5    opacity: 0,
6    scale: 0.8,
7  },
8  visible: {
9    opacity: 1,
10    scale: 1,
11    transition: {
12      duration: 0.5,
13      ease: "easeOut"
14    }
15  }
16}; 
17

Fade In Down

Fade in while moving down

Preset Code

1import { Variants } from 'framer-motion';
2
3export const fadeInDownVariants: Variants = {
4  hidden: {
5    y: -50,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "tween",
13      ease: "easeOut",
14      duration: 0.6
15    }
16  },
17  exit: {
18    y: -50,
19    opacity: 0,
20    transition: {
21      duration: 0.3
22    }
23  }
24}; 
25

Fade In Up

Fade in while moving up

Preset Code

1import { Variants } from 'framer-motion';
2
3export const fadeInUpVariants: Variants = {
4  hidden: {
5    y: 50,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "tween",
13      ease: "easeOut",
14      duration: 0.6
15    }
16  },
17  exit: {
18    y: 50,
19    opacity: 0,
20    transition: {
21      duration: 0.3
22    }
23  }
24}; 
25

Flip

Flip animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const flipVariants: Variants = {
4  hidden: {
5    rotateX: 90,
6    opacity: 0,
7  },
8  visible: {
9    rotateX: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 300,
14      damping: 25
15    }
16  },
17  exit: {
18    rotateX: -90,
19    opacity: 0,
20    transition: {
21      duration: 0.3
22    }
23  }
24}; 
25

Float

Floating animation effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const floatVariants: Variants = {
4  hidden: {
5    y: 0,
6  },
7  visible: {
8    y: [0, -10, 0],
9    transition: {
10      duration: 2,
11      repeat: Infinity,
12      ease: "easeInOut"
13    }
14  }
15}; 
16

Morph

Shape morphing animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const morphVariants: Variants = {
4  hidden: {
5    scale: 0.8,
6    opacity: 0,
7  },
8  visible: {
9    scale: 1,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 300,
14      damping: 20
15    }
16  }
17};
18
19export const morphShapeVariants: Variants = {
20  circle: {
21    borderRadius: "50%",
22    transition: {
23      duration: 0.5,
24      ease: "easeInOut"
25    }
26  },
27  square: {
28    borderRadius: "0%",
29    transition: {
30      duration: 0.5,
31      ease: "easeInOut"
32    }
33  },
34  triangle: {
35    clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
36    borderRadius: "0%",
37    transition: {
38      duration: 0.5,
39      ease: "easeInOut"
40    }
41  },
42  star: {
43    clipPath: "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
44    borderRadius: "0%",
45    transition: {
46      duration: 0.5,
47      ease: "easeInOut"
48    }
49  }
50}; 
51

Ripple

Ripple effect on click

Preset Code

1import { Variants } from 'framer-motion';
2
3export const rippleVariants: Variants = {
4  hidden: {
5    scale: 0,
6    opacity: 0,
7  },
8  visible: {
9    scale: [0, 1, 2],
10    opacity: [0.5, 0.3, 0],
11    transition: {
12      duration: 1.5,
13      ease: "easeOut",
14      repeat: Infinity,
15      repeatType: "loop"
16    }
17  }
18}; 
19

Rotate

Rotate animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const rotateVariants: Variants = {
4  hidden: {
5    rotate: -180,
6    opacity: 0,
7  },
8  visible: {
9    rotate: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 200,
14      damping: 15
15    }
16  },
17  exit: {
18    rotate: 180,
19    opacity: 0,
20    transition: {
21      duration: 0.3
22    }
23  }
24}; 
25

Scale

Scale animation

Preset Code

1import { Variants } from 'framer-motion';
2
3export const scaleVariants: Variants = {
4  hidden: {
5    scale: 0,
6    opacity: 0,
7  },
8  visible: {
9    scale: 1,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 260,
14      damping: 20
15    }
16  },
17  exit: {
18    scale: 0,
19    opacity: 0,
20    transition: {
21      duration: 0.2
22    }
23  }
24}; 
25

Scale In

Scale in from center with spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const scaleInVariants: Variants = {
4  hidden: {
5    scale: 0,
6    opacity: 0,
7  },
8  visible: {
9    scale: 1,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 100,
14      damping: 15,
15      duration: 0.5
16    }
17  },
18  exit: {
19    scale: 0,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Scale Out

Scale down from larger size with spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const scaleOutVariants: Variants = {
4  hidden: {
5    scale: 1.5,
6    opacity: 0,
7  },
8  visible: {
9    scale: 1,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 100,
14      damping: 15,
15      duration: 0.5
16    }
17  },
18  exit: {
19    scale: 1.5,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Slide In

Slide in from the left

Preset Code

1import { Variants } from 'framer-motion';
2
3export const slideInVariants: Variants = {
4  hidden: {
5    x: -100,
6    opacity: 0,
7  },
8  visible: {
9    x: 0,
10    opacity: 1,
11    transition: {
12      duration: 0.6,
13      ease: "easeOut"
14    }
15  }
16};
17

Slide In From Bottom

Slide in from the bottom with spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const slideInFromBottomVariants: Variants = {
4  hidden: {
5    y: 100,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 100,
14      damping: 20,
15      duration: 0.5
16    }
17  },
18  exit: {
19    y: 100,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Slide In From Top

Slide in from the top with spring effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const slideInFromTopVariants: Variants = {
4  hidden: {
5    y: -100,
6    opacity: 0,
7  },
8  visible: {
9    y: 0,
10    opacity: 1,
11    transition: {
12      type: "spring",
13      stiffness: 100,
14      damping: 20,
15      duration: 0.5
16    }
17  },
18  exit: {
19    y: -100,
20    opacity: 0,
21    transition: {
22      duration: 0.3
23    }
24  }
25}; 
26

Stack Notification

Stacked notification cards with staggered entrance

Notifications

New Message

You have a new message from John

2 min ago

Task Completed

Your task "Update documentation" has been completed

1 hour ago

Meeting Reminder

Team meeting in 30 minutes

30 min ago

Error Detected

There was an error processing your request

2 hours ago

System Update

System maintenance scheduled for tonight

5 hours ago

Preset Code

1import { Variants } from "framer-motion";
2
3/**
4 * Stack Notification Animation
5 * 
6 * This animation creates a stacked effect for notification cards,
7 * where each card appears with a slight delay and offset from the previous one.
8 * 
9 * @param staggerDelay - Delay between each item's animation (default: 0.1)
10 * @param yOffset - Vertical offset for each item (default: 10)
11 * @param scale - Scale factor for the animation (default: 0.95)
12 */
13export const stackNotification = (staggerDelay = 0.1, yOffset = 10, scale = 0.95): Variants => {
14  return {
15    hidden: {
16      opacity: 0,
17      y: yOffset,
18      scale: scale,
19      transition: {
20        duration: 0.3,
21        ease: "easeOut"
22      }
23    },
24    visible: (i: number) => ({
25      opacity: 1,
26      y: 0,
27      scale: 1,
28      transition: {
29        delay: i * staggerDelay,
30        duration: 0.4,
31        ease: "easeOut"
32      }
33    }),
34    exit: {
35      opacity: 0,
36      y: -yOffset,
37      scale: scale,
38      transition: {
39        duration: 0.2,
40        ease: "easeIn"
41      }
42    }
43  };
44}; 
45

Stagger

Staggered animation sequence

Preset Code

1import { Variants } from 'framer-motion';
2
3export const staggerVariants: Variants = {
4  hidden: {
5    opacity: 0,
6  },
7  visible: {
8    opacity: 1,
9    transition: {
10      staggerChildren: 0.1,
11      delayChildren: 0.2
12    }
13  }
14};
15
16export const staggerItemVariants: Variants = {
17  hidden: {
18    y: 20,
19    opacity: 0,
20  },
21  visible: {
22    y: 0,
23    opacity: 1,
24    transition: {
25      type: "spring",
26      stiffness: 300,
27      damping: 24
28    }
29  }
30}; 
31

Wave

Wave animation effect

Preset Code

1import { Variants } from 'framer-motion';
2
3export const waveVariants: Variants = {
4  hidden: {
5    opacity: 0,
6  },
7  visible: {
8    opacity: 1,
9    transition: {
10      staggerChildren: 0.1,
11      delayChildren: 0.2
12    }
13  }
14};
15
16export const waveItemVariants: Variants = {
17  hidden: {
18    y: 0,
19  },
20  visible: (i: number) => ({
21    y: [0, -15, 0],
22    transition: {
23      duration: 1.5,
24      repeat: Infinity,
25      delay: i * 0.1,
26      ease: "easeInOut"
27    }
28  })
29}; 
30

Scroll Animations

You can use these animations with the whileInView prop to trigger animations when elements come into view.

1<motion.div
2  variants={fadeInUp}
3  initial="hidden"
4  whileInView="visible"
5  viewport={{ once: true, amount: 0.3 }}
6>
7  <h1>This will animate when scrolled into view</h1>
8</motion.div>

Viewport Options

once: true - Animation triggers only once
amount: 0.3 - How much of the element needs to be in view (0-1)
margin: "100px" - Margin around the element to consider it in view

Advanced Usage

Combining Animations

You can combine multiple animations by merging their properties:

1import { fadeIn, slideInUp } from "@/animations/animations";
2
3// Combine animations
4const combinedAnimation = {
5  hidden: { ...fadeIn.hidden, ...slideInUp.hidden },
6  visible: {
7    ...fadeIn.visible,
8    ...slideInUp.visible,
9    transition: { duration: 0.7, ease: "easeOut" }
10  }
11};

Custom Variants

You can extend these animations with your own custom variants:

1import { fadeIn } from "@/animations/animations";
2
3// Custom variant extending fadeIn
4const customFadeIn = {
5  ...fadeIn,
6  visible: {
7    ...fadeIn.visible,
8    transition: {
9      duration: 1.5,
10      ease: "easeInOut"
11    }
12  }
13};