Animate translate3d with jQuery

Question

I'm trying to animate translate3d with Jquery 2.1.1. in 10 seconds. Then, when the animation is complete, I want it to alert me. But the problem is that it does not animate. It just changes instantly to the new css.

Is there some hero that can help me with this?

The code i use now:

$( ".circle" ).animate({ textIndent: 100 }, {
    duration : 10000,
    step : function() {
      $(this).css("transform","translate3d(0px, 320px, 0px)"); 
    }, 
    complete : function() {
        alert("completed the animation");
    }
},'linear');

Solution 1

Basically with animate and transform you have to use the step function of the animate function of jQuery which will look a bit 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 would have to set the text-indent separately but basically what you were doing wrong was that every time the step function was called the value was set straight to 320px instead of as it goes. This can be tackled by having two separate functions and using unimportant css rules to create the values needed across the animation curve. You also need to set the queue to false so that the two animations happen at the same time and not one after the other

The final snippet of code would 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 is a working fiddle:

http://jsfiddle.net/Hive7/1qu2qxqh/

Solution 2

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 good plugin and many features

Delay, Optional units, Vendor prefixes, Chaining & queuing, Alternate easing/duration syntax, Relative values, Transformation origins and Easing

Demo Here

Comments

[Larz]

Have you tried using a helper function like the one that this guy wrote? cameronspear.com/blog/animating-translate3d-with-jquery

[Rob Boerman]

you're awesome thank you so much for helping me out, i didn't get it, but now i see how the work around is build, keep being a hero :)

[Rob Boerman]

One more question, is it also possible to animate from the current translate3d to the new one?

[Hive7]

yes to transform from your current to your next all you have to do is find your current and set the value of your step to the value then animate if that makes sense @RobBoerman