LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Page transitions with GSAP

Based on Codrops

CSS
@import url(https://fonts.googleapis.com/css?family=Raleway:200);

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #2C3E50;
}

.Pt {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow-x: hidden;
}

.Pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.Pt-page.is-current {
  visibility: visible;  
}

.Pt-page.is-onTop {
  z-index: 1;
}

.Pt-page--one {
  background-color: #E74C3C;
}

.Pt-page--two {
  background-color: #1ABC9C;
}

.Pt-btn {
  position: relative;
  z-index: 2;
  width: 200px;
  padding: 10px;
  top: 200px;
  left: 50%;
  margin-left: -100px;
  margin-bottom: 20px;
  
  display: block;
}


.Pt-pageTitle {
  font-family: 'Raleway';
  font-weight: 200;
  font-size: 48px;
  text-align: center;
  margin: 80px auto;
}
JS
var btns        = document.querySelectorAll('.js-btn');
var duration    = .8;
var isAnimating = false;

addEventListenerList(btns, 'click', function (e) {
  if(!isAnimating) {
    switchPages(e.currentTarget.dataset.out, e.currentTarget.dataset.in);
  }
});


function switchPages(outFn, inFn) {
  isAnimating = true;
  window[outFn](document.querySelector('.is-current'));
  window[inFn](document.querySelector('.js-page:not(.is-current)'));
}


function scaleUp(el) {
  addClass(el, 'is-current');
  TweenLite.fromTo(el, duration, {
    opacity: 0,
    scale: .8
  }, {
    opacity: 1,
    scale: 1,
    clearProps: 'opacity, scale'
  });
}

function scaleDown(el) {
  addClass(el, 'is-current');
  TweenLite.fromTo(el, duration, {
    opacity: 1,
    scale: 1
  }, {
    opacity: 0,
    scale: .8,
    clearProps: 'opacity, scale',
    onComplete: function () {
      removeClass(el, ['is-onTop', 'is-current']);
    }
  });
}

function moveToRight(el) {
  addClass(el, ['is-onTop', 'is-current']);
  TweenLite.fromTo(el, duration, {
    xPercent: 0
  }, {
    xPercent: -100,
    clearProps: 'xPercent',
    onComplete: function () {
      removeClass(el, ['is-onTop', 'is-current']);
      isAnimating = false;
    }
  });
}

function moveFromRight(el) {
  addClass(el, ['is-onTop', 'is-current']);
  TweenLite.fromTo(el, duration, {
    xPercent: 100
  }, {
    xPercent: 0,
    clearProps: 'xPercent',
    onComplete: function () {
      removeClass(el, 'is-onTop');
      isAnimating = false;
    }
  });
}


// utils
function addClass(el, className) {
  [].concat(className).forEach(function (n) {
    el.classList.add(n);
  });
}

function removeClass(el, className) {
  [].concat(className).forEach(function (n) {
    el.classList.remove(n);
  });
}

function addEventListenerList(list, event, fn) {
  for (var i = 0, len = list.length; i < len; i++) {
    list[i].addEventListener(event, fn, false);
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

A coworker asked me to make a proof of concept of page transitions like on codrops (http://tympanus.net/Development/PageTransitions/) using GSAP with the CSS plugin.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID