JavaScript Animations

Lottie for Web, Android, iOS, React Native, and Windows Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first ti


particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on


react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. This library represents


Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust an

Julian Shapiro
Accelerated JavaScript animation.


Velocity beta NPM: npm install [email protected] Docs IMPORTANT: The documentation refers to V1, not V2 beta - use the wiki


Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead. Check out the demo to see it in action! Table of Con


vivus.js Demo available on Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being draw


Live Demo | View All Demos | View Full Docs | Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however


barba.js is a small (4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages. It helps reducing the delay between your pages, minimizing br

tween.js and related projects
Javascript tweening engine


tween.js JavaScript tweening engine for easy animations, incorporating optimised Robert Penner's equations. Do you use tween.js? If you have some time, please fill out this short survey. Update Note In v18 the script you


Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.


hint.css is written as a pure CSS resource using which you can create cool accessible tooltips for your web ap


CountUp.js CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way. Despite its name, CountUp can count in either directio


Get the turn.js 4th release on What's new in turn.js 4th release? Added option autoCenter Added option zoom Added property animating Added property zoom Added method center Added method destr


RELLAX Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0). Demo Website Getting Started npm install rellax --save or if you're old


Snap.js A Library for creating beautiful mobile shelfs in Javascript View Video Preview View Demos Features Support Installation Usage Settings & Defaults Public Methods Gotchas FAQ's Compliments Lic


Create and animate hand-drawn annotations on a web page


ramjet Installation npm install ramjet, or download ramjet.js. Quick start <div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div> <div id='b' style='background-c


Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.


Granim.js Create fluid and interactive gradient animations with this small javascript library. See the demo site. Install From NPM Run npm install granim --save From Bower Run bower


Stellar.js PLEASE NOTE: This project is no longer maintained. If parallax scrolling is something you care about, please apply to become a contributor

Miguel Pérez
Unobtrusive page transitions with jQuery.


smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browser doesn't have the required features, smoothState.js fades into the background


Contribute <♫/> Rythm.js - v2.2.5 Demo at: A JavaScript library that makes your page dance. Getting started Install with npm: npm install rythm.js Or get fr


Midnight A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Check out the demo (watch the logo as you scroll). Quick st


What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation

Erik Terwan
Let your page react to scroll changes.


ScrollTrigger Let your page react to scroll changes. The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add cust


Tilt.js A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery. Weights just ⚖ 1.71kb Gzipped Take a look at the landing page for demos. Tilt.js in the wild htt


TweenJS TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent


Glorious Demo The easiest way to demonstrate your code in action. Installation npm install @glorious/demo --save Basic Usage <link rel="stylesheet" href="node_modules/@glorious/demo/dist/


TheaterJS Typing animation mimicking human behavior. CodePen Demo Showcase Installation Documentation Localized Keyboards Change Log Path from v1.x to v2 Contribute If you're not particularly interested in ma


weui.js 概述 WeUI 的轻量级 js 封装。 注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本,详情请看: 手机预览


react-animations A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from


A JavaScript API for drawing unconventional text effects on the web. Home — Help Overview When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of ca


tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js converted in TypeScript, dependency free (*), improved with new cool ?


MoveTo A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency. Demo Installation Using npm $ npm install moveto --save Using Yarn $ yarn add moveto

Deck of Cards
Deck of Cards (old version)


HTML5 Deck of Cards NEW VERSION COMING UP! The new multiplayer Deck of Cards is released at, but will have it's cards library open sourced soon here! Old version Pure vanilla JS (+


SVG Morpheus WARNING THIS PROJECT IS NOT MAINTAINED ANYMORE. You are free to fork it and start a new project. Overview JavaScript library enabling SVG icons to morph from one to the other. It implements Mat


Swing A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others. Give it a swing! and please tweet it if you like it. : ) Contents Usage


#Scrollorama The original jQuery plugin for doing cool scrolly stuff. To use the latest, greatest scroll animation library, I recommend checking out Scrollorama successor ScrollMagic Follow me on Twitter License Dual licensed


