Web Animation

The "Awesome Web Animation" project is a curated collection of resources focused on creating animations for the web using technologies like JavaScript, CSS, and SVG. This list encompasses a variety of categories, including libraries, frameworks, tutorials, tools, and examples that demonstrate how to implement engaging animations effectively. It is designed for web developers of all skill levels, from beginners looking to learn the basics of web animations to experienced developers seeking advanced techniques and tools to enhance their projects. Users can explore creative ways to bring their web applications to life, making them more interactive and visually appealing.

web-animationcss-animationsvg-animationjavascript-animationanimation-librariesfrontend-developmentinteractive-designweb-design

RSS View on GitHub

1.5k stars81 forks0 contributorsUpdated

SVG

6 projects

Snap.svg

A JavaScript SVG library for creating and animating modern SVG graphics on the web.

#dom-manipulation#web-animation#interactive-graphics

Stars14,013

Forks1,124

Last commit4 years ago

Svg.js

A lightweight, dependency-free JavaScript library for manipulating and animating SVG.

#dom-manipulation#animation#svg

Stars11,759

Forks1,082

Last commit7 months ago

Vivus

A lightweight, dependency-free JavaScript library for animating SVG drawings with a hand-drawn effect.

#ui-animation#web-animation#dependency-free

Stars15,469

Forks1,130

Last commit3 years ago

Walkway

A lightweight JavaScript library for animating SVG path, line, and polyline elements with customizable easing.

#web-design#ui-animation#frontend

Stars4,356

Forks223

Last commit4 years ago

Raphael

A cross-browser JavaScript library for creating and manipulating vector graphics with SVG and VML support.

#animation#interactive-graphics#cross-browser

Stars11,290

Forks1,647

Last commit2 years ago

Bonsai

A JavaScript graphics library with a separated runner and renderer architecture, supporting iFrame, Worker, and Node contexts.

#visual-effects#animation-library#creative-coding

Stars1,960

Forks183

Last commit8 years ago

Common

10 projects

GSAP

A framework-agnostic JavaScript animation library for high-performance animations across CSS, SVG, canvas, React, Vue, WebGL, and more.

#canvas-animation#vue-animation#animation

Stars24,467

Forks1,967

Last commit11 days ago

TweenJS

A simple but powerful JavaScript library for tweening numeric object properties and CSS style properties.

#ui-animation#animation#tweening

Stars3,554

Forks948

Last commit2 years ago

Anime.js

A fast, lightweight JavaScript animation library for CSS properties, SVG, DOM attributes, and JavaScript objects.

#ui-animation#animation#web-animation

Stars67,300

Forks4,507

Last commit2 months ago

Mojs

A JavaScript motion graphics library for creating fast, retina-ready, and customizable web animations.

#ui-animations#interactive-design#graphics

Stars18,686

Forks890

Last commit10 days ago

Animo.js

A JavaScript library for managing CSS animations with stacking, cross-browser blur effects, and callbacks.

#ui-animations#css-animations#cross-browser

Stars2,100

Forks312

Last commit9 years ago

Move.js

A small JavaScript library for creating CSS3-backed animations with a simple, elegant API.

#dom-manipulation#ui-animation#animation

Stars4,703

Forks673

Last commit4 years ago

Velocity

A fast, feature-rich JavaScript animation engine that works with and without jQuery.

#dom-manipulation#ui-animation#motion-design

Stars17,227

Forks1,519

Last commit5 years ago

Animateplus

A JavaScript animation library focused on performance and flexibility, delivering 60 FPS animations under 3 KB.

#design#animation#promise-based

Stars5,945

Forks280

Last commit7 years ago

Progressbar.js

A JavaScript library for creating responsive, animated SVG progress bars with customizable shapes and animations.

#animation#progressbar#react-integration

Stars7,864

Forks1,380

Last commit1 year ago

Bezier easing

A JavaScript implementation of CSS cubic-bezier easing functions for precise and performant animations.

#cubic-bezier#easing#animation

Stars1,773

Forks138

Last commit16 days ago

CSS

5 projects

Animate.css

A cross-browser library of ready-to-use CSS animations that are easy to implement.

#stylesheets#css-animations#animation

Stars82,524

Forks16,024

Last commit1 year ago

Magic

A lightweight CSS library providing a collection of ready-to-use, cross-browser CSS3 animations with special effects.

#gulp#jquery#css-animations

Stars8,599

Forks1,169

Last commit3 years ago

Css-loaders

A collection of minimal, single-element loading spinners animated entirely with CSS.

#minimal-design#css-animations#single-element

Stars7,062

Forks1,010

Last commit1 year ago

SpinKit

A collection of smooth, customizable loading spinners animated entirely with CSS.

#css-animations#css-variables#ux

Stars19,372

Forks1,777

Last commit5 years ago

Bounce.js

A JavaScript library and tool for generating beautiful CSS3 keyframe animations with a simple API.

#ui-animations#css-animations#motion-design

Stars6,173

Forks410

Last commit5 years ago

Canvas

9 projects

EaselJS

A JavaScript library for building high-performance interactive 2D graphics and animations on the HTML5 Canvas.

