GSAP 3D parallax Demo

3D rotation based on mouse position of a series of square images to create a parallax effect

by LĂ©o Durand

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js"></script>
 <div class="3D_container" id="red">

  </div>
   <div class="3D_container" id="blue">

  </div>
     <div class="3D_container" id="green">

  </div>

SCSS

body {
    overflow: hidden;
    background-color:darkgray;
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height:100%;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -webkit-perspective: 10000px;
}

.3D_container {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: translateZ(0px);
    -moz-transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
}
#red {
    left:10%;
    top:10%; 
    height: 337px;
    width: 300px;
    background:red;
    position: absolute;
}
#blue {
    left:50%;
    top:50%; 
    height: 337px;
    width: 300px;
    background:blue;
    position: absolute;
}
#green {
    left:50%;
    top:10%; 
    height: 337px;
    width: 300px;
    background:green;
    position: absolute;
}

JavaScript

$(document).ready(function() {

	var request = null;
	var mouse = { x: 0, y: 0 };
	var cx = window.innerWidth / 2;
	var cy = window.innerHeight / 2;

	$('body').mousemove(function(event) {
  
		mouse.x = event.pageX;
		mouse.y = event.pageY;
	
		cancelAnimationFrame(request);
		request = requestAnimationFrame(update);	
	});

	function update() {
  
		dx = mouse.x - cx;
		dy = mouse.y - cy;

		tiltx = (dy / cy);
		tilty = - (dx / cx);
		radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
		degree = (radius * 20);
		TweenLite.to(".3D_container", 1, {transform:'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)', ease:Power2.easeOut});
	}
	
	$(window).resize(function() {
		cx = window.innerWidth / 2;
		cy = window.innerHeight / 2;
	});	
});