Git Product home page Git Product logo

gridtofullscreenanimations's Introduction

Grid to Fullscreen Animations with Three.js

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

Grid to Fullscreen Animations

Article on Codrops

Demo

Options

Options used to modify the effect and create variations:

const options = {
  // Timing of the effect and vertice timing calculation
  timing: {
    // How to calculate the timing of a vertice
    type: "sameEnd", // "sameEnd" | "sections"
    sections: 1, // Number
    latestStart: 0.5, // Normalized number
    // Duration of the effect in seconds
    duration: 1 // Number of seconds
  },
  // Plane transformations
  transformation: {
    type: "none", // "flipX" | "flipY" | etc...
    props: {} // transformation type especific props
  },
  // The plane activation used with timing
  activation: {
    type: "topLeft" // "top" | "left" | "topleft" | etc...
  },
  // General seed for some effects
  seed: 0, // Number
  // Easings for the effects tweens
  easings: {
    toFullscreen: Power0.easeNone, // gsap EasePack easing
    toGrid: Power0.easeNone // gsap EasePack easing
  },
  // Beizer controls for the flip interpolation
  flipBeizerControls: {
    c0: {
      x: 0.5, // Normalized Number
      y: 0.5 // Normalized Number
    },
    c1: {
      x: 0.5, // Normalized Number
      y: 0.5 // Normalized Number
    }
  }
};

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

gridtofullscreenanimations's People

Contributors

anemolo avatar crnacura avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.