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:

	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

		} );

	} );

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!

Read More

How to Make a Fullcover Row Background with Themify Builder

Fullcover Row Background tutorial

Instead of using a regular white background for your website, why not try using an image that fully covers your page? We think it could help create a minimal looking site that is both sleek and modern. To achieve this look, you'll need to insert some custom code – but fear not, for we've provided easy step-by-step instructions.


Read More

How to Set Font Styling for Mobile, Tablet, & Desktop with the Builder Responsive Styling

In our second instalment of our tutorial series on responsive styling, we will showcase how to set specific fonts for mobile tablet, and desktop. By default, all paragraph and heading font styling are responsive across resolutions. This means that when you resize your browser it’ll shrink automatically to ensure your font fits the resolution you’re viewing it in. (more…)

Read More

Learn How to Reorder Columns on Tablet or Mobile with Column Direction

Responsive styling or responsive web design is an approach that makes websites render well on a variety of devices and screen sizes. It is becoming an increasingly important feature for all websites as mobile traffic now accounts for more than half of total internet traffic. (more…)

Read More

Learn How To Add Animation with the Themify Builder

Similar to beautiful powerpoint presentations, you can also add eye-catching animation effects on various elements on your page with the Themify Builder. This is great when you want to draw attention to a call-to-action message such as a sign-up now button. Or when you want to showcase your content as users scrolls through your site. The Builder animation also works across various devices and resolutions, so you'll see it apply on both tablets and mobile.

For this video tutorial, we're going to show you how you can do add animation on both rows and modules step-by-step.

Read More

New Scroll To Row Video Tutorial

New Scroll to Row Video Tutorial! Following many requests from the Themify community, we’ve decided to launch a new video tutorial for the Scroll to Row anchor feature. To refresh your memory, Scroll to Row allows a website user to click an item on the header and be scrolled down to the relevant section. (more…)

Read More

Spring Sale - Get 30% off with code SPRING, or $100 off Lifetime Club with code SPRINGLIFE!