Translate3d animation with jQuery
I am trying to animate translate3d using JQuery 2.1.1. after 10 seconds. Then, when the animation is complete, I want it to alert me. But the problem is, it doesn't animate. It just instantly changes to the new css.
Is there any hero who can help me?
The code I'm using now:
$( ".circle" ).animate({ textIndent: 100 }, {
duration : 10000,
step : function() {
$(this).css("transform","translate3d(0px, 320px, 0px)");
},
complete : function() {
alert("completed the animation");
}
},'linear');
source to share
Basically with animations and transformations, you should use the step function of the jQuery animation function, which would look something like this:
$('.animate').animate({
'opacity': '320'
}, {
step: function (now, fx) {
$(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
},
duration: 10000,
easing: 'linear',
queue: false,
complete: function () {
alert('Animation is done');
}
}, 'linear');
You will have to set the text indentation separately, but basically what you were doing wrong was that every time the step function was called, the value was set directly to 320px instead of going. This can be solved by having two separate functions and using nonessential CSS rules to create the values needed for the animation curve. You also need to set the queue to false so that the two animations happen at the same time, rather than one after the other.
The final piece of code will look like this:
$('.animate').animate({
'opacity': '320'
}, {
step: function (now, fx) {
$(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
},
duration: 10000,
easing: 'linear',
queue: false,
complete: function () {
alert('Animation is done');
}
}, 'linear');
$(".animate").animate({ textIndent: 100 }, {
duration : 10000,
easing: 'linear',
queue: false
});
Here's a working fiddle:
source to share
You can use jquery.transit jQuery plugin for css3 transition:
$('.box').transition({ rotate: '45deg' });
$('.box').transition({ scale: 2.2 });
$('.box').transition({ skewY: '30deg' });
$('.box').transition({
perspective: '100px',
rotate3d: '1,1,0,180deg'
});
very nice plugin and many features
Delay, additional blocks, vendor prefixes, chaining and queuing, alternative weakening / duration syntax, relative values, transformation origin, and relief
source to share