#interactive-content#display-list#animation-library

Stars8,173

Forks1,938

Last commit3 months ago

Fabric.js

A simple and powerful JavaScript library for working with HTML5 canvas, providing object model, SVG parsing, and rich interactions.

#svg-parser#canvas-manipulation#drawing-app

Stars31,107

Forks3,627

Last commit2 days ago

Paper.js

A vector graphics scripting framework for HTML5 Canvas and Node.js, offering a comprehensive API for creating and manipulating vector graphics.

#interactive-design#svg#creative-coding

Stars15,015

Forks1,261

Last commit1 year ago

Konva

A JavaScript framework for high-performance HTML5 Canvas applications with interactivity, animations, and event handling.

#node-canvas#javascript-framework#graphics

Stars14,360

Forks1,049

Last commit13 days ago

Two.js

A renderer-agnostic 2D drawing API for the web that works with SVG, Canvas 2D, and WebGL.

#animation#html5#canvas

A lightweight vanilla WebGL library that turns HTML DOM elements into interactive textured planes.

#responsive#3d-animation#interactive-graphics

Stars1,812

Forks114

Last commit1 year ago

Hover-effect

A JavaScript library for creating WebGL-powered distortion hover effects between images or videos.

#ui-animation#three-js#displacement-mapping

Stars1,875

Forks310

Last commit2 years ago

Pts.js

A TypeScript/JavaScript library for visualization and creative-coding with lightweight geometry and canvas utilities.

#sound#generative-art#vector

Stars5,325

Forks183

Last commit1 year ago

tsParticles

A lightweight TypeScript library for creating customizable particle effects, confetti, and fireworks animations as website backgrounds.

#canvas-animation#particles#confetti

Stars8,803

Forks941

Last commit1 day ago

Animate on scroll

6 projects

AOS

A lightweight JavaScript library for animating elements on scroll with CSS-driven transitions.

#css-animations#vanilla-js#ui-effects

Stars28,069

Forks2,640

Last commit2 years ago

Laxxx

A lightweight vanilla JavaScript library for creating smooth scroll-driven animations.

#effects#css-animations#animation

Stars10,487

Forks488

Last commit11 months ago

Wow

A lightweight JavaScript library that reveals CSS animations as you scroll down a page.

#css-animations#ux-enhancement#lightweight

Stars9,916

Forks4,003

Last commit1 year ago

Scrollreveal

A JavaScript library for animating elements as they enter or leave the viewport on scroll.

#ui-animations#animation#transition

Stars22,509

Forks2,219

Last commit2 years ago

ScrollMagic

A lightweight JavaScript library for precise scroll position tracking and event handling using IntersectionObserver and ResizeObserver.

#vanilla-js#ux#frontend

Stars14,949

Forks2,135

Last commit14 days ago

Sal

A lightweight, performance-focused scroll animation library using Intersection Observer with no dependencies.

#web-animation#lightweight#animation-library

Stars3,695

Forks177

Last commit3 years ago

Related Awesome Lists

💚

Vue.js

The "Awesome Vue.js" project is a curated collection of resources aimed at supporting developers using Vue.js, a progressive JavaScript framework for building user interfaces. This list encompasses a variety of resources including libraries, tools, plugins, tutorials, and community contributions that enhance the development experience. Whether you are a beginner looking to learn the basics or an experienced developer seeking advanced techniques, this list provides invaluable resources to help you create dynamic and responsive web applications. Dive into this collection to discover tools and insights that will elevate your Vue.js projects to the next level.

73.6k

⚛️

React

The "Awesome React" project is a curated resource list designed to support developers using React, a popular JavaScript library for building user interfaces. This list includes a wide range of resources such as libraries, tools, tutorials, components, and community-driven content that enhance the development experience. Whether you are a beginner looking to learn the basics or an experienced developer seeking advanced techniques, this collection provides valuable insights and tools to streamline your workflow. Dive into the world of React and discover the resources that will help you create dynamic and responsive user interfaces with ease.

72.7k

📦

Android UI

The "Awesome Android UI" project is a curated resource list dedicated to enhancing user interface design for Android applications. Android UI refers to the visual elements and interactive components that make up the user experience on Android devices. This list includes a variety of resources such as UI libraries, design tools, components, animations, and tutorials that cater to both novice and experienced developers. By providing a comprehensive selection of resources, this project empowers developers to create visually appealing and user-friendly applications. Whether you're looking for inspiration or practical tools to streamline your design process, you'll find valuable assets to elevate your Android UI development.

55.8k

🌊

Tailwind CSS

The "Awesome Tailwind CSS" project is a comprehensive repository of resources dedicated to using Tailwind CSS, a utility-first CSS framework for building custom user interfaces rapidly. This curated list includes official documentation, IDE extensions, tools, UI libraries, components, and plugins, providing valuable aids for developers of all skill levels. With resources for design inspiration and development support, the project fosters a vibrant community around Tailwind CSS. Whether you’re searching for components or enhancing your workflow, this collection serves as a go-to guide for maximizing the potential of Tailwind CSS.

15.0k

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub