Be more productive with these tools! ⛄️ February picks for you

#webdev #javascript #design #productivity

Already started some new year proposals or are you still wondering which one has the highest priority on your list (like me 😄)?
In any case don't lose the focus, you still have plenty of time ahead to model your resolutions path!

Vue paycard enhances a payment form with smooth micro-interactions, like number formatting, validation and automatic card type detection.

It is built with vuejs (the React version is on the way 😄) and fully responsive.

Give it a try with the sample below:

Github

Freezeframe.js is a library allowing to pause and re-enable animated gif images. You can choose for mouse hover or click events, touch event or with a manual toggle functions.
Thanks to the library you can activate the animation only in specific cases (mouse hover, for instance) making the image much more catchy.

1 - Dowload the library

npm install freezeframe

or

yarn add freezeframe

2 - Import it in your code

// es6
import Freezeframe from 'freezeframe';

// Commonjs
const Freezeframe = require('freezeframe');

// 1. Save a reference to your freezeframe instance
const ff = new Freezeframe({
  trigger: false
});

// 2. Add event listeners to the instance
ff.on('start', (items) => {
  // do something on start
};

ff.on('stop', (items) => {
  // do something on stop
};

ff.on('toggle', (items, isPlaying) => {
  if (isPlaying) {
    // do something on start
  } else {
    // do something on stop
  }
};

3 - Bind the library to an element in your template

<img class="freezeframe" src="image.gif" />

<!-- We can target a parent element if we need to wrap multiple images -->
<div class="freezeframe">
  <img src="image1.gif">
  <img src="image2.gif">
  <img src="image3.gif">
</div>

Examples

In the last month collection, Aweys Ahmed suggested humaaans library as alternative to unDraw. 🎉 Many thanks Aweys for the hint! 😄

Humaaans is a free library to manipulate and compose illustrations focusing on people (from here the name "humaaans").
It's available on InVision Studio, which grants designers full control over the illustrations and mixing the different body parts, colours, clothing and hairstyles. A dropbox folder contains the illustrations (as .png files), a .studio and a .sketch project file that you can freely download.

The amount of interchangeable elements is great, making it easy to create different scenes fitting a wide spectrum of projects and situations:

Starting with different pre-generated templates, you can apply several backgrounds to your illustration in order to give some more context details.

If you are a professional designer or simply interested in a cool instrument to enhance your creativity, probably humaaans will be a good add-on to your tool set.

Website

Scene.js is an interesting JavaScript library for creating animated websites. It offers many different features to create advanced and appealing animations with few lines of code.

A simple usage can be the case when you need to animate some text:

new Scene({
    ".overflow .text span": i => ({
      0: {
        transform: {
          translateY: "100%",
        }
      },
      1: {
        transform: {
          translateY: "0%",
        }
      },
      options: {
        delay: i * 0.2,
      }
    }),
  }, {
    easing: "ease-in-out",
    selector: true,
  }).play();

On the other side, if you need to develop more advanced scenarios, you can use the scenejs timeline library, where you can have full control over time, properties and items:

var clapperScene = new Scene({
    ".clapper": {
      2: "transform: translate(-50%, -50%) rotate(0deg)",
      2.5: "transform: rotate(-15deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".clapper-container" : {
      0: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .circle": {
      0.3: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .play": {
      0: "transform: translate(-50%, -50%)",
      0.6: Scene.zoomIn({ duration: 1 }),
    },
    ".top .stick1": {
      2: "transform: rotate(0deg)",
      2.5: "transform: rotate(-20deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".stick1 .rect": i => ({
      0: "transform: scale(0) skew(15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.6 + i * 0.1 },
    }),
    ".stick2 .rect": i => ({
      0: "transform: scale(0) skew(-15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.8 + i * 0.1 },
    }),
  }, {
    easing: "ease-in-out",
    selector: (selector) => "[data-timeline] " + selector,
  });
  new Timeline(
    clapperScene,
    document.querySelector("#timeline .example_result"),
    { keyboard: false },
  );

On their Website you can find other examples, like the counter below with a different animation for each step, making it much fancier:

Sortable is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.
It offers different features to use with a list or a grid, like the obvious drag & drop and sorting, but also the possibility to move items between list or to clone an element from one group to another.

This is the code used in the example above:

<div id="example2-left" class="list-group col">
    <div class="list-group-item">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 6</div>
</div>

<div id="example2-right" class="list-group col">
    <div class="list-group-item tinted">Item 1</div>
    <div class="list-group-item tinted">Item 2</div>
    <div class="list-group-item tinted">Item 3</div>
    <div class="list-group-item tinted">Item 4</div>
    <div class="list-group-item tinted">Item 5</div>
    <div class="list-group-item tinted">Item 6</div>
</div>

new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});