Resources / JavaScript Animation Libraries
GSAP (GreenSock) is the industry standard for high-performance animation, Three.js opens the door to WebGL and 3D, and Swiper handles touch-friendly carousels that work across every framework.
Quick Guide
Use CodeHelper's tools when you need:
- •Privacy & offline processing
- •No account or signup required
- •Fast, client-side operations
Use external tools when you need:
- •Team collaboration features
- •Cloud storage & synchronization
- •Extensive template libraries
All Tools
GSAP
GSAP animates CSS, SVG, canvas and WebGL with consistent cross browser performance; Webflow acquired GreenSock in 2024 and made the whole toolkit free.
Renamed to GSAP, now at gsap.com. Free for everyone since the Webflow acquisition, including plugins that used to require a paid license.
Velocity.js
Velocity.js tweens CSS, colors and transforms with jQuery's dollar animate syntax but no jQuery dependency; version 2 is a full TypeScript rewrite.
velocityjs.org has an expired SSL certificate, use the GitHub repo and wiki instead. MIT licensed, v2 docs live only on the wiki.
Rellax.js
Rellax.js adds parallax scrolling to any element through a data-rellax-speed attribute, written in vanilla JavaScript with no dependencies.
MIT licensed. Mobile parallax support was added in v1.0.0, current release is v1.7.1.
Three.js
Three.js renders 3D scenes in the browser using WebGL or WebGPU, with optional SVG and CSS3D renderers, and ships a large example and plugin ecosystem.
MIT licensed, over 116,000 GitHub stars, releases ship monthly.
Atropos
Atropos creates touch friendly 3D parallax hover tilt effects with no external dependencies, available as vanilla JS, a React component, or a web component.
MIT licensed, 2KB minified and gzipped. Web component build also covers Vue, Svelte, Angular and Solid.
Wow.js
WOW.js triggers Animate.css classes when elements scroll into view, with options for delay, duration, offset and repeat, and no jQuery dependency.
Dual licensed: GPLv3 for open source projects, a separate commercial license for proprietary use. About 3KB.
Chocolat.js
Chocolat.js is a lightbox gallery plugin with block, fullscreen and full window display modes, keyboard navigation, and no jQuery requirement.
GPLv3 licensed, about 10KB minified. Current version 1.1.2, install with yarn add chocolat.
Animate On Scroll
AOS fires fade, flip, slide and zoom CSS animations as elements enter the viewport, configured entirely through HTML data attributes, no JS setup needed.
MIT licensed, over 28,000 GitHub stars. Active development has moved to the aos next branch.
Tilt.js
Tilt.js adds a 60fps requestAnimationFrame powered tilt and glare effect on hover, configurable without writing extra CSS, but it depends on jQuery.
MIT licensed, about 3,900 GitHub stars. Install with yarn add tilt.js.
Roughnotation
Rough Notation draws hand drawn style underlines, circles, boxes and highlights over existing page text and elements using SVG, built on RoughJS.
MIT licensed, 3.8KB gzipped, over 9,700 GitHub stars.
tsParticles
tsParticles renders particle backgrounds, confetti and fireworks, with dedicated packages for React, Vue, Angular, Svelte and Solid plus slim and basic bundle variants.
MIT licensed. Built as the actively maintained successor to particles.js, with its own v1 to v3 migration guide.
Particles.js
Particles.js renders a configurable canvas of connected, moving particle dots for animated backgrounds, with built in demo presets like snow and bubbles.
tsParticles is the maintained successor, built as a drop in replacement for this original library.
Mo.js
Mo.js is a motion graphics toolbelt for declarative SVG and shape animations, with a chainable API for timelines, bursts, shape morphing and stagger effects.
MIT licensed. Maintained since 2019 by Xavier Foucrier and Jonas Sandstedt after the original author stepped back.
Lightbox2
Lightbox2 overlays full size images on the current page with simple previous and next navigation, requiring only a script tag and a CSS file.
MIT licensed with required attribution. The project is in maintenance mode, bug fixes only, no new features.
Slick
Slick is a jQuery carousel with responsive breakpoints, variable width slides, centered mode, lazy loading and swipe support out of the box.
MIT licensed, 28,500+ GitHub stars. Version 2.0 added jQuery 4 compatibility, jQuery is still required.
Barba.js
Barba.js intercepts internal link clicks to animate transitions between full page loads, without rebuilding the site as a single page app.
Docs site last updated December 2024, active GitHub repo and Slack community.
Locomotive Scroll
Locomotive Scroll detects elements entering the viewport and drives smooth scrolling and parallax effects, rebuilt on top of the Lenis scroll engine.
Version 5 is a complete TypeScript rewrite, 9.4KB gzipped. Old GitHub Pages docs moved to scroll.locomotive.ca.
Owl carousel
Owl Carousel 2 is a touch enabled jQuery slider with responsive breakpoints, autoplay, lazy loading and center mode for image or content carousels.
MIT licensed. The README states the project is pretty much dead and recommends switching to tiny-slider.
Swiperjs
Swiper is a touch slider with native feeling swipe gestures, modular effects, and wrapper packages for React, Vue, Angular, Svelte and Solid.
Actively released, v14.3.0 shipped September 2026. Framework agnostic core plus official integrations.
Splide
Splide is a dependency free slider and carousel written in TypeScript, built with accessibility markup and keyboard navigation included by default.
MIT licensed, 29KB (12KB gzipped). Current major version is v4.
Simple Parallax
simpleParallax applies a parallax effect directly to image tags rather than background images, and works with Next.js Image components too.
Version 6.0.0 rewrote the library as a React component while keeping the vanilla JS build available.
KUTE.js
KUTE.js is a modular ES6+ animation engine that tweens transforms, SVG paths, filters and colors beyond what CSS3 transitions can handle.
MIT licensed, 2,600+ GitHub stars. Built on the companion svg-path-commander library.
Granim.js
Granim.js animates gradients on a canvas element, blending between color states with configurable opacity and direction for backgrounds.
MIT licensed, 5,300+ GitHub stars.
Popmotion
Popmotion is a low level animation toolbox with keyframe and spring functions for numbers, colors and complex value strings, around 4.5KB for animate alone.
TypeScript with over 95 percent test coverage, per its own README.
Vivus
Vivus animates SVG elements to look hand drawn, tracing strokes with several built in animation types and no external dependencies.
MIT licensed, 15,500+ GitHub stars.
Typed.js
Typed.js types out strings at a configurable speed, backspaces them, and cycles to the next string, for hero text and terminal style effects.
GPL-3.0 for personal or open source use; commercial projects need a paid single or unlimited project license.
Progress Bar.js
ProgressBar.js animates SVG progress indicators along built in or custom paths, with full control over stroke, duration and easing.
MIT licensed, 7,800+ GitHub stars.
Midnight.js
Midnight.js is a jQuery plugin that swaps fixed header styles as the page scrolls, matching the header to whatever section sits beneath it.
Distributed via npm, Bower and jsDelivr; a license file is included in the repo.
Tingle.js
Tingle is a 2KB modal plugin written in pure JavaScript, with no dependencies and full control over the modal markup and CSS.
MIT licensed, 1,600+ GitHub stars. The tingle.robinparisi.com site is down, use the GitHub repo instead.
Theatre.js
Theatre.js pairs a code based animation API with a visual sequence editor, dope sheet and graph editor for keyframing DOM, WebGL or Three.js scenes.
Maintained by Theatre.js Oy in Helsinki, 7,700+ GitHub stars and an active Discord.
Nice-waves
nice-waves generates seamless looping SVG wave paths and animates their flow and sway in pure JavaScript, with play and stop controls.
Small project, 117 GitHub stars, available via npm and CDN.
Vanta.js
Vanta.js adds interactive animated backgrounds like waves, clouds, birds and fog that respond to mouse and touch, built on Three.js or p5.js.
Created by Strikingly, rendering runs at up to 60fps on modern GPUs.
Best JavaScript Animation Libraries for Web Developers
JavaScript animation libraries enable sophisticated motion graphics, scroll effects, 3D scenes, and interactive experiences that pure CSS cannot achieve. From GSAP's industry-standard timeline-based animations to Three.js WebGL 3D rendering, the JavaScript animation ecosystem is rich and powerful.
For scroll and hover micro interactions, AOS and Atropos cover the common cases in a few kilobytes, while GSAP (formerly GreenSock, now free since Webflow bought the company) and Three.js handle everything from timeline sequencing to full WebGL scenes. Theatre.js adds a visual keyframe editor on top of code for tuning animation without touching JavaScript.
Carousels split along a jQuery line: Slick and Owl Carousel still work but depend on jQuery, and Owl Carousel's own README calls the project pretty much dead. Swiper and Splide are dependency free and actively released, a safer default for new projects. Watch licensing too: Typed.js is GPL-3.0 or paid, not MIT like most of this list, and particle backgrounds belong with tsParticles, the maintained successor to particles.js.
What to check before you pick one
- Performance: The best libraries use requestAnimationFrame, CSS transforms, and avoid layout thrashing for smooth 60fps animations.
- Timeline control: Sequence-based animation systems (like GSAP timelines) make complex multi-step animations manageable.
- Scroll integration: Many modern animation libraries include scroll-trigger capabilities for scroll-linked and scroll-triggered animations.
Frequently Asked Questions
What is GSAP and why is it popular?
GSAP (GreenSock Animation Platform) is the industry-standard JavaScript animation library, used on millions of websites. It is extremely performant, works in all browsers, handles complex animation sequences, and includes powerful plugins for scroll-triggered animations, morphing SVGs, and more.
What is the difference between GSAP and Three.js?
GSAP is a general-purpose animation engine that animates DOM elements, SVG, canvas, and more with timeline-based sequencing. Three.js is a 3D graphics library built on WebGL for creating 3D scenes, models, and visualizations in the browser. They serve different purposes and are often used together.
What are the best libraries for scroll-triggered animations?
For scroll animations, GSAP ScrollTrigger is the most powerful and flexible option. Framer Motion (React) is excellent for component-level scroll animations. Locomotive Scroll provides smooth scrolling with scroll-linked effects. Lenis is a newer, lightweight smooth scroll library.