24 JavaScript Animations
Bring your interfaces to life with these JavaScript animation examples. This collection showcases interactive transitions, motion effects, and engaging sequences built with plain JavaScript or popular libraries such as GSAP and anime.js.
Last updated:
Photo Inview Animation: Venetian Blinds Effect
A high-end, editorial-style web design where content appears smoothly and coordinately, creating a sense of premium quality and attention to detail.
Air Balloon Cruise
A soothing dreamscape scene with smooth, infinite animation resembling a live postcard or a splash screen for a meditation app.
Bongo Cat Codes #2: Jamming
A playful recreation of the Bongo Cat meme using SVG and GSAP. It features complex timelines coordinating rapid paw movements, a randomized note particle system colored via CSS variables, and a scrolling terminal code effect using drawSVG logic.
Disney+ Logo Animation
A cinematic, fluid intro identical to a streaming service splash screen, featuring glow effects, particles, and morphing to create a sense of magic and high-budget production.
Day and Night Toggle with SVG Animation
An atmospheric day/night toggle where a minimal JavaScript classList.toggle trigger activates a cinematic transition across complex SVG layers. The scenery leverages linear-gradient masking and mix-blend-mode for dynamic lighting, while long-duration CSS transform properties orchestrate a seamless, parallax-like shift between solar and lunar states.
GSAP Flip Plugin Demo
This demo is a showcase of GSAP’s Flip plugin, a powerful tool for animating layout changes. The Flip.getState() and Flip.from() methods are used to seamlessly transition between four different CSS layouts, creating a complex and fluid morphing animation with minimal code.
Interactive GSAP Collage Animation
This interactive digital collage is driven by a single, reversible gsap.timeline that animates dozens of absolutely positioned <img> elements into a cohesive illustration on hover. A key feature is the sophisticated text reveal, powered by GSAP’s SplitText plugin, which creates a fluid ‘waterfall’ effect. The entire composition is built to be fully responsive, using a custom SCSS --unit variable based on vmin to ensure the complex layout scales proportionally.
Animated Camera Along a Path with Three.js
A modern Three.js setup using importmap to work with modules without a bundler - plus custom post-processing passes to create speed and glow effects.
Animated SVG Color Wave Effect
Technical relevance: the use of GSAP to control strokeDashoffset on the mask with looping and different easing, - resulting in a stylized “wave” effect gliding over complex, pre-defined SVG Bézier curves.
Rain Particle Effect with HTML Canvas
This full-screen particle system uses the Canvas 2D context to draw short-lived, low-alpha rain streaks, relying on requestAnimationFrame for a performance-optimized background animation.
Dynamic Twinkling Particle System with Vanilla JS and Canvas
Dive into an interactive demo using pure JavaScript and Canvas 2D, where mouse movement creates a magnetic field for particles, and clicking triggers an explosion effect, implementing complex element creation and destruction logic.
JFK Speech Text Wave Animation
Dynamic visualization of John F. Kennedy’s speech, where each word is a separate element, creating a “running wave” effect using CSS transformations and a JavaScript setInterval.
GSAP Homepage Demo 4
An advanced interactive gallery showcasing the power of GreenSock: it utilizes custom Timelines to manage complex, multi-stage animations and x, y, scale transformations upon clicking the elements.
Zdog Rainbow 🌈 (3D Graphics)
Explore lightweight 3D graphics using the Zdog library to render a vibrant, drag-rotatable isometric rainbow and clouds, demonstrating efficient pseudo-3D rendering for web UIs.
GSAP 3 Animation Deck with 3D Transforms
A demo of multi-step animations using keyframes within GSAP, plus subtle work with CSS filters (brightness) to simulate 3D object lighting.
Card Beam Animation Effect
Implemented motion physics for an interactive carousel: uses an requestAnimationFrame loop for smooth movement and applies an inertia effect after dragging (Drag/Touch) by gradually decaying this.velocity with friction (this.friction).
Rainbow Loop Animation (Click to Pause)
This is an example of efficient animation composition using gsap.timeline, which synchronizes independent motion phases (.from() and .to()) of multiple <path> elements to create one complex loop.
