185 Repositories
JavaScript animation-fill-mode Libraries
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
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
✨ Elegant portfolio template built on NextJS and Tailwind.
Obsidian ✨ Obsidian is a minimal and lightweight portfolio template built on NextJS and TailwindCSS. ✨ Setup Install the dependencies Edit content Cha
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
A TailwindCSS variant for class-based dark mode with CSS Modules.
A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules. If you've ever tried to use TailwindCSS dark mode wi
A pure html and css library for dark mode in your website.
Dark Mode A pure html and css library for dark mode in your website. Features It has a smooth setting and also it changes via system settings aswell.
Light-switch-bootstrap - Dark mode toggle for Bootstrap 5
💡 Light Switch for Bootstrap 5 Basic Bootstrap 5 custom checkbox to use night mode in your web site. Under the hood Switching to dark mode is done by
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
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
PDF.js Read Only is an additional readonly mode for PDF.js
PDF.js Read Only PDF.js Read Only is an additional readonly mode for PDF.js, a Portable Document Format (PDF) viewer that is built with HTML5 which is
Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pelo cmd.
fast-developer-express Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pel
This is a project based on redux of reactjs.
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
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
Adds Syntax Highlighting & Hint for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror.
CodeMirror-Mode-TiddlyWiki5 Adds Syntax Highlighting for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror, along with some other useful ed
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.
Securely collect browsing history over browsers.
Visited-CLI Securely collect browsing history over browsers. Getting started Here is the getting started guide. Firstly, clone the git, and change to
A graphical frontend for exploring your org-roam Zettelkasten
org-roam-ui: an org-roam frontend Org-Roam-UI is a frontend for exploring and interacting with your org-roam notes. Org-Roam-UI is meant a successor o
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
A pretty cool org-mode - interactive blog post tool
Radish A kinda-cool org-mode - interactive blog post tool written with and for Clojure(script). Here are two example posts created with this tool: Ra
Fill the boring catsalud covid vaccine form with a console command
vacunacovid-catsalud-autofullfill form Fill the boring catsalud covid vaccine form with a console command Manual use, pasting in the script in the con
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
It is a Discord bot whose goal is to make it easier for server owners to create a so-called Staff/Mode Application
Application Bot MeCodes Application Bot It is a Discord bot whose goal is to make it easier for server owners to create a so-called administration sub
Easily create css variables without the need for a css file!
Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u
Control the macOS dark mode from the command-line
dark-mode Control the macOS dark mode from the command-line Requires macOS 10.10 or later. macOS 10.13 or earlier needs to download the Swift runtime
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
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
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
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
🔱 Javascript's God Mode. No VM. No Bytecode. No GC. Just native binaries.
Javascript's God Mode: one language to rule them all. Code everything, everywhere, for everything, in JavaScript. No VM. No Bytecode. No packaging. No
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
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
🍿 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
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
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,
:black_medium_small_square:React Move | Beautiful, data-driven animations for React
React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin
Open source, production-ready animation and gesture library for React
An open source and production-ready motion library for React on the web. Framer Motion is an open source, production-ready library that's designed for
🇨🇭 A React renderer for Three.js
react-three-fiber react-three-fiber is a React renderer for threejs. npm install three @react-three/fiber Why? Build your scene declaratively with re-
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to
A spring that solves your animation problems.
React-Motion import {Motion, spring} from 'react-motion'; // In your render... Motion defaultStyle={{x: 0}} style={{x: spring(10)}} {value = div
✌️ A spring physics based React animation library
react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough
:fireworks:Interactive Online Platform that Visualizes Algorithms from Code
Algorithm Visualizer Algorithm Visualizer is an interactive online platform that visualizes algorithms from code. Learning an algorithm gets much easi
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end
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
🐿 Super easy and lightweight(3kb) JavaScript animation library
Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf
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
Animation library that mimics CSS keyframes when scrolling.
Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B
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
CSS3 backed JavaScript animation framework
Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be
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
The motion graphics toolbelt for the web
mo · js – The motion graphics toolbelt for the web. Intro mo · js is a javascript motion graphics library that is a fast, retina ready, modular and op
Accelerated JavaScript animation.
Velocity beta NPM: npm install velocity-animate@beta Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r
JavaScript animation engine
anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP
🍿 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