Ramjet

ramjet

Transform DOM elements into each another with smooth transitions

ramjet helps us to Morph DOM elements from one state to another with smooth transitions!

All it does is:

  • Clone the elements and all their children.

  • Transform the second element so that it completely overlaps with the first.

  • Animating the two elements together until the first element has exactly the same position and dimensions as the second element.

install it: npm install --save ramjet

sample usage:

1
2
3
4
5
6
<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>

<script>
  ramjet.transform( a, b );
</script>

GIF FTW

ramjet.js

Thanks to Rich Harris for ramjet (:

Suggest a module

Comments