#SuperScrollorama The jQuery plugin for doing supercool scroll animation. Check out the Project Page for more information. IMPORTANT INFORMATION: Superscrollorama has been replaced by ScrollMagic Check out ScrollMag


KUTE.js A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The foc


KUTE.js A minimal native Javascript animation engine with jQuery plugin and with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animat


iTyped Dead simple Animated typing, with no dependencies. Demo ➞ Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've se


Hanzi Writer Hanzi Writer is a free and open-source javascript library for Chinese character stroke order animations and stroke order practice quizzes. Works with both simplified and t


iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation animations in your projects. Demo Installation NPM:

Jiří Otáhal
Animate it! Easily!


React Native Motion Change your application from the left one to the right one! Animate it! Easily! Animated Transition Article or Animated Graph Article Getting Started $ yarn add react-native-motion


Choreographer-js A simple library to take care of complex CSS animations. (You can also add custom functions that do non-CSS animations!) See the fancy demo here --> Other examples: Basic Example (animating based on scroll


Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Looking for developers for your project? This project is maint


? Smooth animation library for interpolating numbers


The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.


bubbly-bg Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped). Usage Add bubbly to your webpage and call bubbly(): <body> ... <script src="[email protected]/dis


react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what you want animated inside. Documentation | Demos | An


Shifty - A teeny tiny tweening engine in JavaScript Shifty is a tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools. At its core, Shifty provides: Interpolation of Number


Animockup Create animated mockups in your browser and export as video or animated GIF ? Try it out at Built using: FabricJs CanvasRecorder.js FFMPEG Jquery Nice Select Range Slider Font Pic


simpleParallax.js simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. Where it may be laboriou


Doom Fire Algorithm Playground A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request. Experiments These people are making


Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particles library depends on anime.js to perform anima


Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.


vue-kinesis Easy to use Vue.js components for creating interactive animations Demo Kinesis Demo Installation npm install --save vue-kinesis Default import Install all the components: imp


Animated typing in ~400 bytes ? of JavaScript


? CSS loading animations made with single element.


SQL Formatter is a JavaScript library for pretty-printing SQL queries. It started as a port of a PHP Library, but has since considerably diverged.


Notes from technical (javascript) interviews. Tasks and quiz for different topics to discuss on interview / check self skills in javascript


Awesome Web Animation This list contains the most useful tools and data for creating web animations. Any libraries that help animate anything in the browser - Canvas, SVG, text, scroll etc. Books about animation in the


Demo available here! Usage This package was built using React-Pose, react-dom-confetti and Lottie-web. Why should I use that? Read my blog post and you will know –


This plugin/repo is looking for a maintainer. Please email [email protected] if you are interested. jQuery-Marquee with CSS3 Support A ~8 KB (minified) jQuery plugin to scroll the text like the old traditional

Alexandr Borisov
jQuery animate number


jquery-animateNumber Demo | v0.0.14 – Latest Release README на русском языке jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties. Requires jQuery 1.7.0 or higher


Delighters Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42. It was written by Martin Kool. See the demo here Usage Include the script. <script type="text/javascrip


? WebRTC with integrated SFU server. Video calls, messaging, screen sharing, recording and more.?


Spirit (GSAP) Runtime Spirit is the animation tool for the web. Getting Started: Spirit Homepage Get you up and running Documentation Install Browser Development: With warning


txt.wav some weird text animations the internet deserves. check out the demos NPM npm install --save txt.wav CDN See basic usage include the css an


Snowfall jquery plugin Live Demo Install using bower install jquery-snowfall Version 1.7.4 Bug fixes, removed requestAnimationFrame polyfill. Updated to use gulpjs for build process. Version 1.6


#Scrolldeck A jQuery plugin for making scrolling presentation decks For more info, check out the scrolldeck project page Follow me on Twitter License Dual licensed under the MIT license (below) and GPL license. MIT License C


? ng-animate ng-animate is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in animate.css, but with the power and flexibility of Angular animations instead of CSS.


