You can use an easing function to make the transformation seem more natural. For convenience, ramjet.linear
(the default), ramjet.easeIn
, ramjet.easeOut
and ramjet.easeInOut
are included, but you can use any function that takes in input between 0 and 1 and returns a similar value, such as Robert Penner's easing equations (included here via Matt DesLauriers' eases package).
In supported browsers, ramjet uses CSS animations to make the transformation buttery smooth, even on mobile. It precalculates keyframes so that you can use any timing function you like, not just the limited ones built in to CSS. (When transforming to or from SVG elements, ramjet falls back to timer-based animations, as SVG elements cannot be transformed with CSS. This may cause stutter on mobile devices.)
var eases = require('eases');
ramjet.transform({{from}}, {{to}}, {
easing: eases.{{easing}},
duration: {{duration}}
});