JavaScript Animations

Open-source JavaScript projects categorized as Animations

Top 23 JavaScript Animation Projects

  • anime.js

    JavaScript animation engine

  • Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09

    Repository: anime.js on GitHub

  • Awesome-Design-Tools

    The best design tools and plugins for everything 👉

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • particles.js

    A lightweight JavaScript library for creating particles

  • Project mention: How to create this floating particles 3D background effect? | /r/webdev | 2023-07-02

    Not the same effect, but with particles.js you can get some nice stuff

  • GreenSock-JS

    GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

  • Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09

    Repository: GSAP on GitHub

  • velocity

    Accelerated JavaScript animation.

  • Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09

    Repository: Velocity.js on GitHub

  • jquery.transit

    Super-smooth CSS3 transformations and transitions for jQuery

  • vanta

    Animated 3D backgrounds for your website

  • Project mention: Seeking Guidance and Implementation Tips for Vanta.js-like Effects in Flutter | /r/flutterhelp | 2023-06-01

    Looking that the source code, it seems that these are implemented using shaders. Those are a new thing in Flutter, so I'd try to go that road. You probably need a CustomPaint with a CustomPainter, painting a Rect with a Paint using that Shader, feeding it all input parameters. I've absolutely no experience with shaders in Flutter, but that's what I'd try for something simple like the fog. For the birds, you'd probably need to implement a lot of 3D geometry yourself.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • react-burger-menu

    :hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

  • Project mention: Whats your go-to off canvas menu library? | /r/reactjs | 2023-12-05

    This library seems to have the most downloads on NPM Trends: https://github.com/negomi/react-burger-menu

  • move.js

    CSS3 backed JavaScript animation framework

  • editly

    Slick, declarative command line video editing & API

  • Project mention: FFmpeg Lands CLI Multi-Threading as Its "Most Complex Refactoring" in Decades | news.ycombinator.com | 2023-12-12

    Sounds like you already have a process for most of this, but I found https://github.com/mifi/editly to be incredibly helpful to run ffmpeg and make my little time lapse video. Could be useful for others

  • textillate

    A jquery plugin for CSS3 text animations.

  • Vizzu

    Library for animated data visualizations and data stories.

  • typical

    Animated typing in ~400 bytes 🐡 of JavaScript

  • highway

    Highway - A Modern Javascript Transitions Manager (by Dogstudio)

  • Project mention: Seamless Transition Using Highway.js/Barba.js | /r/learnjavascript | 2023-06-30

    It's using Highway.js or Barba.js I am not using any framework on this project.

  • react-typist

    Typing animations with React

  • react-portfolio-template

    Modern React Portfolio Template (FREE)

  • Project mention: What am I doing wrong ? | /r/cscareerquestions | 2023-06-08

    Your project portfolio I actually thought was a troll at first, the colors, alignments, fonts, are all just horrendous. No offense, you're not a designer. But just use a nice clean template, there are hundreds out there. Use a UI kit, something. It has to be readable at the very least. Here, free - https://github.com/chetanverma16/react-portfolio-template

  • react-native-animated-charts

    Set of components and helpers for building complex and beautifully animated charts

  • Odoo

    Javascript and SVG odometer effect library with motion blur

  • motus

    Animation library that mimics CSS keyframes when scrolling.

  • animatelo

    Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

  • web-portfolio

    Personal portfolio website made with the React

  • react

    React tsParticles official component (by tsparticles)

  • Scrawl-canvas

    Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun

  • Project mention: Figma's Journey to TypeScript | news.ycombinator.com | 2024-05-04

    I don't like Typescript because it forces me to think about types and data structures and stuff. Which is a Good Thing because I absolutely have to think about that stuff when working on large codebases with a team of colleagues: without the inline documentation and text editor help TS gives me when working on those codebases I'd be (at least!) 10x slower when refactoring old code or adding new code. And nobody wants to pay a slow developer!

    However ... the one place I refuse to use Typescript is in my side project - a JS canvas library. I can justify this because: 1. it's a big codebase, but I know every line of it intimately having spent the last 10 years (re-)writing it; 2. nobody else contributes (and I kinda like it that way); and 3. I keep a close eye on competing canvas libraries and I've watched several of them go through the immense (frustrating!) work of converting their codebases to TS over the past few years and, seriously, I don't need that pain in my not-paid-for life.

    Even so, I do maintain a .d.ts file for the library's 'API' (the functions devs would use when building a canvas using my library) because the testing, documentation and autocompletion help it offers is too useful to ignore. It is additional work, but it's just one file[1] and I can live with that.

    [1] https://github.com/KaliedaRik/Scrawl-canvas/blob/v8/source/s...

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

JavaScript Animations related posts

  • Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide

    5 projects | dev.to | 9 May 2024
  • Top 10 JavaScript Animation Libraries

    13 projects | dev.to | 9 May 2024
  • Time-Based CSS Animations

    3 projects | news.ycombinator.com | 5 May 2024
  • Figma's Journey to TypeScript

    5 projects | news.ycombinator.com | 4 May 2024
  • React Refs Ritual: Managing Focus, Selections, and More.

    2 projects | dev.to | 29 Apr 2024
  • Where the hell do I create these nice animations

    2 projects | news.ycombinator.com | 25 Apr 2024
  • An Afternoon with SVGs | Frontend Challenge Entry

    2 projects | dev.to | 28 Mar 2024
  • A note from our sponsor - SurveyJS
    surveyjs.io | 18 May 2024
    With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js. Learn more →

Index

What are some of the best open-source Animation projects in JavaScript? This list will help you:

Project Stars
1 anime.js 48,824
2 Awesome-Design-Tools 31,963
3 particles.js 28,434
4 GreenSock-JS 18,797
5 velocity 17,272
6 jquery.transit 7,302
7 vanta 5,282
8 react-burger-menu 5,007
9 move.js 4,714
10 editly 4,577
11 textillate 3,652
12 Vizzu 1,880
13 typical 1,542
14 highway 1,424
15 react-typist 1,379
16 react-portfolio-template 1,248
17 react-native-animated-charts 902
18 Odoo 814
19 motus 633
20 animatelo 487
21 web-portfolio 336
22 react 322
23 Scrawl-canvas 313

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com