Posted about 6 years ago. Visible to the public.

Make jQuery.animate run smoother with almost no code changes

jQuery comes with .animate() that lets you transition some CSS selectors:

function floatIn($element) { $element.css({ 'opacity': 0, 'margin-top': 200px }); $element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 }); }

The animation is implemented using setInterval and Javascript. This works great, but it's not as smooth as a CSS transition.

Fortunately the animate API can be mapped almost 1:1 to CSS transitions. There are libraries like Transit that act as a drop-in replacement for animate, but animate using CSS transitions instead of Javascript. This gives you a much higher framerate.

If Transit has too many bells and whistles for your taste, and you'd like to roll your own animate replacement, you might want to take a look at this.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Henning Koch
Last edit:
about 6 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more