dwitter A platform to write visual art in javascript limited to 140 characters. Available on Join the chat on Discord Inspired by Pre-requisites and first-time installation Install npm


Quick start t-scroll Clone the repo: git clone [email protected]:crazychicken/t-scroll.git Install with npm: npm install --save-dev t-scroll Install with npm: npm install --save-dev crazychicken/t-scroll Or download


Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe


Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & Browser Support Simple and intuitive api


Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for free in your personal or commercial projects. Don't republish, redi


AsciiMorph AsciiMorph is a small stand alone javascript library for rendering ascii art and creations into elements, allowing for them to be changed out with a morphing transition. Demo Here's a gif of it in action. Y


Obnoxious.CSS Obnoxious CSS is an animation set for the strong of heart, but weak of mind. Check it out. How to use To use, add the obnoxious.css stylesheet to the <head> of your document <head> <l


particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a component. You can use it casually in your own projects. Thanks to the or


Automaton is an animation engine for creative coding. While you're doing creative coding, doing time-based animation by code sometimes causes you so much pain. This project provides a framework and its GUI to connect your coding pieces with animations.

Gabriel Lamas
A animated experience for your checkout !


Fancy Checkout A animated experience for your desktop checkout ! The first launch of a idea, be free to submit your improvements, let´s be open source! A animated experience for your desktop checkout! See in the browser, som


Grid Loading Animations Some inspiration for loading effects on grid items. Article on Codrops Demo This demo is kindly sponsored by FullStory. If you would like to become a demo sponsor, you can find out more here


The famous Matrix rain effect of falling green characters in a terminal

Rob Nova
jQuery Scratch Pad Plugin


wScratchPad.js A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image. View the wScratchPad demo Download the lastest version of wScratchPad


Tweene - JS Animation Proxy - v0.5.10 Tweene is a JS library that helps to improve your favourite animation engine, allowing you to do more and better. There are already a lot of good JavaScript animation libraries on the market


Animate.js A tiny library (~6kb) written in TypeScript to trigger animations on elements when they come into view ? . Demo Interested in writing your own JavaScript plugins? Check out for great tuto


wiv.js · A library for a more wiggly div Example <div class="wiv" data-wiv-speed=".55" data-wiv-height="5" data-wiv-tightness="6" data-wiv-thickness="1" data-wiv-color

Jason Brown
React Native Number Ticker


React Native Ticker Create rotating animations of any number, or character. Changes from v2 to v3 Rebuilt with react-native-reanimated. Rebuilt with TypeScript. The rotateTime is now called duration. Now it m


Sticky Elements Everything can stick. Just because. Demo Getting started npm install stickyelements and insert dist/stickyelements-animate.js (or build your own bundle using src files) Then, stick elements! stick


Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. If the user prohibits using the camera, nothing loads. This library uses TFJS with WASM backend on CPU, so your GPU will be free.


css-spring ? Generate physics based css keyframe animation objects or strings for the css-in-js solution of your choice. Works with simple numeric css properties (with units or without), combine


movy.js is an easy-to-use animation engine based on three.js and gsap.


Damoo Lightweight Canvas HTML5 Danmaku Engine. Youtube extension Click to see Damoo extension script for YouTube live chat. Getting started Use Bower . $ bower install damoo Damoo will be installed to


Conductor Orchestrate animations across components in one place Not a new animation syntax, but a way to organize your code to make Animated easier to work with. Animation code is condensed into a wrapper component that feeds


puppeteer-lottie Renders Lottie animations via Puppeteer to image, GIF or MP4. This module is also available as a CLI. Install npm install --save puppeteer-lottie If you want to generate GIFs, you mu

Animation experiments with React Native


alexandrius React Native Animations Workshop Hi! This is the collection of Animations I created with React Native/Expo. This repo contains pretty interesting ways how you could animate the views while preserving 60 FPS. Run the


MojoJS-Animation MojoJS-Animation is a very lightweight and powerful javascript Animation engine. It also has very simple, beautiful, easy-to-understand source code and "Make-You-Happy" API. Released version in releases. R