JavaScript Animation

Open-source JavaScript projects categorized as Animation
Edit details
Topics: JavaScript React CSS Animations Canvas
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.io
Sponsored

Top 23 JavaScript Animation Projects

  • anime.js

    JavaScript animation engine

    • Project mention: Incredible JavaScript Animation Libraries | dev.to | 2024-03-24

    Anime.js is celebrated for its simplicity, speed, and versatility. This compact library simplifies the animation process, enabling developers to craft visually striking animations with minimal effort. Anime.js supports a wide array of effects like scaling, morphing, and rotating, offering developers the tools to create complex timelines and animations with ease.

  • algorithm-visualizer

    :fireworks:Interactive Online Platform that Visualizes Algorithms from Code

  • 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

  • scrollreveal

    Animate elements as they scroll into view.

    • Project mention: 100+ FREE Resources Every Web Developer Must Try | dev.to | 2024-02-26

    ScrollReveal.js: Easily reveal elements as they enter the viewport.

  • GreenSock-JS

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

    • Project mention: Where the hell do I create these nice animations | news.ycombinator.com | 2024-04-25

  • git-history

    Quickly browse the history of a file from any git repository

  • svg.js

    The lightweight library for manipulating and animating SVG

  • laxxx

    Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo

  • react-native-animatable

    Standard set of easy to use animations and declarative transitions for React Native

  • two.js

    A renderer agnostic two-dimensional drawing api for the web.

    • Project mention: Show HN: A JavaScript library for data visualization in both SVG and Canvas | news.ycombinator.com | 2024-04-11

    > DOM-like event bubbling

    This does sound very interesting. I started playing with https://two.js.org/ for a browser game but the event system proved a challange. The typescript focus also looks promising. Will give it a try.

  • progressbar.js

    Responsive and slick progress bars

  • canvas-confetti

    🎉 performant confetti animation in the browser

    • Project mention: A useful front-end confetti animation library | news.ycombinator.com | 2024-04-25

    It's only meaningful to consider that our world is a simulation if it is an imperfect one, otherwise you're just using "simulation" as an awkward synonym for "reality".

    Click the "snow" button enough (https://catdad.github.io/canvas-confetti/) and you'll get a horizontal line separating the pre-slowdown flakes from the post-slowdown flakes. I suppose that's the kind of simulation imperfection that we might look for.

    Personally, I don't think we're hacking our way out of this one any time soon, so I'm happy to just call it reality.

  • react-move

    React Move | Beautiful, data-driven animations for React

    • Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17

    Github repo : https://github.com/sghall/react-move

  • lightgallery.js

    Full featured JavaScript image & video gallery. No dependencies

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

  • mixitup

    A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

  • react-flip-move

    Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

  • typeit

    The most versatile JavaScript typewriter effect library on the planet.

    • Project mention: Impressive performance gains in moving TypeIt from Gatsby to Astro | news.ycombinator.com | 2023-07-19

    - the overall performance score jumped by 12 points.

    All of this was achieved by sticking with the same overall design and layout. It was really due to getting away from a heavy, React-based static site generator.

    If you’re working with a similar type of site and looking to upgrade, rebuild, or migrate, I highly recommend Astro and its Starlight theme. I’ll be using it probably exclusively moving forward.

    See the TypeIt site here:

    https://typeitjs.com

  • Blotter

    A JavaScript API for drawing unconventional text effects on the web.

  • motionity

    The web-based motion graphics editor for everyone 📽

  • react-reveal

    Easily add reveal on scroll animations to your React app

    • Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17

    Github repo : https://github.com/rnosov/react-reveal

  • react-native-collapsible

    Animated collapsible component for React Native, good for accordions, toggles etc

  • lazy-line-painter

    Lazy Line Painter - A Modern JS library for SVG path animation

  • react-countup

    💫 A configurable React component wrapper around CountUp.js

  • 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
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 Animation related posts

Index

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

Project Stars
1 anime.js 48,686
2 algorithm-visualizer 46,118
3 scrollreveal 22,109
4 GreenSock-JS 18,632
5 git-history 13,471
6 svg.js 10,860
7 laxxx 10,275
8 react-native-animatable 9,708
9 two.js 8,190
10 progressbar.js 7,755
11 canvas-confetti 6,849
12 react-move 6,574
13 lightgallery.js 5,286
14 vanta 5,249
15 mixitup 4,508
16 react-flip-move 4,029
17 typeit 3,011
18 Blotter 3,011
19 motionity 2,964
20 react-reveal 2,721
21 react-native-collapsible 2,412
22 lazy-line-painter 1,953
23 react-countup 1,902

Sponsored
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.
www.influxdata.com