Search jQuery

jQuery Forum

CSS3 Animations

in Using jQuery Plugins • 12 years ago

Hey Guys,

regarding iPad / mobile web development i am very disappointed about jQuery's performance. Regrettably the high-performance CSS3 definitions are not used at all and so the page speed suffers from non-optimized javascripts.

Hence i started developing CSS3 Plugins for jQuery to enhance the performance on mobile devices. In my humble opinion I created a solid base construction - please check out the 5 plugins and tell me your feedback and potential bugs:

http://cwdesigns.de/css3-opacity-fur-jquery

http://cwdesigns.de/css3-translate-fur-jquery

http://cwdesigns.de/css3-rotate-fur-jquery

http://cwdesigns.de/css3-rotate3d-fur-jquery

http://cwdesigns.de/css3-scale-fur-jquery

Thanks and regards

Chris

Replies(3)

rpflorence

Re: CSS3 Animations

12 years ago

Keep in mind that jQuery's effects are more flexible than CSS transitions. For instance, you can't define a "back" or "bounce" or "elastic" transition in CSS3. Nor can you attach a function to "set".

Creating a new animation API that uses CSS3 when supported and falls back to jQuery's effects engine would entirely be possible and a worthy endeavor, but it's not currently possible to emulate all of jQuery's animation API with CSS transitions / transforms, you'd have to implement only a subset.

esKju

Re: Re: CSS3 Animations

12 years ago

I totally agree to your criticism concerning the feasibility of all effects in all browsers. But please keep my intention in mind to create a plugin that simplifys the usage of css3 properties for performance reasons.

Regarding the easing methods like "bounce", "elastic", etc.: Easing is supported by css transitions and I already implemented a solution in my plugins. Supported easings are linear, ease, ease-in, ease-out, cubic-bezier (bounce and elastic are missing like you said).

Within the next few days I will implement support for the remaining properties with a fallback to the animate method. Further I will work on a solution to afford queued animations and callbacks.

rpflorence

Re: Re: CSS3 Animations

12 years ago

Regrettably the high-performance CSS3 definitions are not used at all and so the page speed suffers from non-optimized javascripts.

That sounds like you expect jQuery to use CSS3 when available for something like `el.animate`.

But please keep my intention in mind to create a plugin that simplifys the usage of css3 properties for performance reasons.

Excellent, yes, that's what I was saying :) A plugin that uses CSS3 but falls back to jQuery's effects engine, that implements only a subset of the current effects.

I did a lot of work on this here, it's also on github if you want to take a look at any of it.

Top Reply

Response title

Attachments

jQuery Forum

CSS3 Animations

Replies(3)

Re: CSS3 Animations

Re: Re: CSS3 Animations

Re: Re: CSS3 Animations

Statistics

Tags

Actions

Related Posts