MotionKit
Collection of the most essential animations & transitions for web apps that you can just copy and paste into any project.
Projects Completed
Animated Counter
Digit flip with blur and stagger
Character Counter
Dynamic spring physics character limit counter
syncwaitpopLayoutAnimatePresence Modes
A demonstration of the different exit modes in Framer Motion
Japan
Land of the rising sun
France
City of lights and romance
Italy
Home of art and cuisine
Spain
Vibrant culture and sunny coasts
Canada
Vast landscapes and friendly cities
Stacked Cards
A draggable, swipable stack of 3D cards
Gooey Search
A slick search input with a gooey SVG filter effect.
Text Scramble
Text swap transition with blur
- Component Library
- Animation Guide
- Design System
- Motion Kit
Staggered List
Staggered item entrance animation
Smooth Button
Spring-physics button with fluid hover
Typewriter Effect
Multi-phrase typewriter with blinking cursor
Magnetic Button
Cursor-attracted spring physics button
Letter Swap
Layout-animated word cycler with shared letter transitions
3D PARALLAX
Tilt your device or move your mouse to explore the depth.
Parallax Tilt Card
3D perspective card with cursor tracking
Scroll Reveal
Fade and slide on viewport entry
Squiggly Text
Pure CSS + SVG wiggle filter effect
Bunny Mascot
Animated SVG character with eye-tracking