Skip to content
A configurator for creating unique fullscreen image animations with WebGL distortion effects.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css initial commit Sep 6, 2019
img initial commit Sep 6, 2019
js query fixe Sep 6, 2019
.gitignore initial commit Sep 6, 2019
README.md Title/desc fix Sep 7, 2019
configurator_featured.jpg initial commit Sep 6, 2019
favicon.ico initial commit Sep 6, 2019
index.html initial commit Sep 6, 2019
index2.html initial commit Sep 6, 2019
index3.html initial commit Sep 6, 2019
index4.html initial commit Sep 6, 2019
index5.html initial commit Sep 6, 2019
index6.html initial commit Sep 6, 2019

README.md

Configurator for Creating Custom WebGL Distortion Effects

A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js. By Daniel Velasquez.

Fullscreen image animation configurator

Article on Codrops

Demo

Options

Options used to modify the effect and create variations:

const options = {
  // Timing of the effect and vertice timing calculation
  duration: 1, // Seconds of the animation
  easings: {
    toFullscreen: Power0.easeNone, // gsap EasePack easing
    toGrid: Power0.easeNone // gsap EasePack easing
  },
  timing: {
    // How to calculate the timing of a vertice
    type: "sameEnd", // "sameEnd" | "sections"
    props: {} // Type specific props
  },
  // Plane transformations
  transformation: {
    type: "none", // "flipX" | "sin" | "simplex" etc...
    props: {} // Type specific props
  },
  // The plane activation used with timing
  activation: {
    type: "sides", // "sides" | "corners" | "radial" | etc...
    props: {} // Type specific props
  },
  // General seed for some effects
  seed: 0, // Number
  randomizeSeed: null, // "itemUnique" | "InOutUnique" | "tweenUnique"
  // Easings for the effects tweens
  debug: {
    activation: false // Display the activation as color
  }
};

Credits

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.

Misc

Follow Daniel: Twitter, Codepen, CodeSandbox, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2019

You can’t perform that action at this time.