8-Bit Moon Animation
A 8-bit moon animation built with modern frontend techniques for responsive and reusable UI.
Animations
42 snippetsWelcome to the Animations resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-animations
Snippets(42)
Air Balloon CruiseA air balloon cruise built with modern frontend techniques for responsive and reusable UI.
Animated Coffee Cup StickerA animated coffee cup sticker built with modern frontend techniques for responsive and reusable UI.
Technologies
Haml, PostCSS, BabelDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
SVG Morphing, Character Animation, Timeline Sequencing, Fluid Physics
Animated SVG Color Wave EffectA animated svg color wave effect built with modern frontend techniques for responsive and reusable UI.
Bongo Cat Codes #2: JammingA bongo cat codes #2: jamming built with modern frontend techniques for responsive and reusable UI.
Card Beam Animation EffectA card beam animation effect built with modern frontend techniques for responsive and reusable UI.
- Crafting UI: 3D Split-Flap Effect with GSAP
A crafting ui: 3d split-flap effect with gsap built with modern frontend techniques for responsive and reusable UI.
Disney+ Logo AnimationA disney+ logo animation built with modern frontend techniques for responsive and reusable UI.
GSAP 3 Animation Deck with 3D TransformsA gsap 3 animation deck with 3d transforms built with modern frontend techniques for responsive and reusable UI.
GSAP Flip Plugin DemoA gsap flip plugin demo built with modern frontend techniques for responsive and reusable UI.
- GSAP Infinite Loops Without DOM Shuffle
A gsap infinite loops without dom shuffle built with modern frontend techniques for responsive and reusable UI.
GSAP SVG Circle Unwrapping AnimationA gsap svg circle unwrapping animation built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Safari 13+, Firefox 75+Features
SVG Manipulation, Visual Illusion, Dynamic DOM Generation- GitHub-like Developer Activity Cardiogram
A github-like developer activity cardiogram built with modern frontend techniques for responsive and reusable UI.
- Interactive Blackhole
A interactive blackhole built with modern frontend techniques for responsive and reusable UI.
Interactive Emotional Feedback SliderA interactive emotional feedback slider built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
Emotional Feedback, GSAP Timelines, SVG Characters, State Management
Interactive GSAP Collage AnimationA interactive gsap collage animation built with modern frontend techniques for responsive and reusable UI.
JFK Speech Text Wave AnimationA jfk speech text wave animation built with modern frontend techniques for responsive and reusable UI.
Photo Inview Animation: Venetian Blinds EffectA photo inview animation: venetian blinds effect built with modern frontend techniques for responsive and reusable UI.
Rainbow Loop Animation (Click to Pause)A rainbow loop animation (click to pause) built with modern frontend techniques for responsive and reusable UI.
Zdog Rainbow 🌈 (3D Graphics)A zdog rainbow 🌈 (3d graphics) built with modern frontend techniques for responsive and reusable UI.
Fluid Morphing List ExpansionA fluid morphing list expansion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
Layout Morphing, FLIP Animation, State Management, Flexbox Transition
Spiral Animation in Three.jsA spiral animation in three.js built with modern frontend techniques for responsive and reusable UI.
Cinematic Masked Video HeroA cinematic masked video hero built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Firefox 89+, Safari 15+Features
SVG Masking, Layered Text, Custom Cursor, Intro Loader
Interactive Physics-Based Dot GridA interactive physics-based dot grid built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Pointer Tracking, Elastic Easing, Staggered Animation
Animated SVG Penrose Triangle LoaderA animated svg penrose triangle loader built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Infinite Rotation, Complex Gradients, SVG Filter Glow, Optical Illusion
Interactive Download Folder AnimationA interactive download folder animation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, BabelDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11.1+Features
Elastic Bounce, GSAP Choreography, Dynamic DOM Injection, SVG Stacking
Day and Night Toggle with SVG AnimationA day and night toggle with svg animation built with modern frontend techniques for responsive and reusable UI.
Staggered Particle Blob EffectA staggered particle blob effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 79+, Edge 79+, Firefox 71+, Safari 13+Features
Cursor Tracking, Staggered Animation, Auto-simulation, Blend Modes
Animated Star Toggle SwitchA animated star toggle switch built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 55+, Edge 79+, Firefox 54+, Safari 11+Features
GSAP Animation, Clip-path Morphing, Character UI
GSAP Homepage Demo 4A gsap homepage demo 4 built with modern frontend techniques for responsive and reusable UI.
Technologies
GSAPDifficulty
AdvancedFeatures
Interactive Gallery, Timeline Animations, 3D Transforms
Animated Camera Along a Path with Three.jsA animated camera along a path with three.js built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, JavaScriptFeatures
Post-processing, Camera Path Animation, Import maps
Mouse-Reactive Floating Image GalleryA mouse-reactive floating image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 48+, Safari 9+Features
Mouse Tracking, Smooth Panning, Hover Reveal, Dynamic LayoutResponsive
Yes
Interactive Spectral 3D Ghost EffectA interactive spectral 3d ghost effect built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Cursor Tracking, VHS Glitch, Custom Shaders, Bloom PassResponsive
Yes
Cinematic Zoom Blur Image GalleryA cinematic zoom blur image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Shader Transitions, Mouse Tracking, Smooth Lerp, GPU RenderingResponsive
Yes
Dynamic Twinkling Particle System with Vanilla JS and CanvasA dynamic twinkling particle system with vanilla js and canvas built with modern frontend techniques for responsive and reusable UI.
Technologies
Canvas API, JavaScriptDifficulty
IntermediateFeatures
Interactive particles, Mouse tracking, Click effectsResponsive
Yes
Infinite 3D Poster Scroll WallA infinite 3d poster scroll wall built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Infinite Scroll, API Integration, WebGL Rendering, Dynamic TexturesResponsive
Yes
Interactive Canvas Particle Image EffectA interactive canvas particle image effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Particle System, Color Extraction, Hover RevealResponsive
Yes
Isometric 3D Bouncing Cube AnimationA isometric 3d bouncing cube animation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
3D Grid, Path Tracking, Canvas Rendering, Isometric ViewResponsive
Yes
Minimalist Canvas Animated Particle BackgroundA minimalist canvas animated particle background built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, BabelDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 31+, Safari 9+Features
Procedural Generation, Particle Recycling, 60FPS RenderingResponsive
Yes
PixiJS Procedural GLSL FlameA pixijs procedural glsl flame built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Fragment Shader, Procedural Noise, Fractal Brownian Motion, Real-time AnimationResponsive
Yes
Rain Particle Effect with HTML CanvasA rain particle effect with html canvas built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML5 Canvas, JavaScriptDifficulty
IntermediateFeatures
Full-screen animation, Particle system, Smooth frame rateResponsive
Yes
Shattering Image Gallery TransitionA shattering image gallery transition built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Shaders, Instanced Rendering, Scroll Navigation, Mouse ParallaxResponsive
Yes