Saturday, December 14, 2013

Simple jQuery translate3d plugin

Hi,
this article is about my jquery-translate3d github project.

For my current project I need to make a lot of translate3d transformations. The main issue is that every time you call translate3d you must do a calculation with the previous value to avoid that the animation starts at the origin. I made a js fiddle where you can watch the animation here.
And here is the an embedded code pen example :)

See the Pen mFpJc by Florian Biewald (@flodev) on CodePen

The first animation moves the element 100px on x and y axis (or left and top).
Now the second animation starts and wants to move the element 200px on x. Since the second animation has no knowledge about the first transformation. The element pops back to left 50px and top 50px and then moves 200px to the left completely ignoring the previous animation.

$('#element').css({
    '-webkit-transform': 'translate3d(200px, 10px, 0px)'
});

Now my (really simple) jquery plugin stores the values of the previous transformation directly on the element itself means I can focus on my transformation without thinking about the last transformation.
Use it like this:

$('#element').translate3d({
    x: 10,
    y: 10
});

See the Pen edGoc by Florian Biewald (@flodev) on CodePen


As you can see the div remains on the the same y-level.
You can also use rotate to rotate the element (which leads the name jquery-translate3d to absurdity, but who cares:)).
Rotate doesn't calculate internally so every time you use rotate you are overriding the previous value.

$('#element').translate3d({
    x: 10,
    y: 10,
    rotate: 20
});
The plugin is save for use with every browser that supports CSS-transform. It uses browser prefixes to ensure this (-moz-, -webkit- etc.).

No comments:

Post a Comment