JavaScript: Ramjet Transforms HTML Elements

Transformations and Animations are used on more and more websites due to CSS3 and HTML5. The JavaScript library Ramjet uses CSS3 options and allows you to transform any HTML element into a different one.

Simple Effect With Large Impact

Basically, the transformation effect used by ramjet is a simple one. Take any two HTML elements. Images, texts, and SVG graphics can be combined, and the position and size of elements don't matter either. A simple JavaScript invocation is what makes the first element transform into the second one via animation.

Example for a Transformation Animation as Known From iOS

Here, the size and position of the first element are matched with the second one. At the same time, the first element is faded out, and the second one is faded in. With a quick animation, you create an impressive transformation effect. The longer the animation's duration, the more obvious the way of transformation, which waters the "wow effect" a little.

Ramjet: Addressing and Transforming Elements Via ID

Ramjet is very easy to use. Once the JavaScript library is implemented the usual way, both of the HTML elements you want to transform can be addressed via their ID.

ramjet.transform(elementA, elementB);

In the example, an element with the ID "elementA" transforms into the element with the ID "elementB". In this simple variant, both output elements remain visible as such.

If you want to make the second element appear during the transformation, causing the first element to fade out, you need to invest a bit more JavaScript into the effect.

elementA.style.opacity = 0;

ramjet.transform(elementA, elementB, {
  done: function () {
    elementB.style.opacity = 1;
  }
});

For this example, the second element ("elementB") needs to be hidden. To do so, you could set its visibility to zero (using the CSS attribute "opacity"). After that, the first element ("elementA") is hidden once the transformation starts. Next, we trigger the transformation via "ramjet.transform()", by transferring the two IDs ("elementA" and "elementB"). During the animation, the output elements are not visible anymore.

Course of the Animation From Element A to Element B

The parameter "done" causes a function to be executed as soon as the transformation is completed. This makes sure that the second element becomes visible at the end of the animation.

Additional Parameters

Aside from the parameter "done", there are other ways to define the transition. For example, "duration" allows you to determine the duration of the animation. On top of that, there's also "easing", giving you the option to choose an easing method to accelerate or slow down the animation.

ramjet.transform(elementA, elementB, {
  duration: 5000,
  easing: ramjet.easeIn
});

While "ramjet.linear" is the standard easing method, there are "ramjet.easeIn", "ramjet.easeOut", and "ramjet.easeInOut" as well, all of which give you different animation effects.

Instead of making elements invisible via "style.opacity", there are also alternative methods with "ramjet.hide()", and "ramjet.show()". These also set the "opacity" attribute to 0 or 1, respectively.

Ramjet: Browser Support

Ramjet runs on all modern browsers like Chrome and Firefox. The library also works in Internet Explorer starting from version 9. Ramjet is available under the MIT license and is thus free to use for commercial and private projects alike.

(dpe)

Featured photo credit: pxfuel