Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

JQuery Transit - CSS3 animations for jQuery

ricostacruz.com

Post reply on HN
Print view View original

11–20 of 28 posts

Re: JQuery Transit - CSS3 animations for jQuery

#12

Post by kyriakos »

alternatively you can use jQuery Animate Enhanced plugin. https://github.com/benbarnett/jQuery-Animate-Enhanced/

it enhances jquery's own animate function making animations use CSS3 hardware accelerated equivalents in browsers that support them while using the original jquery software mode when not supported. and you don't need to change a single line of code on your site since its completely transparent.

Re: JQuery Transit - CSS3 animations for jQuery

#15

Post by kyriakos »

andrewfelix wrote: post #11

Can anyone summarise the benefits of this over '.animate'?

instead of changing CSS properties 'manually' over a period of time to achieve animation it sets the CSS3 transition properties making the browser do the work instead of javascript which in most cases translates into using the GPU leading into smoother, faster and less power hungry animation.

it also seems to add a few things that .animate cannot do, such as skew and 3d rotation.

keep in mind that .animate works in all browsers while this needs a modern browser that supports CSS3.

Re: JQuery Transit - CSS3 animations for jQuery

#16

Post by andrewfelix »

kyriakos wrote: post #12

alternatively you can use jQuery Animate Enhanced plugin. https://github.com/benbarnett/jQuery-Animate-Enhanced/ it enhances jquery's own animate function making animations use CSS3 hardware accelerated equivalents in browsers that support them while using the original jquery software mode when not supported. and you don't need to change a single line of code on your site since its completely transparent.

Brilliant. Thanks for that.

Re: JQuery Transit - CSS3 animations for jQuery

#18

Post by riccardom »

josscrowcroft wrote: post #17

Love the demo - but I think you should take a moment on there to explain the benefits of using this vs. just setting CSS transitions in a stylesheet - as in, what it's for, why it's better than .animate(), etc.

As a jquery.transmit user I'd say that that the major advantage of js vs plain css3 is in terms of lines of code, especially wrt to browser prefixes. Then I really like to have the timing of animation explicit in js code near the usual .animate(), fadeIn(), setTimeout(), etc... instead of having to check two places.

Re: JQuery Transit - CSS3 animations for jQuery

#19

Post by dmak »

kyriakos wrote: post #12

alternatively you can use jQuery Animate Enhanced plugin. https://github.com/benbarnett/jQuery-Animate-Enhanced/ it enhances jquery's own animate function making animations use CSS3 hardware accelerated equivalents in browsers that support them while using the original jquery software mode when not supported. and you don't need to change a single line of code on your site since its completely transparent.

Thank you
Post reply on HN