JavaScript Animation

Open-source JavaScript projects categorized as Animation

Top 23 JavaScript Animation Projects

  • anime.js

    JavaScript animation engine

    Project mention: A Modern High-Performance Open Source Message Queuing System | news.ycombinator.com | 2023-07-27
  • algorithm-visualizer

    :fireworks:Interactive Online Platform that Visualizes Algorithms from Code

    Project mention: Alternative to geeksforgeeks.org ? | /r/learnjavascript | 2023-02-19

    https://algorithm-visualizer.org/ is decent, interactive, and has a GitHub repo.

  • Amplication

    Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.

  • scrollreveal

    Animate elements as they scroll into view.

    Project mention: How can I achieve this scroll animation ? | /r/webdev | 2023-05-14
  • git-history

    Quickly browse the history of a file from any git repository

    Project mention: Want to create attractive, interactive docs? Use these amazing documentation tools and examples | dev.to | 2022-12-02

    Rodrigo Pombo is the creator of Code Hike. He has been making tools to make code and technical data more comprehensible for some time. Previously, he applied a similar technique to make your git history easier to navigate and comprehend with git-history.

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

  • react-native-animatable

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

    Project mention: React native animatable | /r/reactnative | 2023-03-31

    tried this method and it throws and error ref.current.pause is not a function I also don't see anything on the GitHub page of the package...? https://github.com/oblador/react-native-animatable

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

  • two.js

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

    Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | /r/webdev | 2022-11-25

    Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple

  • progressbar.js

    Responsive and slick progress bars

  • 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

  • canvas-confetti

    🎉 on-demand confetti gun

    Project mention: How do you track habits? | /r/gtd | 2023-04-10

    The confetti is based off canvas-confetti. I'm looking to add more effects. Its a small thing, but people really like it :)

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

  • lenis

    How smooth scroll should be

    Project mention: Setting up Locomotive Scroll and GSAP/ScrollTrigger with Nuxt 3? | /r/Nuxt | 2023-04-27

    The documentation is written on the github: https://github.com/studio-freight/lenis

  • mixitup

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

    Project mention: How to chain multiple filters together? And remove the filters individually on clicking them again | /r/Frontend | 2022-10-19
  • react-flip-move

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

  • Blotter

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

  • 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

  • motionity

    The web-based motion graphics editor for everyone 📽

    Project mention: I made an online video editor | /r/SideProject | 2023-01-14

    This is Motionity https://github.com/alyssaxuu/motionity

  • 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

    Project mention: what is the best way to make this component using expo? does anyone know of a library? | /r/reactnative | 2023-02-23

    Otherwise, if you really want to use an external lib, react-native-collapsible is another option but it isn’t much maintained either

  • lazy-line-painter

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

  • react-countup

    💫 A configurable React component wrapper around CountUp.js

    Project mention: Countup react component | /r/Frontend | 2022-10-15

    I have no experience with this library but I wonder if you could use the formattingFn prop and format the number with a currency function, like in https://github.com/glennreyes/react-countup/issues/529

  • SurveyJS

    A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.

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). The latest post mention was on 2023-07-27.

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 47,063
2 algorithm-visualizer 44,297
3 scrollreveal 21,748
4 git-history 13,388
5 svg.js 10,518
6 laxxx 10,073
7 react-native-animatable 9,580
8 two.js 8,055
9 progressbar.js 7,702
10 react-move 6,557
11 canvas-confetti 5,778
12 lightgallery.js 5,272
13 vanta 4,844
14 lenis 4,786
15 mixitup 4,494
16 react-flip-move 3,974
17 Blotter 2,976
18 typeit 2,920
19 motionity 2,774
20 react-reveal 2,678
21 react-native-collapsible 2,382
22 lazy-line-painter 1,940
23 react-countup 1,797
Collect and Analyze Billions of Data Points in Real Time
Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
www.influxdata.com