237 Repositories
JavaScript canvas-animation Libraries
Cross-platform 2D editor that saves scenes to json
Webber's Map Editor 2D Load or create a new map Select your sprites' folder (recursively). Drag your sprites to the canvas to create instances. On the
Translate text in images using Vision API, Translation API and React with Canvas
manga-translator Manga translator app using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud project, en
👾 Simple creating cards using canvas. Welcome, Rank, Info and so on.
⭐ discord-canvas-card Are you developing a bot using DiscordJS and you need beautiful images created using Canvas? You can create great welcome, goodb
This is my first website. It has helpful information, games, lots of pages & more.
Mitko.Vtori World This is my first website. It has helpful information, games, lots of pages & more. 🎞 Presentation & Introduction Here's link to my
A simple breakout game created using HTML, CSS and Javascript
BreakOut Game This game is created using HTML, CSS and Javascript Game Overview The game would consist of 3 lives in order to clear out all the blocks
An Exhibition Of Mathematical Beauty.
🪴 Fractal Garden 🪴 📐 An Exhibition Of Mathematical Beauty 📐 Fractals are awesome. They look beautiful and have intricate mathematical connections
The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.
Awesome Estate The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured
a JavaScript library that allows you to make a mouse interaction animation easily.
Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily. Getting Started Download npm install cottonjs Manual
A flexible and extensible javascript library for letters animation simulations.
LetterLoading LetterLoading js is a javascript library for making awesome letter simulations. It default simulation is a letter loading simulation. Co
Alpine.js wrapper for @formkit/auto-animate.
💫 Alpine AutoAnimate 💫 An Alpine.js wrapper for @formkit/auto-animate. 🚀 Installation CDN Include the following script tag in the head of your
The easiest way to animate your Next.js project. Scrollreveal.js helper package.
next-reveal The easiest way to animate your Next.js app Demo Introduction next-reveal makes it easy to add awesome scroll animations to your Next.js p
Snake game developed by Canvas & vanilla Js using OOP paradigm 🐍 🍎 🎮
Snake-Game 🐍 🍎 Snake game developed by Canvas & vanilla Js using OOP paradigm This project was an exercise for the canvas fullDemo Feature Eating fo
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.
CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use
Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.
Write and Delete Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more
A lib for text highlighting by using Canvas.
canvas-highlighter 基于 canvas 实现的文本划词高亮，与文本展示的结构完全解耦，不改变文本内容的 DOM 结构。 Installation npm install canvas-highlighter Usage 最简单的实现文本划词直接高亮 import CanvasHig
Have a code snippet, Create a code video
CodeVideo CodeVideo is a product that helps you to make code explanation videos. It's quick and easy, so anybody can create beautiful code videos with
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.
pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this
Create tweet images
tweet-maker Create tweet images 2018'de javascripti kurcalarken yapmış olduğum bir proje. 2021'de eski kodlarıma bakarken buldum. 2021 yılı içerisinde
A lightweight JavaScript plugin for particle backgrounds.
ak-kaleidoscope ak-kaleidoscope is a lightweight JavaScript plugin for particle backgrounds. Demo See demo page. The examples code can be found in the
Your whole team, changing the world one stroke at a time.
Collanvas — Your whole team, changing the world one stroke at a time 🎨 With an online whiteboard, you can brainstorm 🧠 , draw art 🖌️ , and even pla
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro
Add animation to your HTML5 pages, items and on text, using this JS Framework
animate.js is a tiny JavaScript library that provides a convenient way to apply Animate.css powered CSS animations to DOM elements without writing any
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
Wave.js Audio visualizer library for javascript. Installation Install With CDN script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.
Motionity is a free and open source animation editor in the web
Motionity The web-based motion graphics editor for everyone 📽 Motionity is a free and open source animation editor in the web. It's a mix of After Ef
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.
jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F
Marker animation jQuery plugin
jQuery Marker Animation Read this in other languages: English, 日本語. jQuery plugin to add under line animation like highlighter. Demonstration Table of
A very simple JavaScript library written in vanilla js for scrambling text.
Scrambling Text A very simple JavaScript library written in vanilla js for scrambling text. Demo Page Table of Contents Installation Examples Basic Ex
Full featured JavaScript image & video gallery. No dependencies
lightgallery.js Full featured JavaScript lightbox gallery. No dependencies. Important notice lightgallery.js has been merged with lightGallery. That m
Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.
spxparticles Stream or a burst of image particles on HTML canvas Simple Javascript library for generating an infinine stream or a burst of image based
Little Alpine.js plugin to add a typewriter effect to any HTML element.
⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. 🚀 Installation CDN Include the following script tag in
Javascript library to animate images on hover.
Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
A tiny JavaScript library to enable CSS animations when user scrolls.
A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe
Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.
dom-slider It works like jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none. Uses CSS3 transitions and element.scrollHei
Simple and flexible, css only, content placeholder loading animation.
Placeholder loading Simple and flexible, css only, content placeholder loading animation. Demo https://zalog.github.io/placeholder-loading/ Take a loo
Motionia is a lightweight simplified on demand animation library
The Ultimate & smart JS animation library! Simple fast , flexible & easy to integrate. No need to write page long CSS Keyframes that consumes a lot of
Complete, flexible, extensible and easy to use page transition library for your static web.
We're looking for maintainers! Complete, flexible, extensible and easy to use page transition library for your static web. Here's what's new in v2. Ch
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4
Frame Animation Manager
Clockz.js (demo) Clockz is a Super-smooth Frame Animation manager to help you manage multiples animations in same time. Installation Just include this
Simple buttons you can use easily for your next project
Logo made by Harshit Sharma 💡 Simple buttons you can use easily for your next project. Contents Get started with sButtons Download CSS File CDN NPM U
CSS-based animations triggered by JS, defined in your stylesheet
Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
Experiment with motion blur website scrolling
Motion Blur Scrolling demo I've created this demo to see if it's possible to achieve more 'smooth' motion experience of scrolling and any other moveme
The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.
mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples
Simple scroll based text reveal animation library.
Simple scroll based text reveal animation library. ⛰️ DEMO Getting Started Using packge manager NPM Install textify using npm: npm install textify.js
Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize particles in the background.
Happy BirthDay JS Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize pa
A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.
Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h
Create scroll-based animation without JavaScript
Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position
Smooth scroll animation - vanilla JavaScript
Smooth Scroll Animation Using Vanilla JavaScript Provides smooth scroll functionality on clicking buttons with different eeasing properties. The "smoo
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma
Framework for HTML5 Canvas oriented 2D video games
Canvas Engine http://canvasengine.net Description Framework to create video games in HTML5 Canvas Get Started Follow the steps below to start: Downloa
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)
Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO
Label your form input like a boss with beautiful animation and without taking up space
#Label Better by Pete R. Label your form input like a boss with beautiful animation and without taking up space Created by Pete R., Founder of BucketL
📱📈An elegant, interactive and flexible charting library for mobile.
F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者
Simple yet flexible JavaScript charting for designers & developers
Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get
A lightweight graphic library providing 2d draw for Apache ECharts
ZRender A lightweight graphic library which provides 2d draw for Apache ECharts. Documentation https://ecomfe.github.io/zrender-doc/public/ License BS
JavaScript SVG parser and renderer on Canvas
canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders
A compact JavaScript animation library with a GUI timeline for fast editing.
Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. Check it out in this example: http://vorg.github.io/timeline.
Renders HTML into the browser's canvas
rasterizeHTML.js Renders HTML into the browser's canvas. See the API. Install $ npm install rasterizehtml Then include a script tag with node_modules
Generates an image from a DOM node using HTML5 canvas
DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java
Domvas implements the missing piece that connects the DOM and Canvas.
Domvas Overview Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint
Easily compose images together without messing around with canvas
merge-images Easily compose images together without messing around with canvas Canvas can be kind of a pain to work with sometimes, especially if you
📃 Fold up DOM elements like paper
OriDomi Fold up DOM elements like paper Dan Motzenbecker, MIT License @dcmotz Visit oridomi.com for examples, documentation and notes. Read the annota
Reveal CSS animation as you scroll down a page
WOW.js Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the set
CSS classes to move your DOM!
CSShake Some CSS classes to move your DOM! Live Demo Download Center You could download the complete csshake.css file or separated files for each shak
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
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
Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨
solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .
Attempt #2 at creating a game engine with Sciter.
JogoMaker Attempt #2 at creating a game engine with Sciter, with love and care. For Attempt #1, see this project, which was hastily thrown together as
📸 Generate image using HTML5 canvas and SVG
egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i
Animation library build on top of web animation API (WAAPI)
unanime.js Javascript animation library build on top of web animation API (WAAPI). Learn more about WAAPI: Web animation API Documentation Blog Daniel
The Javascript and canvas port of MarkovJunior : A Probabilistic Programming Language.
MarkovJunior.js MarkovJunior is a probabilistic programming language where programs are combinations of rewrite rules and inference is performed via c
🗿 Surreal - Hyper minimalist jQuery alternative
🗿 Mini jQuery alternative for devs who 💙 ergonomics. Use direct elements or arrays transparently! Locality of behavior (LoB) using me()! It's vanilla querySelector but better!
a 2D html canvas shooting game, implemented using vanilla JavaScript
EnemyShooting-Game a 2D single player enemy shooting game. It is an html canvas game, implemented using Vanilla JavaScript. Rules Killing each enemy w
Clone of the Fallout hacking mini-game, rendered into a browser canvas.
kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h
Simple Music Player App
Разработка музыкального плеера Разработка страницы музыкального плеера с возможностью поиска/выбора альбома для воспроизведения. Адаптивная верстка дл
Make configurable canvas easily with Canvafy.
Canvafy Make configurable canvas easily with Canvafy Installation npm i canvafy Documentation Rank Welcome And Leave Spotify Image Example of code con
Hexooor - Generate hexagonal Twitter NFT profile pictures client-side using HTML5 canvas
Hexooor - Generate hexagonal Twitter NFT profile pictures client-side using HTML5 canvas
This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.
Linear Vaporwave Three.js scene This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page. Demo Head over
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.
Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
Perfect pressure-sensitive drawing for both iOS and Android.
rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Inst
A r/place clone powered by websockets
canvas A r/place clone powered by websockets That's pretty much it. https://canvas.rto.run To build, run npm install and then node main.js to start th
Just some burds, jumpin' around in their own little world.
burds! 🐦 burds! is a weekend hack inspired by this fabulous tweet. It's a little web experiment with tiny animated birds jumping around their tiny li
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API Options • Browser compatibility • Limitations About Assuming you would like to record p5.js animations
This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.
Broprint.js The world's easiest, smallest and powerful visitor identifier for browsers. This package generates a unique ID/String for different browse
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).
spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo
Expertly and easily export GreenSock (GSAP) animation to video.
gsap-video-export Expertly and easily export GreenSock (GSAP) animation to video. gsap-video-export is a simple tool for exporting your GreenSock (GSA
A plugin that provides utilities for animation property.
tailwindcss-animation-property A plugin that provides utilities for animation property. Not only does the plugin provide the usual animation propertie
A web tool for you to record your face and turn it into a 3D animation file.
Web Face Capture A free, open-source web tool for you to record your face and turn it into a 3D animation file. Go to the website Allow camera permisi
Canvas rendering library, Sprite manipulation of canvas
el-canvas Canvas rendering library, Sprite manipulation of canvas hello world div id="app"div/div/div yarn add elem-canvas or npm i
Animation Academy teaches you CSS animations using the transition and animation properties.
Animation Academy Open Animation Academy Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.
Easy Effect 🖖 Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature 🌈 ease to use Anyone who want to create an animation
HTML5 Runner Game Made With Phaser.
"Hurry up Runner!" The Tunner Game "Hurry up!" Is A Small Funny Game Made With Phaser 3. This Game Is About Ordinary Salaryman That Hurries For His Jo
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.
Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply
HTML Canvas game for Vivatech Gamejam of March 2022.
Viva Tech Gamejam A HTML Canvas game made in 2 days for the Vivatech Gamejam of March 22. Requirements Nodejs and Yarn. If you're on MacOS and have Ho
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.
Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item
A small npm package that generates pretty identicons from string input.
HashprintJS HashprintJS is a small npm package written in TypeScript that generates customizable identicons. Provide a username, wallet address, IP ad
GreetHub - Dynamic greeting for your readme profile 😍😍
GreetHub - Dynamic greeting for your readme profile 😍😍
ChelseaJS - a Javascript library for creative, generative Coding
ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)