237 Repositories
JavaScript canvas-animation Libraries
An animation library, built on the Web Animations API for the smallest filesize and the fastest performance
motion-signals A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Lightweight Loading Animation
โผ๏ธ Features: ๐ Easy to Use ๐ Fast & Lightweight (0.5Kb) ๐ช No dependencies, built with VanillaJS ๐ Tested in all modern browsers โผ๏ธ Demo: https://b
Vanilla JS browser game
Vanilla JS Game - Amazing Spacecraft ๐ Online Demo: https://spacecraft.vercel.app/ a spacecraft that has to survive a journey through space โจ Shortcu
A javascript library to generate animated wavy text!
Wavy Text Animation Library A JavaScript Library which allows you to animate infinite words in an infinite loop in a modern wavy way! Options Vanilla
HTML5 CSS3 vanilla js QR code generator with download options
QR Code Generator HTML5 CSS3 vanilla js QR code generator with download options Additional description about the project and its features. Built With
โ Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.
react-three-scissor Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber. scissor lets you render an infinite number of
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas
Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created
animate.css as a Tailwind plugin
tailwind-animatecss Use animate.css as a Tailwind 3 plugin. Demo โ https://dumptyd.github.io/tailwind-animatecss Table of contents Installation Usage
Collection of Animated 60 FPS TabBar Component's based on React Navigation.
React Navigation TabBar Collection Collection of Animated 60 FPS TabBar Components based on React Navigation. Features 60 FPS Animation Beautiful TabB
Pure and simple virtual DOM library
Maquette Maquette is a Javascript utility which makes it easy to synchronize the DOM tree in the browser with your data. It uses a technique called 'V
Bursting particle effect buttons for React ๐
react-particle-effect-button (demo) Bursting particle effect buttons for React. This library is a React port of an awesome Codrops Article by Luis Man
jQuery plugin for color manipulation and animation support.
jQuery Color Supported jQuery versions: 1.8+ Browser Support jQuery Color 3.x supports the following browsers: Desktop: Chrome: (Current - 1) and Curr
A JavaScript Typing Animation Library
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'
JavaScript library to make drawing animation on SVG
vivus.js Demo available on http://maxwellito.github.io/vivus Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependenci
A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
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
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility
Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and
Making Animation Simple
Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.
Lightweight JavaScript (ES6) tweening engine
Lightweight JavaScript (ES6) tweening library. EXAMPLES Examples collection DOCUMENTATION Purpose Install With npm Or fetch from CDN Basic usage Modul
Cubic-bezier implementation for your JavaScript animation easings โ MIT License
BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.
Tiny Javascript tweening engine.
Weeee.js Tiny Javascript tweening engine. Homepage Usage Step 1: npm install --save weeee.js Step 2: import Weeee from 'weeee.js'; const example = ne
JavaScript library for object-based canvas drawing
oCanvas - Object-based canvas drawing oCanvas makes canvas development easier to understand and do, by creating a bridge between the native pixel draw
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
Animate elements as they scroll into view.
Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie
๐ Performance focused, lightweight scroll animation library ๐
Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio
Javascript library for typing animation
typebot Javascript library for typing animation Usage: include script src="typebot.js"/script And in js new typebot(element,speed,delay,text,blink
A JavaScript API for drawing unconventional text effects on the web.
A JavaScript API for drawing unconventional text effects on the web. Home โ Help Overview When applying effects to text on the web, designers have tra
Reusable way to create smooth tab highlights.
useTabs Reusable way to create smooth tab highlights. Installation Install my-project with npm npm install @olivieralexander/usetabs Usage/Examples
๐๐ Beautiful chart for data visualization.
๐ ๐ Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ๐ฆ Packages The functionality of TOAST U
๐๐จ Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. ๐ฆ Packages toast-ui.image-editor - Plain JavaScript co
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti
Diagram-maker - A library to display an interactive editor for any graph-like data.
Diagram Maker Diagram Maker is a library to display an interactive editor for any graph-like data. Following is a screenshot from one of the consumers
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.
Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll
TypeWriter - Create easily a TypeWriter effect for your website
TypeWriter Create easily a TypeWriter effect for your website Written by Luuk Walstra Discord: Luuk#8524 Github: https://github.com/Luuk-Dev Replit: h
A simple project to refresh on the usage of js canvas and getContext('2d') to create four interactive squares on the canvas when hovered changes color.
A simple project to refresh on the usage of js canvas and getContext('2d') to create four interactive squares on the canvas when hovered changes color. Can also be clicked to work on mobile devices.
Cubo 3d com Javascript Canvas API.
Projection engine Motor grรกfico escrito em javascript "from scratch". Ambiente de teste. Esse projeto nรฃo faz uso algum de NENHUMA API para renderizaรง
๐ฎ Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas
๐ฎ An easy to use 2D HTML5 game engine written in TypeScript
An HTML5/Canvas implementation of 8-bit color cycling
Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
ๅบไบreactๅฎ็ฐ็ๆปๅจ้ช่ฏ็ ็ปไปถ
Hello react-slider-vertify! react-slider-vertify ๆฏไธๆฌพๅ็ซฏๅฎ็ฐ็ๆปๅจ้ช่ฏ็ ็ปไปถ, ๆไปฌๅฏไปฅ้่ฟๅฎ่ฝปๆพ็ๆงๅถ้ช่ฏ็ๆดไธช็ๅฝๅจๆ(ๅทๆฐๆถ, ้ช่ฏๆๅๆถ, ้ช่ฏๅคฑ่ดฅๆถ็ๅ่ฐ), ๅนถๆฅๆไธๅฎ็้ ็ฝฎๅ่ฝๅ. doc react-slider-vertify G
I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".
Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com
Algorithm visualizer made with React, Material UI and P5JS.
Made with React, P5JS and Material UI. Link https://andresrodriguez55.github.io/algorithmsVisualizer/#/ Description The purpose of doing this was to l
Theatre.js is an animation library for high-fidelity motion graphics.
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.
This is a particle animation art piece using threejs.
3d-particle-mofing โ DEMO Usage Clone repository Install Node.js Create an .env file and copy the contents of .env-sample. Run following commands np
A shopping mobile application made with react native for Android.
Shop App Description This project is a simplified implementation of a shopping system, the project aims to provide the basic features that are expecte
JAVASCRIPT library with which you can easily draw CANVAS HTML
easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
Inline to Menu Link Animation An experimental inline-to-menu-link animation based on a concept by Matthew Hall. Article on Codrops Demo Installation I
A library to add a virtual Trackball to your DOM
Trackball.js - 3D Trackballs for your Website Trackball.js is a small JavaScript library on top of Quaternion.js to enable free 3D rotation of element
C7 is a canvas-based UI toolkit.
C7 C7 is a canvas-based UI toolkit. ไธญๆ็ Introduction C7 re-implements the key technology of modern front-end development based on HTML canvas (witho
Canvas
Installation $ npm install knights-canvas Example GoodBye const ling = require("knights-canvas"), const fs = require('fs'); const image = await new
A light wight javascript image viewing plugin with smooth animation and 0 dependence
A light wight javascript image viewing plugin with smooth animation and 0 dependence
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly
A lightweight 3D game engine for the web.
A lightweight 3D game engine for the web. Built with three.js and cannon-es.
Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.
Coher3nTS Project This is an Angular project template with Phaser nested inside, set up to run with Electron. Cross-Platform & Responsive The template
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.
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
The Illusion of Life: An SVG Animation Case Study
svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
Lazy Line Painter - A Modern JS library for SVG path animation
Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).
Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow
circle-svg-animation
Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
CSS loading animations with minimal effort!
Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ๐ ). It started as a drop in CSS file to get
A little library that can be used for bursting particles effects on buttons and other elements
Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol
A set of buttons with a magnetic interaction and a hover effect.
Magnetic Buttons A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto. Article on Codrops
The incredible effect of rain of letters in the style of the Matrix trilogy.
O Efeito Matrix O incrรญvel efeito da chuva de letras no estilo da trilogia Matrix. "Cedo ou tarde, vocรช vai aprender, assim como eu aprendi, que exist
Demonstration of different animation effects with AngularJS ngView directive.
ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you
Add a retro/vintage effect to images using the HTML5 canvas element
vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
A sticky image effect for a slideshow inspired by ultanoir's website.
How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on
๐ Parallax tilt hover effect for React JS - tilt.js
React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac
Lightweight, High Performance Particles in Canvas
Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you ๐ just ๐ gotta ๐ have ๐ sparkl
A vue.js particles animation background component
particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React
React particles animation background component
particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com
Pixel based heatmap with html5 canvas.
heatcanvas Note that this project is no longer active maintained. Please let me know(file an issue or send me email) if you are interested in taking o
Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.
Slidebars Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which feat
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
mmenu.js The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customiz
The lightweight library for manipulating and animating SVG
SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I
Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
English| ็ฎไฝไธญๆ Introduction ๐ Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. Links
Automatically add a progress bar to your site.
PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a
Responsive and slick progress bars
ProgressBar.js Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as y
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
mmenu.js The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customiz
๐ฟ A cross-browser library of CSS animations. As easy to use as an easy thing.
Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal
GreenSock's GSAP JavaScript animation library (including Draggable).
GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani
:woman: Library for image processing
Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
AnimXYZ animxyz.com AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless
๐ฆโข [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the
๐๐จ Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo
A library for visualization and creative-coding
Pts Pts is a typescript/javascript library for visualization and creative-coding. Get started at ptsjs.org. Please give it a try, file issues, and sen
A cross platform high-performance graphics system.
spritejs.org Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-prog
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,
๐ฑ๐An elegant, interactive and flexible charting library for mobile.
ไธญๆ README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an