Grid to Fullscreen Animations with Three.js

Demos for the tutorial "Creating Grid to Fullscreen Animations with Three.js" by Daniel Velasquez.

Article on Codrops

Demo

Options

Options used to modify the effect and create variations:

constoptions={// Timing of the effect and vertice timing calculationtiming: {// How to calculate the timing of a verticetype: "sameEnd",// "sameEnd" | "sections"sections: 1,// NumberlatestStart: 0.5,// Normalized number// Duration of the effect in secondsduration: 1// Number of seconds},// Plane transformationstransformation: {type: "none",// "flipX" | "flipY" | etc...props: {}// transformation type especific props},// The plane activation used with timingactivation: {type: "topLeft"// "top" | "left" | "topleft" | etc...},// General seed for some effectsseed: 0,// Number// Easings for the effects tweenseasings: {toFullscreen: Power0.easeNone,// gsap EasePack easingtoGrid: Power0.easeNone// gsap EasePack easing},// Beizer controls for the flip interpolationflipBeizerControls: {c0: {x: 0.5,// Normalized Numbery: 0.5// Normalized Number},c1: {x: 0.5,// Normalized Numbery: 0.5// Normalized Number}}};

Credits

• three.js by Ricardo Cabello
• GSAP by Jack Doyle
• imagesLoaded by Dave DeSandro
• Images from Unsplash.com

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