Add a css ease on mouse out

[oncebot]

I think there is no transition on mouse out, it just goes straight back to the initial state without any transition, it may be a small issue but could increase the experience a lot.

[Tusko]

.tilt * {transition: all .25s ease 0s} @Biraj007

[P4KM4N]

It make everything lag

[dazmillion]

Hi, am having problems getting this to work on a wordpress site. I think the issue has to do with tiltfx.js code.

I believe it grabs the image directory path from .tilt-effect on the index.php page and injects it into tilt__back/Tilt__front.

But the problem is that when when the tiltfx.js file is in the "website/js/tiltfx.js" location, it doesnt inject the correct img directory path for this.tiltImgBack.style.backgroundImage = 'url(' + this.el.src + ')', which is in the folder "website/images/logo.js"

The effect only works if I paste the tiltfx.js code on the index.php page as a <script></script>, then its able to grab the correct directory path to the image. But when the tiltfx.js file is in the website/js/tiltfx.js location the effect doesnt work because the img directory path its grabbing is not correct.

[oldeback]

not the best soloution, but it works, and the lag is gone.

inside the javascript file, find the function with the comment
"// reset all when mouse leaves the main wrapper."

and add these two lines to that function:

			el.style.WebkitTransition = '100ms ease-out';
			el.style.transition = '100ms ease-out';

this will ease it with fewer lags than the soloution Tusko wrote.

now add this function under the one mentioned above. it's almost the same function, but i changed the "mouseleave" to "mouseover" instead.

	this.tiltWrapper.addEventListener('mouseover', function(ev) {
		setTimeout(function() {
		for(var i = 0, len = self.imgElems.length; i < len; ++i) {
			var el = self.imgElems[i];

			el.style.WebkitTransition = '0ms ease-out';
			el.style.transition = '0ms ease-out';
		}	
		}, 60);
	});