Imported library
3427 items in the library.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages. Sign in
Kind
Mood
Industry
Style
Licence
Source repo (matinmonshizadeh/animation-handbook)
- Subscription
Portal / Tunnel Zoom - clip-path expands from a portal element's center, zooming the viewport into the next page
Transition
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Dissolve - Random tiles fade at staggered delays
Transition
A non-uniform wipe that reads as dissolving rather than fading.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
FLIP Technique - First-Last-Invert-Play
Transition
CSS layout changes animated seamlessly by measuring position deltas.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Hover State Animation - Six hover techniques side by side
Button
Color shift, scale, lift, underline grow, icon nudge, and background sweep.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Click / Tap Ripple - Ripple emanates from the exact click point
Button
Material Design's tactile confirmation pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Focus Ring Animation - Animated outline on keyboard Tab
Form
:focus-visible ensures mouse users see no ring.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Button Press Scale - Scales to 0.95 on press, springs back on release
Button
Asymmetric timing gives a tactile feel.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Magnetic Button - Button leans toward the cursor within a radius, label lagging for parallax
Button
Springs home on exit.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Toggle / Switch Slide - Pill slides left/right for on/off
Form
Smooth cubic-bezier gives a weighted, physical feel.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Heart / Like Burst - Tap pops and fills the heart while small hearts burst outward on canvas
Button
Twitter-style like.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Success Confetti - Completing an action fires a canvas confetti burst
Button
Rotating rectangles with gravity and spin.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Skeleton Loader - Pulsing placeholder blocks match the shape of real content
Loader
Reduces perceived wait time.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Shimmer Effect - Gradient sweep over skeleton placeholders
Loader
Gives the impression of data streaming in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Loading Spinner - Six spinner variants from a single CSS color and speed
Loader
Ring, orbit, arc, bounce, pulse, square.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Progress Animation - Linear bar, circular ring, and stepped segments
Loader
All driven by a single percentage value.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Checkmark Draw - SVG path draws progressively on success
Component
Stroke-dashoffset animates from full length to zero.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Form Field Morph - Floating label rises out of the input on focus
Form
Persists when the field is filled.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Notification Badge Pulse - Dot on icon pulses to draw peripheral attention
Component
Scale, halo, or both.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Tooltip Reveal - Info box fades in after a 300ms delay
Component
Long enough to avoid triggering on mouse pass-through.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Drawer / Panel Slide - Off-canvas panel slides from edge
Component
Ease-out open, ease-in close. Backdrop dismisses.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Modal Expand - Modal scales from the trigger button's position
Component
Transform-origin set to where you clicked.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Accordion Open/Close - Height animates between 0 and auto
Component
JS measured height vs CSS grid-template-rows compared.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Cursor Follower - Custom element follows mouse with lerp lag
Cursor
Mix-blend-mode: difference inverts any background.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Error Shake - An invalid field shakes horizontally with a decaying wobble and flashes red
Form
The universal "no".
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Swipe to Dismiss - Drag a card past a threshold and it flies off as the row collapses
Card
Pointer-driven, touch-ready.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Hamburger Menu Toggle - The bars icon morphs to an X
Navbar
Top and bottom bars rotate to cross while the middle fades out.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Theme Toggle Morph - A sun morphs into a crescent moon as the interface flips between light and dark
Button
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Copy to Clipboard - The copy button swaps to a checkmark and a Copied confirmation, then reverts after a moment
Button
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Star Rating - Stars fill toward the pointer and pop on commit
Form
An accessible five-star control.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Toast Notification - Notification cards slide in from a corner, stack, and auto-dismiss with a progress bar
Component
Swipe or click to dismiss.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Segmented Control - A highlighted pill slides beneath the selected segment as the active label crossfades
Button
The iOS control.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Pull to Refresh - Dragging past the top reveals a spinner that fills with distance; release past the threshold to refresh
Component
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Kinetic Typography - Phrases enter, transform, and exit in a choreographed timeline
Text Effect
Motion reinforces meaning.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Typewriter Effect - Characters appear one at a time with a blinking cursor
Text Effect
Natural timing variance makes it feel human.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scramble / Glitch Text - Characters cycle randomly before locking left-to-right
Text Effect
Decryption and sci-fi aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Variable Font Morph - CSS font-variation-settings animates weight, slant, and casual axes of a variable font
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Clip-Path Reveal - Lines reveal via expanding clip-path mask
Text Effect
Preserves kerning and typographic spacing exactly.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Marquee / Ticker - Continuous horizontal scroll with seamless loop
Text Effect
Duplicated content makes the reset invisible.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Morphing - One word transitions into another character by character
Text Effect
Each letter slides out as the next slides in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Gradient Animation - background-clip: text with animated background-position flows color through the characters
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Outline to Fill - Hollow stroke letterforms fill with color
Text Effect
Clip-path reveal or opacity crossfade.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Enter/Exit Typography - Three-act phrase lifecycle: enter → hold → exit, sequenced for storytelling
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Rotate Word Carousel - One keyword cycles through a list while the surrounding sentence stays static
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Glitch Text - RGB-split copies jitter behind animated clip-path slices
Text Effect
The datamosh / signal-loss aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text on a Path - Text flows along an SVG curve via textPath with an animated startOffset
Text Effect
Wave, arc, or circle.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Wavy Text - Per-letter sine-wave bob with a staggered delay sends a wave travelling across the word
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
3D Model Orbit - Phong-shaded WebGL geometry
3D Scene
Vertex buffers, MVP matrix, and lighting in raw WebGL.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scroll-Driven 3D Rotation - CSS cube rotates through four choreographed stages as you scroll
Scroll Effect
The Apple product-page pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in