Web Effect

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Access the most powerful time series database as a service
  • particles-bg

    React particles animation background component

    particles-bg - React component for particles backgrounds

  • particles-bg-vue

    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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • sparticles

    JavaScript Particles in Canvas ~~ Fast, Lightweight, High Performance.

    sparticles - Vanilla particles which can be used in a background or in a container, very fast and lightweight.

  • jquery.ripples

    Add a water ripple effect to your background using WebGL.

    jquery.ripples - Add a water ripple effect to your background using WebGL.

  • MorphingBackgroundShapes

    A decorative website background effect where SVG shapes morph and transform on scroll.

    MorphingBackgroundShapes - A decorative website background effect where SVG shapes morph and transform on scroll..

  • SegmentEffect

    Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

    SegmentEffect - Background image segment effect as seen on [Filippo Bello's Portfolio].

  • jquery-bgswitcher

    Switch the background-image with using effect.

    jquery-bgswitcher - Switch the background-image with using effect.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • BackgroundScaleHoverEffect

    Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

    BackgroundScaleHoverEffect - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

  • ImageGridMotionEffect

    A motion hover effect for a background grid of images.

    ImageGridMotionEffect - A motion hover effect for a background grid of images..

  • jquery.adaptive-backgrounds.js

    🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.

    jquery.adaptive-backgrounds.js - A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

  • fixed-background-effect - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.

  • jquery-warpdrive-plugin

    Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

    jquery-warpdrive-plugin - Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

  • react-mouse-particles

    A mouse particle effect react component

    mouse-particles - AboutA mouse particle effect react component

  • ImageTrailEffects

    A set of effects for mouse-following image trails that show a random series of images.

    ImageTrailEffects - A set of effects for mouse-following image trails that show a random series of images.

  • webgl-mouseover-effects

    Demos for the tutorial on how to achieve an interactive mouseover/hover effect

    webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect

  • cursor-effects

    Old-school cursor effects for your browser built with modern JavaScript

    cursor-effectss - Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

  • mouse-text-shadow

    CSS shadow effect & JavaScript mouse move

    mouse-text-shadow - CSS shadow effect & JavaScript mouse move

  • vuepress-plugin-cursor-effects

    :tada: Add a cute click effect to your mouse in your vuepress!

    vuepress-plugin-cursor-effects - Add a cute click effect to your mouse in your vuepress!

  • jquery-animate3d

    jQuery plugin that gives elements a 3d mouse over effect!

    jquery-animate3d - jQuery plugin that gives elements a 3d mouse over effect

  • magnetic-hover

    magneticHover lets you trigger the hover effect on the element when the cursor is near it, but not over it yet

    magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

  • react-tilt

    👓 Parallax tilt hover effect for React JS - tilt.js

    react-tilt - Parallax tilt hover effect for React JS - tilt.js

  • hover3d

    Simple jQuery plugin for 3d Hover effect

  • Tarjetas-3D-con-HTML5-y-CSS3

    Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3

    Tarjetas-3D - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3

  • 3dtransforms

    :package: Introduction to CSS 3D transforms

    3dtransforms-3D - Intro to CSS 3D transforms

  • Makisu

    CSS 3D Dropdown Concept

    Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.

  • pure-css-super-mario

    Pure CSS animated 3D Super Mario Icon

    super-mario - Pure CSS animated 3D Super Mario Icon

  • CSS3D.js

    CSS 3D renderer for Three.js.

    CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.

  • 3D-CSS-Solar-System

    Solar System data visualisation done in HTML/CSS and a bit of Javascript.

    Solar-System - Solar System data visualisation done in HTML/CSS and a bit of Javascript.

  • react-spring

    ✌️ A spring physics based React animation library

    React spring - Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.

  • css-space-shooter

    An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms

    css-space-shooter - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms

  • photon

    CSS 3D Lighting Engine (by thomasxiii)

    photon - CSS 3D Lighting Engine photon.attasi.com

  • gl-css3d

    sync CSS 3D transformations to a WebGL scene

    gl-css3d - Synchronize CSS 3D transformations to a WebGL scene

  • ImageTiltEffect

    A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

    ImageTiltEffect - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background

  • Magnifier.js

    Javascript library enabling magnifying glass effect on an images

    Magnifier - Javascript library enabling magnifying glass effect on an images

  • gl-react-image-effects

    [WIP] universal image app that uses different gl-react components

    gl-react-image-effects - universal image app that uses different gl-react components

  • StickyImageEffect

    A sticky image effect for a slideshow inspired by ultanoir's website.

    StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website.

  • HeatDistortionEffect

    Animated haze distortion effect for images and text, with WebGL.

    HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL

  • ImageDraggingEffects

    A set of playful dragging effects for images using various techniques.

    ImageDraggingEffects - A set of playful dragging effects for images using various techniques..

  • FullImageReveal

    A full image reveal effect with fancy thumbnail sliding.

    FullImageReveal - A full image reveal effect with fancy thumbnail sliding.

  • diaporama

    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.

  • FollowCursor

    👀 Rotate elements to create a following effect

    FollowCursor - Rotate elements to create a following effect

  • react-native-kenburns-view

    KenBurns Image Effect for React Native Applications

    react-native-kenburns-view - KenBurns Image Effect for React Native Applications

  • vintageJS

    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

  • ThumbnailGridExpandingPreview

    A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

    ThumbnailGridExpandingPreview - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

  • gridder

    A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. (by oriongunning)

    gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..

  • MotionTransitionEffect

    A speedy motion transition effect for an image slideshow.

    MotionTransitionEffect - A speedy motion transition effect for an image slideshow.

  • tiltedpage_scroll

    Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

    tiltedpage_scroll - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

  • power-mode-input

    PowerModeInput can make your text input box more compelling

    power-mode-input - PowerModeInput can make your text input box more compelling

  • typewriterjs

    A simple yet powerful native javascript plugin for a cool typewriter effect.

    typewriterjs - A simple yet powerful native javascript plugin for a cool typewriter effect.

  • t.js

    ⌨️ Lightweight $.Hypertext.Typewriter (by mntn-dev)

    t.js - Lightweight $.Hypertext.Typewriter

  • shuffle-text

    "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

    shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

  • react-typewriter

    A React component for creating typing animations.

    react-typewriter - A React component for creating typing animations.

  • t-writer.js

    Native typewriter effect, without compromises or dependencies.

    t-writer.js - Native typewriter effect, without compromises or dependencies.

  • malarkey

    :keyboard: Simulate a typewriter effect in vanilla JavaScript.

    Malarkey - Simulate a typewriter effect in vanilla JavaScript.

  • tinytyper

    ⌨️ A tiny library for creating a typing effect on specified text element.

    tinytyper - A tiny library for creating a typing effect on specified text element.

  • jquery.typer.js

    The typewriter effect

    jquery.typer - The typewriter effect

  • Phaser-typewriter

    A phaser helper for the typewriter effect

    Phaser-typewriter - A phaser helper for the typewriter effect

  • transitions

    Transition effect for Cocos Creator (by 2youyou2)

    transitions - Transition effect for Cocos Creator

  • ModalWindowEffects

    A set of experimental modal window appearance effects with CSS transitions and animations.

    ModalWindowEffects - A set of experimental modal window appearance effects with CSS transitions and animations.

  • CSS3-hover-transition-effect

    CSS3-hover-transition-effect

    CSS3-hover-transition-effect - CSS3-hover-transition-effect | Cipher trick

  • Html_Transition_Effect_Demo

    Transition_Effect_Demo

    Html_Transition_Effect_Demo - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.

  • GlitchSlideshow

    A slideshow that uses a CSS glitch effect for slide transitions.

    GlitchSlideshow - A slideshow that uses a CSS glitch effect for slide transitions.

  • image-mask-effect

    An immersive transition effect powered by image masks and CSS transforms.

    image-mask-effect - An immersive transition effect powered by image masks and CSS transforms.

  • ngView-animation-effects

    Demonstration of different animation effects with AngularJS ngView directive.

    ngView-animation-effects - Demonstration of different animation effects with AngularJS ngView directive.

  • WobblySlideshowEffect

    The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

    WobblySlideshowEffect - The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

  • RainEffect

    Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

    RainEffect - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

  • aframe-rain

    A-Frame Rainfall effect component

    aframe-rain - aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing technique with good performance.

  • matrix-rain

    The famous Matrix rain effect of falling green characters in a terminal

    matrix-rain - The famous Matrix rain effect of falling green characters in a terminal

  • Rainbow.js

    A text effect jquery plugin

    Rainbow - A text effect jquery plugin (tested with jQuery 1.6.3)

  • Snowstorm

    Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

    Snowstorm - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

  • react-snowstorm

    A Snow Effect component for React.

    snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood.

  • react-snow-effect

    react-snow-effect - react-snow-effect.

  • snowy

    HTML5 snow effect

    snowy - A HTML5 snow effect with random generated snow flakes.

  • the-matrix-effect

    The incredible effect of rain of letters in the style of the Matrix trilogy.

    the-matrix-effect - The incredible effect of rain of letters in the style of the Matrix trilogy.

  • smoke.js

    Small but good javascript smoke effect 🌬💨 (by bijection)

    smoke.js - Small but good javascript smoke effect

  • MagneticButtons

    A set of buttons with a magnetic interaction and a hover effect.

    MagneticButtons - A set of buttons with a magnetic interaction and a hover effect.

  • ElasticProgress

    Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

    ElasticProgress - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot

  • vue-particle-effect-buttons

    A bursting particles effects buttons component ✨💥❄️🌋

    vue-particle-buttons - A bursting particles effects buttons component

  • nativescript-shine-button

    NativeScript plugin that add shine effect to your button.

    nativescript-shine-button - NativeScript plugin that add shine effect to your button.

  • react-parallax-button

    Bring your react buttons to next level with parallax effect.

    react-parallax-button - Bring your react buttons to next level with parallax effect.

  • RippleButton

    A Kony Visualizer reusable component of a button with a Material Theme ripple effect.

    RippleButton - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.

  • ParticleEffectsButtons

    A little library that can be used for bursting particles effects on buttons and other elements

    ParticleEffectsButtons - A little library that can be used for bursting particles effects on buttons and other elements

  • Asset-Loading-Effects

    Loading effects for assets including some built in animated reveals

    Asset-Loading-Effects - Loading effects for assets including some built in animated reveals

  • fakeLoader.js

    fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

    fakeLoader - fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

  • LoadEffect

    Distributed Load Testing in Javascript-like Scripting Language

    LoadEffect - Distributed Load Testing in Javascript-like Scripting Language.

  • three-dots

    🔮 CSS loading animations made with single element.

    three-dots - 🔮 CSS loading animations made by single element.

  • css-page-loader

    Lightweight CSS loading animations to use when page loads.

    css-page-loader - Lightweight CSS loading animations to use when page loads

  • Audio-Input-Effects

    Live input Web Audio effects

    Audio-Input-Effects - Live Audio Input effects

  • beez

    100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

    beez - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

  • soundbank-reverb

    Simple Web Audio API based reverb effect.

    soundbank - Simple Web Audio API based reverb effect.

  • SoundEffectManager

    A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API

    SoundEffectManager - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API

  • soma-fm-player

    This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

    soma-fm-player - SomaFM Music Player Web-App

  • canvas-video-effects

    Live Image Processing w/ getUserMedia() & Web Workers

    canvas-video-effects - Live Image Processing w/ getUserMedia() & Web Workers

  • chroma-cam

    Green screen effect in your webcam

    chroma-cam - Green screen effect in your webcam

  • webcam-effects

    Webcam Effects in Three.js

    webcam-effects - Webcam Effects in Three.js

  • JS---Webcam-effects

    Javascript 30 - Webcam effects

    JS-Webcam-effects - Webcam effects

  • expo-chroma-key-camera

    Live green-screen effect with Expo and THREE.js

    expo-chroma-key-camera - Live green-screen effect with Expo and THREE.js

  • ChuckClose-SparkAR

    A Chuck Close Shader effect in Spark AR

    ChuckClose-SparkAR - A simple example how to use Visual Shaders with JS in Spark AR.

  • Odoo

    Javascript and SVG odometer effect library with motion blur

    bounty - Javascript and SVG odometer effect library with motion blur

  • DistortedLinkEffects

    Some ideas for decorative link distortion effects using SVG filters.

    DistortedLinkEffects - Some ideas for decorative link distortion effects using SVG filters

  • ui-snippets-menu-animations

    Four different menu animations for menu button toggle between hamburger, cross and back icon.

    menu-animations - Four different menu animations for menu button toggle between hamburger, cross and back icon.

  • circle-svg-animation

    circle-svg-animation - Circle SVG Animation

  • OrganicShapeAnimations

    Some shape morphing hover effects on images using SVG clipPath.

    OrganicShapeAnimations - Some shape morphing hover effects on images using SVG clipPath.

  • FancyLetterAnimation

    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/).

    FancyLetterAnimation - An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Powered by Julian Garnier's anime.js.

  • Svg-IsometricCityAnimation

    This is a simple svg isometric city animation with GSAP

    IsometricCityAnimation - This is a simple svg isometric city animation with GSAP

  • lazy-line-painter

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

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

  • jquery-drawsvg

    Lightweight, simple to use jQuery plugin to animate SVG paths

    jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths

  • svg-animation

    The Illusion of Life: An SVG Animation Case Study

    svg-animation - The Illusion of Life: An SVG Animation Case Study

  • fireworks.js

    Particles engine in javascript

    fireworks - fireworks Particles engine in javascript

  • fireworks.js

    A silly JavaScript animation experiment, originally written in 2005. (by scottschiller)

    silly fireworks - A silly JavaScript animation experiment, originally written in 2005.

  • fireworks-webgl

    WebGL + Web Audio API = Sound-driven fireworks!

    fireworks-webgl - WebGL + Web Audio API = Sound-driven fireworks!

  • fireworks

    WebGL Fireworks in VR (by Lallassu)

    fireworks-vr - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html

  • javascript-skyrocket

    Design and Display fireworks on HTML canvas with Skyrocket.js

    skyrocket - Design and Display fireworks on HTML canvas with Skyrocket.js

  • js-fireworks

    cool-fireworks - a particle fireworks effect.

  • lottie-sample

    Demo after effect animation on web using Lottie

    lottie-sample - Demo after effect animation on web using Lottie

  • webEffects

    webEffects - jQuery Parallax is a script that simulates the parallax effect as seen

  • MobileComponent

    dynamic effect component on mobile web

    MobileComponent - dynamic effect component on mobile web

  • frosted-glass

    ❄️ Add a live frosted glass blur effect over any type of web content, including text.

    frosted-glass - Add a live frosted glass blur effect over any type of web content, including text.

  • pickout

    Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

    pickout - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

  • dissolve-generator

    Cool 2D dissolve effect generator

    dissolve-generator - Cool 2D dissolve effect generator

  • redux-reducer-side-effects

    Easy to follow side effect library for redux reducers

    redux-reducer-side-effects - Easy to follow side effect library for redux reducers

  • put.io.starry.night

    The Starry Night animation in put.io's hero banner

    starry.night - The Starry Night animation in put.io's hero banner

  • bad-tv-shader

    BadTV Effect for Three.js

    bad-tv-shader - Simulates a bad TV via horizontal distortion and vertical roll.

  • map-effects-100

    Cool tips to design UI/UX on Leaflet maps.

    map-effects-100 - Cool tips to design UI/UX on Leaflet maps.

  • SVG-Circus

    Create cool animated SVG spinners, loaders and other looped animations in seconds

    svg-Circus - Create cool animated SVG spinners, loaders and other looped animations in seconds.

  • jsfx

    Javascript Sound Effect Generator

    jsfx - This is a JavaScript library for sound effect generation and is supported on most current browsers.

  • aquarelle

    :octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

    aquarelle - Aquarelle is a watercolor effect component.

  • glitch.js

    A glitched effect for DOM elements

    glitch - A glitched effect for DOM elements.

  • spread

    Experiment: CSS3D plane/fold effect

    spread - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.

  • doom-fire-algorithm

    Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!

    firealgorithm - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.

  • MMM-EyeCandy

    Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!

    EyeCandy - Animated images that are superficially attractive and entertaining but intellectually undemanding.

  • animatelo

    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 - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects

  • Snap.svg

    The JavaScript library for modern SVG graphics.

    Snap.svg - The JavaScript library for modern SVG graphics.

  • svg.js

    The lightweight library for manipulating and animating SVG

    Svg.js - The lightweight library for manipulating and animating SVG.

  • vivus

    JavaScript library to make drawing animation on SVG

    Vivus - Library to make drawing animation on SVG.

  • walkway

    An easy way to animate SVG elements.

    Walkway - An easy way to animate SVG elements.

  • raphael

    JavaScript Vector Library

    Raphael - JavaScript Vector Library.

  • bonsai

    BonsaiJS is a graphics library and renderer (by uxebu)

    Bonsai - BonsaiJS is a graphics library and renderer.

  • GreenSock-JS

    GreenSock's GSAP JavaScript animation library (including Draggable).

    GSAP - JavaScript animation library.

  • TweenJS

    A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

    TweenJS - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.

  • Mo.js

    The motion graphics toolbelt for the web

    Mojs - The motion graphics toolbelt for the web.

  • move.js

    CSS3 backed JavaScript animation framework

    Move.js - CSS3 backed JavaScript animation framework.

  • velocity

    Accelerated JavaScript animation.

    Velocity - Accelerated JavaScript animation.

  • animateplus

    A+ animation module for the modern web

    Animateplus - A+ animation module for the modern web.

  • animatic

    CSS animations engine

    Animatic - CSS animations engine.

  • just-animate

    Making Animation Simple

    Just Animate - Making Animation Simple.

  • core

    :rice: Interactive UI animation engine for the Web. Core renderer for Haiku Animator. (by HaikuTeam)

    Haiku Core - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.

  • between.js

    Lightweight JavaScript (ES6) tweening engine

    Between.js - Lightweight JavaScript (ES6) tweening engine.

  • progressbar.js

    Responsive and slick progress bars

    Progressbar.js - Responsive and slick progress bars.

  • bezier-easing

    cubic-bezier implementation for your JavaScript animation easings – MIT License

    Bezier easing - Cubic-bezier implementation for your JavaScript animation easings.

  • glsl-easings

    Robert Penner's easing functions in GLSL, available as a module for glslify.

    Glsl easings - Easing functions in GLSL.

  • es6-tween

    ES6 version of tween.js

    ES6-tween - ES6 version of tween.js.

  • animate.css

    🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. [Moved to: https://github.com/animate-css/animate.css] (by daneden)

    Animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.

  • motion-ui

    💎 The powerful Sass library for creating CSS transitions and animations

    Motion-ui - The powerful Sass library for creating CSS transitions and animations.

  • EaselJS

    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.

  • fabric.js

    Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

    Fabric.js - JavaScript canvas library with animation support.

  • paper.js

    The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

    Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.

  • Konva

    Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

    Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

  • two.js

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

    Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.

  • ocanvas

    JavaScript library for object-based canvas drawing.

    Ocanvas - JavaScript library for object-based canvas drawing.

  • curtainsjs

    curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

    Curtainsjs - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.

  • hover-effect

    Javascript library to draw and animate images on hover

    Hover-effect - JavaScript library to draw and animate images on hover.

  • pts

    A library for visualization and creative-coding

    Pts.js - Pts is a typescript/javascript library for visualization and creative-coding.

  • tsParticles

    tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

    tsParticles - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.

  • aos

    Animate on scroll library

    AOS - Animate on scroll library.

  • laxxx

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

    Laxxx - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!

  • WOW

    Reveal CSS animation as you scroll down a page

    Wow - Reveal CSS animation as you scroll down a page.

  • scrollreveal

    Animate elements as they scroll into view. [Moved to: https://github.com/jlmakes/scrollreveal] (by scrollreveal)

    Scrollreveal - Animate elements as they scroll into view.

  • ScrollMagic

    The javascript library for magical scroll interactions.

    ScrollMagic - The JavaScript library for magical scroll interactions.

  • motus

    Animation library that mimics CSS keyframes when scrolling.

    Motus - Animation library that mimics CSS keyframes when scrolling.

  • sal

    🚀 Performance focused, lightweight scroll animation library 🚀

    Sal - Performance focused, lightweight scroll animation library.

  • typed.js

    A JavaScript Typing Animation Library

    Typed.js - A JavaScript Typing Animation Library.

  • typebot

    Javascript library for typing animation

    Typebot - JavaScript library for typing animation.

  • Blotter

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

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

  • framer/motion

    Open source, production-ready animation and gesture library for React

    Motion - Open source, production-ready animation and gesture library for React.

  • svgr

    Transform SVGs into React components 🦁

    SVGR - Transform SVGs into React components.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts