Based on:
https://tympanus.net/Development/AmbientCanvasBackgrounds/index3.html

Colorful Blur Background

I found this cool pen and recreat it in webflow :)

CodePen:
https://ykob.github.io/sketch-threejs/sketch/butterfly.html

Three js Butterfly

Found this cool Three.js Background on Codepen.

Source:
https://codepen.io/ykob/pen/aBrjaR

GLSL Hills

Found this on Github and created a interactive version.

Use:
You can preview the animation variants on this page.
If you want to use this effect in your Project, follow the steps:
1) Copy the Image wrapper (.wrapper)
2) Change the transform-origin of the images 


Inspired by:
https://github.com/codrops/RepetitionHoverEffect/

Repetition Hover Effect

I found this cool project on Codepen.

Source:
https://codepen.io/halvves/pen/VpMrPj

Reflecting WebGl Cube

I found this on Codepen and rebuild it in Webflow.
This is a high Performance Slider without the need to integrate a big script like Three.js.

ITS ONLY 28KB!

Source:
https://codepen.io/theresasogunle/pen/rNGZXWX

GLSL Slider

Hey ✌️
I found this Beautiful Work onCodePen and Rebuild it in Webflow.

Source: Darryl Huffman:
https://codepen.io/darrylhuffman/pen/gRZrpv

Interactive Black Hole

Found this on CodePen and Rebuilt it in Webflow (Also small fineTuning)

Source: Darryl Huffman:
https://codepen.io/learosema/pen/WNpGKpz

Liquid Metal

Inspired by this GitHub Repo
https://github.com/codrops/ColumnScroll/

100% Webflow
    0% Custom Code

A diffrent Grid

Hey this is a very nice Background animation with a really small file size 👌🏻

Github:
https://github.com/crnacura/AmbientCanvasBackgrounds
(I bundled the Js Files)

Change Background Color:
1) download the .txt fill
2) search for „backgroundColor“
3) change the hsla code
4) upload the new file
5) link the new script in the script tag

Swirl Animation

Pipeline Animation

Hey I found this cool Distortion Slider and rebuilt it in Webflow 😊

1) Clickable Arrows
2) Mousemove Interaction
3) Drag to Left or Right to change the Image


Setup:
1) Upload all your Images
2) Change the Links in the custom Code Section (before </body>)
3) Replace the Head- & Subline in the Section below
Thats it!

You also can change the Font in the „googleFonts“ settings 
(before </body>)


Source:
https://github.com/hmongouachon/rgbKineticSlider

Kinetic WebGl slider

Hey, I found this on GitHub and rebuilt it in Webflow 😊
Have fun with it

Source:
https://github.com/codrops/BackgroundScaleHoverEffect/

Clip Path Background Scale

Its a nice interactive Header Animation :)


Source:
https://github.com/Jeremboo/animated-mesh-lines

Animated Mesh Lines

Just a Tryout, have fun with it 🤙🏼

Staggered Animation     AnimeJS
Infinite Carousel             SplideJS
Link Delay                       customJS

Image Slider with Transition Effect

Banksy

Its soooo cool but at the moment just a case 😊
Feel free to finalize this project 👍🏻


++ Update 09.14.2021 ++
- Erase without click

++ Update 10.08.2021 ++
- Added a Touchable version

Cool Erase Effect

Three.js + Vanta.js

  el: "#inner",
  minHeight: 200.00,
  minWidth: 200.00,
  highlightColor: 0xffbb00,
  midtoneColor: 0xff2000,
  blurFactor: 0.5,
  speed: 1,
  zoom: 1


Source:
https://github.com/tengbao/vanta

Informations: 
✅    Good Browser Compatibility
❌    CPU Intensive (Use Only one Vanta.js Animation per Page)
📳    Mostly Good on Mobile

Jakob Wrs

About

About

About