, 17 Comments

How To Create a Cool 3D Tilt Effect with Themify Builder

3D Titl Demo

3D Tilt is a fun new way for users to experience your website. Instead of having all your images and text static, 3D Tilt allows images and text to float and glide slightly as the user moves their cursor over each item.

Check out our demo to get a taste of 3D Tilt.

Then use the incredibly simple two-step process to apply it to your site.

3D Tilt Effect Tutorial:

Step 1: Choose the row that you wish to apply the 3D tilt effect on. Add tilt-3d in the "Additional CSS Class" field.

Titl 3D Code input field

Step 2: Then add the following Javascript code in Themify > General > Header Code:


<script>
jQuery(window).load(function(){
	var $ = jQuery;
	Themify.LoadAsync( 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js', function(){
		var $body = $('body');
		$( '.tilt-3d' ).each( function(){
			var $panel = $( this );
			var $pContent = $('.module-text', $panel),
				$img = $('.module-image', $panel);

			function initTilt() {
				TweenMax.set([$pContent, $img], { transformStyle: "preserve-3d" });

				$body.mousemove(function(e) {
					var sxPos = ( e.pageX - $panel.offset().left ) / $panel.width() * 100 - 100;
					var syPos = ( e.pageY - $panel.offset().top ) / $panel.height() * 100 - 100;
					TweenMax.to($pContent, 2, {
						rotationY: 0.03 * sxPos,
						rotationX: -0.03 * syPos,
						transformPerspective: 500,
						transformOrigin: "center center -400",
						ease: Expo.easeOut
					});
					TweenMax.to($img, 2, {
						rotationY: 0.03 * sxPos,
						rotationX: -0.03 * syPos,
						transformPerspective: 500,
						transformOrigin: "center center -200",
						ease: Expo.easeOut
					});
				});
			};

			initTilt();
		} );

	} );
});
</script>

We'd like to give a shoutout to Peter Barr for creating the original 3D Tilt script we used in this tutorial.

If you enjoyed this tutorial, please let us know in the comments below. We'd also love to hear about any future tutorials you'd like to see. Enjoy!