The Animated Web

CodePen

CodePen is a large community of frontend developers and creatives sharing their experiments and examples.

preview
Text Warping Text Warping
preview
Selected Demos Selected Demos
preview
Fold Fold
Delivering Happiness Delivering Happiness
21 21
Pure CSS Monument Valley II Pure CSS Monument Valley II
Goo Toggle Goo Toggle
Dona Loader Dona Loader
Smash them walls! Smash them walls!
Dodecahedrons Dodecahedrons
Coin Flip Donate Button Coin Flip Donate Button
The Caretaker - A pure CSS Horror / Puzzle game The Caretaker - A pure CSS Horror / Puzzle game
Arrow Truchet Arrow Truchet
SVG SVG
Rainbow Hypercube Rainbow Hypercube
cut-paper-0.0.1 cut-paper-0.0.1
Smashing Toggle Smashing Toggle
Don't let the door hit you on the way out Don't let the door hit you on the way out
A Hoppy Ending A Hoppy Ending
Big Sur Voice Memos Big Sur Voice Memos
Orion's Galaxy Orion's Galaxy
Digital Stream Digital Stream
On / Off Switch On / Off Switch
Confetti Button Confetti Button
Turning pages with CSS Turning pages with CSS
Spinning Hello World Spinning Hello World
Only CSS: Summer Dream Only CSS: Summer Dream
A Shuffle Story A Shuffle Story
Impossible Checkbox v2 Impossible Checkbox v2
Circle of Lights Circle of Lights
SVG Image Sequence Masks SVG Image Sequence Masks
Spiral Spiral
Circuit Circuit
Kuma + CNCF Animation Kuma + CNCF Animation
Polygon Vortex #4 Polygon Vortex #4
hamster-spin🐹 hamster-spin🐹
Autumn Leaves Autumn Leaves
Airplanes Airplanes
Little book of GSAP Little book of GSAP
Animals sequence Animals sequence
Parallax swipe (React) Parallax swipe (React)
swirl swirl
Canyonlands Canyonlands
Smash that Smash that "Like" button!
Minecraft world animated in pure CSS Minecraft world animated in pure CSS
Light/Dark Mode Toggle With Curtain Effect Light/Dark Mode Toggle With Curtain Effect
Lemonheads - Swissted Lemonheads - Swissted
This is Spotify - Metallica Enter Sandman This is Spotify - Metallica Enter Sandman
Star Wars The Rise of Skywalker Star Wars The Rise of Skywalker
Celtic spiral Celtic spiral
Phone Reflection Phone Reflection
Subscribercoaster Subscribercoaster
Play with Header on Page Transitions Play with Header on Page Transitions
Vampire Bat Vampire Bat
Running Pumpkin Running Pumpkin
Night & Day Night & Day
Airplane Mode Toggle Switch Airplane Mode Toggle Switch
Typo-coaster Typo-coaster
Twist Away Twist Away
Peter Kuhn Peter Kuhn
Pure CSS Pure CSS "Moustached Nanny"
Touch device jelly menu concept Touch device jelly menu concept
WebGL Fluid Simulation WebGL Fluid Simulation
Alex the CSS Husky Alex the CSS Husky
Chill the Lion Chill the Lion
BB8 from Starwars BB8 from Starwars
The Cool Club Deck The Cool Club Deck
Interactive Hippo Button Interactive Hippo Button
Back2School SVG Animation w/ anime.js Back2School SVG Animation w/ anime.js
Stream Stream
Squiggle text animation Squiggle text animation
GSAP 3 Cube Walk GSAP 3 Cube Walk
Pure CSS Range Rover Truck Pure CSS Range Rover Truck
Single div CSS book search Single div CSS book search
Click the Button! Click the Button!
Chocolate Chomp Chocolate Chomp
wAve wAve
Paper Pirouette Paper Pirouette
Kuma Logo Animation Kuma Logo Animation
Energy Energy
Splitting: Laser Write Splitting: Laser Write
Animated Verbs Animated Verbs
Animated Portrait Animated Portrait
Fiery Hot Flames of Fiery Flaming Fire Fiery Hot Flames of Fiery Flaming Fire
∞ Loader animation ∞ Loader animation
Particle UI Particle UI
Hard Work Hard Work
3D Drag out menu with guitar 3D Drag out menu with guitar
Pure CSS Bug ECommerce Interactions Pure CSS Bug ECommerce Interactions
Procedural Low Poly Planet Procedural Low Poly Planet
Menja Menja
Zdog Windmill Zdog Windmill
Optimized Line Mess! Optimized Line Mess!
Futuristic Worms Futuristic Worms
Colour Diver Colour Diver
Better Basics of Angular Cellular Repetition. Better Basics of Angular Cellular Repetition.
Heart is Home Heart is Home
Useless Machine Useless Machine
Only CSS: 3D Scan Only CSS: 3D Scan
Solar CSSystem Solar CSSystem
Floating Heart Floating Heart
@Keyframers 2.0.0 Intro Animation @Keyframers 2.0.0 Intro Animation
Jellyfish Jellyfish
CurveBall CurveBall
Pendulum Pendulum
SVG Filters are 💕 SVG Filters are 💕
Love Box Love Box
Primary Colors Waves Primary Colors Waves
Only CSS: Bicycle Only CSS: Bicycle
Stay True Stay True
Pure CSS △ grid pop Pure CSS △ grid pop
Infinite SVG Triangle Fusion Infinite SVG Triangle Fusion
Rainbow and shark teeth inputs Rainbow and shark teeth inputs
Liquified Image Liquified Image
Crossy Road Crossy Road
Basic Wind Strip Basic Wind Strip
Top 10 Albums 2018 Top 10 Albums 2018
Escalade Loader Escalade Loader
Caveman Mode Caveman Mode
Droppy Woppy Input Droppy Woppy Input
CSS-Only Walking Dog CSS-Only Walking Dog
æther æther
Panda Panda
The Mine: No JS, CSS only adventure game The Mine: No JS, CSS only adventure game
Polo Mints Polo Mints
Codepen Challenge: 408 error Codepen Challenge: 408 error
Snake Wave Snake Wave
Yeti Hand Pagination Yeti Hand Pagination
Transform Tumbler Transform Tumbler
Card Explode Card Explode
Mask Animation Mask Animation