GSAP Image Tilt Effect on Hover with Image Layers

GSAP Image Tilt Effect on Hover with Image Layers.markdown

GSAP Image Tilt Effect on Hover with Image Layers

A Pen by jim on CodePen.

License.

index.html

<div class="above-fold">
		<div class="hero-section" id="hero-section-a">
  <img src="http://videosmith.wpengine.com/wp-content/uploads/2016/06/tyler-movi.jpg" /></div>
		<div class="hero-section" id="hero-section-b">
  <img src="http://videosmith.wpengine.com/wp-content/uploads/2016/06/tyler-movi.jpg" /></div>
		<div class="hero-section" id="hero-section-c">
  <img src="http://videosmith.wpengine.com/wp-content/uploads/2016/06/tyler-movi.jpg" /></div>
</div>

script.js

jQuery(function( $ ){
  
  	var $body=$("body"),
	$heroA=$("#hero-section-a img"),
	$heroB=$("#hero-section-b img"),
	$heroC=$("#hero-section-c img");
	
	TweenMax.set( $heroA, { transformStyle: 'preserve-3d'  });
	TweenMax.set( $heroB, { transformStyle: 'preserve-3d'  });
	TweenMax.set( $heroC, { transformStyle: 'preserve-3d'  });
	
	$body.mousemove(function(e) {
		
		var sxPos =  e.pageX / $body.width()  * 100 - 50;
		var syPos =  e.pageY / $body.height() * 100 - 50;
		console.log("x:" + sxPos + ", y:" + syPos);
		TweenMax.to( $heroA, 1, { rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos, rotationZ: '-0.1', transformPerspective:500, transformOrigin:'center center' });
		TweenMax.to( $heroB, 1, { rotationY: 0.10 * sxPos, rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective:500, transformOrigin:'center center' });
		TweenMax.to( $heroC, 1, { rotationY: 0.15 * sxPos, rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective:500, transformOrigin:'center center' });

	});


});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

style.css

body {
    width: 100%;
   background-image: radial-gradient(circle farthest-side at center bottom, crimson, #003087 130%);
  overflow: hidden;
}
div {
    box-sizing: border-box;
    display: block;
}
.above-fold {
	position: relative;
	height: 100vh;
	overflow: hidden;
  width: 100%;
}
.hero-section {	
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	z-index: -1;
}
.hero-section img {
  position: absolute;
  opacity: 0.45;
  margin: auto;
  width: 150%;
	top: -25%; 
  right: -25%; 
  bottom: -25%; 
  left: -25%;
}