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

 26.1k

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

 24.9k

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

 22.1k

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

 20.3k
Julian Shapiro
Accelerated JavaScript animation.

julianshapiro/velocity

Velocity beta NPM: npm install [email protected] Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation refers to V1, not V2 beta - use the wiki

 17.1k

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

 15.6k

vivus.js Demo available on http://maxwellito.github.io/vivus 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

 14k

Live Demo | View All Demos | View Full Docs | mattboldt.com 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

 11.5k

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

 9.4k
tween.js and related projects
Javascript tweening engine

tweenjs/tween.js

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

 8.4k

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.

 8.3k

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

 8.2k

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

 7.1k

Get the turn.js 4th release on turnjs.com 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

 6.6k

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

 6.3k

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

 6k

Create and animate hand-drawn annotations on a web page

 6k

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

 5.5k

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.

 5.2k

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

 4.8k

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

 4.6k
Miguel Pérez
Unobtrusive page transitions with jQuery.

miguel-perez/smoothState.js

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

 4.5k

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

 3.8k

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

 3.7k

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

 3.6k
Erik Terwan
Let your page react to scroll changes.

terwanerik/ScrollTrigger

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

 3.6k

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

 3.5k

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

 3.4k

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/

 3.3k

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

 3.2k

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

 3k

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

 3k

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

 2.8k

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 ?

 2.8k

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

 2.7k
Deck of Cards
Deck of Cards (old version)

deck-of-cards/deck-of-cards

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

 2.7k

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

 2.7k

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

 2.6k

#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

 2.5k

#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

 2.4k

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

 2.3k

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

 2.3k

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

 2.3k

Hanzi Writer https://chanind.github.io/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

 2k

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:

 2k
Jiří Otáhal
Animate it! Easily!

xotahal/react-native-motion

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

 2k

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

 1.9k

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

 1.8k

? Smooth animation library for interpolating numbers

 1.8k

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

 1.7k

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

 1.6k

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

 1.4k

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

 1.3k

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

 1.3k

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

 1.3k

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

 1.2k

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

 1.1k

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

 1.1k

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

 1.1k

Animated typing in ~400 bytes ? of JavaScript

 1.1k

? CSS loading animations made with single element.

 1.1k

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.

 1k

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

 1k

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

 1k

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 – https://www.thedevelobear.com/post/microinteract

 977

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

 907
Alexandr Borisov
jQuery animate number

aishek/jquery-animateNumber

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

 773

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

 745

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

 736

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

 727

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

 717

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

 700

#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

 681

? 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.

 676

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

 665

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

 646

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

 626

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

 537

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

 511

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

 487

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

 482

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

 473

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.

 442
Gabriel Lamas
A animated experience for your checkout !

gabriellamas/Fancy-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

 406

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

 406

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

 392
Rob Nova
jQuery Scratch Pad Plugin

websanova/wScratchPad

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

 390

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

 353

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 ES6.io for great tuto

 350

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

 336
Jason Brown
React Native Number Ticker

browniefed/react-native-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

 331

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

 316

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.

 294

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

 280

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

 276

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

 267

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

 267

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

 262
4TWIGGERS
Animation experiments with React Native

4TWIGGERS/React-Native-Animation-Workshop

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

 256

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

 255