A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Overview

Three.js Experiment - Vanishing Suzanne

Preview Vanishing Suzanne

Demo version

Get started

First, you need nodejs on your computer to build the assets.

Install dependencies:

npm install

Then run the local server script:

npm run watch

To build assets:

npm run build

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Credits

Misc

Twitter, Instagram

You might also like...

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

May 6, 2022

🧞‍♂️ Your magic WebGL carpet

🧞‍♂️  Your magic WebGL carpet

⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) 🧞‍♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc

Dec 30, 2022

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.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Jul 27, 2022

Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Dec 30, 2022

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

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

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

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

Add a retro/vintage effect to images using the HTML5 canvas element

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

Dec 25, 2022

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

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) The concept An Hive i

Dec 16, 2022
Owner
Arno Di Nunzio
Frontend developer at Reed.
Arno Di Nunzio
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

Hisami Kurita 23 Oct 28, 2022
Very simple threejs boilerplate in VanillaJS to start your projects. There is only a basic scene, a load model method and a simple webpack.

Ektogamat ThreeJS Boilerplate by Anderson Mancini Introduction This is a three.js starter project with only 120 lines. But why create another threejs

Anderson Mancini 524 Jan 3, 2023
Jeu d'énigmes sur la cathédrale d'Amiens avec ThreeJS

TranseptSud -Cath. Amiens Jeu à la 1ère personne sous forme d'énigmes pour faire découvrir une anecdote sur la cathédrale d'Amiens. About The Project

Safi Hanifa 1 Dec 21, 2021
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

Codrops 1.2k Jan 1, 2023
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

lindelof 561 Dec 24, 2022
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

lindelof 206 Dec 24, 2022
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

Simon Goellner 171 Dec 29, 2022
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
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

Tuomo Kulomaa 3 Dec 3, 2020
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.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022