LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	

Gooey!

Gooey!

Gooey!

Gooey!

CSS
.pane,
canvas {
  position: absolute;
}

#top {
  color: white;
}

.pane.hidden {
  height: 0px;
  overflow: hidden;
}

.overlay-wrapper {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

h1 {
  display: table;
  margin: 0 auto;
  font-family: 'Montserrat';
  font-size: 8vw;
  text-transform: uppercase;
}
JS
/* 
  Only tested in Chrome!

  Checkout the commented and unminified code in the github repo here:
  https://www.github.com/hparton/gooey-transition
*/

!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g.65&&(j.config.maxRange=m(a,.65,1,200,0))});window.onload=function(){j.init(),k.bounce(200)},window.addEventListener("resize",function(a){j.resize(window.innerWidth,window.innerHeight)})},{"./animation":1,"./gooeyLine":2}],4:[function(a,b,c){"use strict";Object.defineProperty(c,"__esModule",{value:!0});var d=function(){for(var b=256,c=b-1,d=1,e=1,f=[],g=0;g
Host Instantly Drag and Drop Website Builder

 

Description

Using simplex noise and canvas bezier curves to create a gooey transition effect.
Term
Mon, 11/27/2017 - 22:05

Related Codes

Pen ID
Pen ID
Pen ID