Get best of the week

Rapid testing of Motionia.js and Consoleimg.js


Carl Heyerdahl

Good day.

This short article is devoted to testing the capabilities of a couple of tiny new JavaScript libraries - motionia.js and consoleimg.js . The first is for working with animation, the second is for outputting images to the console.

Motionia.js


Motionia.js is a library for working with animations.

Elements are animated with motionia('target', 'anim'), where target is any HTML element (id, class, tag), and anim is the name of the animation.

According to the developer, motionia.js offers 100+ built-in animations with expandability.

We connect the library:

<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>

We create five containers. Add a click event handler to each. By click, the “motionia” function is called, which is passed as arguments the animation target (animated element), the name of the animation and, in two cases (the first and last containers), an additional parameter - animation settings:

<div class="box1" onclick="motionia('.box5', 'slideX', '100px')">slideX</div>
<div class="box2" onclick="motionia('.box3', 'bounceIn')">bounceIn</div>
<div class="box3" onclick="motionia('.box4', 'rollIn')">rollIn</div>
<div class="box4" onclick="motionia('.box2', 'slideIn')">slideIn</div>
<div class="box5" onclick="motionia('.box1', 'slideY', '-100px')">slideY</div>

Add styles:

body {
	margin: 0;
	height: 100vh;
	background: radial-gradient(circle, lightgreen, darkgreen);
	display: flex;
	justify-content: center;
	align-items: center;
}

div {
	margin: 0 .5em;
	width: 100px;
	height: 100px;
	background: linear-gradient(skyblue, steelblue);
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,.8);
	display: inherit;
	justify-content: center;
	align-items: center;
	font-family: system-ui;
	font-size: 1.2em;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}

Result:


Put a star on Github for an idea.

Among the disadvantages, the following can be noted:

  • There are 33 built-in animations, according to my calculations ( Animate.css , for example, has 97).
  • Some animations do not work, for example, flip.
  • The animations are pretty simple.
  • When trying to use in another script we get Uncaught ReferenceError: motionia is not defined, i.e. You can use it only in the built-in script, which is not comme il faut.
  • Used by jQuery, which is also not comme il faut. I have nothing against jQuery, but such functionality could be implemented in pure JS.
  • From selectors, only identifiers, classes, and tags are available.

Of course, to use the library or not, you decide.

Consoleimg.js


Consoleimg.js - as the name implies, this is a library for outputting images to the console.

We find and download a suitable image (all formats are supported, including gif and svg), download the script from Github and connect it:

<script src="consoleimg.min.js"></script>

The image is displayed in the console using consoleimg.load('image', {size: 320, color: 'transparent'}), where image is the name of the image, size is the maximum height of the image (320px by default), color is the background color (transparent by default).

consoleimg.load('img.png', {size: 320, color: '#fff'})

Result:



Useless, but funny.

The code is here .

Thank you for attention.

More articles:


All Articles