Be more productive with these tools! ❄️ January picks for you

No better way to start the new year than a collection of Javascript libraries and get inspired for your projects! Without further ado, let's see what January brings us.

Sal.js is a scroll animation library, focusing on performance and small footprint. It is written in vanilla JavaScript and doesn't introduce any additional dependencies.

It is based on the Intersection Observer API, which allows to asynchronously observe changes in the intersection of a target element with an ancestor one or with a top-level document's viewport.

Be aware though that not all browsers support this API:

In case your target browser is not supported, you need to use a polyfill.
 

Usage

In your template file, add data-sal attribute with an animation name as value:

<div data-sal="fade"></div>

<!--
Many other animations are available:
- fade
- slide-up
- slide-down
- slide-left
- slide-right
- zoom-in
- zoom-out
- flip-up
- flip-down
- flip-left
- flip-right
 -->

Then simply initialise the library in the script file:

// ES6 modules
import sal from 'sal.js'

// CommonJS modules
var sal = require('sal.js')

sal();

Sal.js will look for all elements with a data-sal attribute and launch their animation when visible in the viewport. The animation's properties: duration, delay and easing can be customised according to your own needs.

<div
  data-sal="slide-up"
  style="--sal-duration: 3s; --sal-delay: 2s;">
</div>

Website

Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user's scroll.

Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems…

Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.

Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

The library dynamically adds and removes CSS classes from the target element, allowing developers to carefully define what should happen in each case:

<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

<style>
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
</style>

There are plenty of options that you can use to adapt the library with ease:

var headroom = new Headroom(elem, {
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "bounceInDown",
    "unpinned": "bounceOutUp"
  }
});
headroom.init();

// to destroy
headroom.destroy();

You can test it with different demos.

Below an example using the swing effect:

Website

PWA asset generator is a tool implemented by my friend Önder Ceylan and based on Puppeteer. It generates icons and splash screens automatically for your app and integrates them directly into the related files (manifest and index.html).
If you have implemented at least once a PWA, you know how tedious and time consuming is creating icon images for different platforms, while keeping sizes and quality for all of them. Thanks to PWA asset generator you can completely automate this step and be sure to deliver pixel perfect images to the several target devices.

Install & Usage

$ npm install --global pwa-asset-generator

$ npx pwa-asset-generator

PWA asset generator offers several option to customise the generated assets:

  Options
    -b --background             Page background to use when image source is provided: css value  [default: transparent]
    -o --opaque                 Shows white as canvas background and generates images without transparency  [default: true]
    -p --padding                Padding to use when image source provided: css value  [default: "10%"]
    -s --scrape                 Scraping Apple Human Interface guidelines to fetch splash screen specs  [default: true]
    -m --manifest               Web app manifest file path to automatically update manifest file with the generated icons
    -i --index                  Index HTML file path to automatically put splash screen and icon meta tags in
    -a --path                   Path prefix to prepend for href links generated for meta tags
    -t --type                   Image type: png|jpeg  [default: png]
    -q --quality                Image quality: 0...100 (Only for JPEG)  [default: 100]
    -h --splash-only            Only generate splash screens  [default: false]
    -c --icon-only              Only generate icons  [default: false]
    -f --favicon                Generate favicon image and HTML meta tag  [default: false]
    -l --landscape-only         Only generate landscape splash screens  [default: false]
    -r --portrait-only          Only generate portrait splash screens  [default: false]
    -d --dark-mode              Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr  [default: false]
    -u --single-quotes          Generate HTML meta tags with single quotes  [default: false]
    -g --log                    Logs the steps of the library process  [default: true]

Github

UnDraw is a collection of open-source (MIT licensed), constantly updated, sketched images to use in your blog or web app.

The selection available is quite wide, allowing everybody to find easily an image matching almost any context.

Before downloading a file, you can also customise the colours to better fit the target colour palette.

Website

OFFEO is an online animated video maker to create social media videos with ease. It provides many motion graphics elements, templates and more than 500 royalty free soundtracks.

You start by selecting a template from different categories:

And then you continue by adding elements and animations from the libraries available. Below a sample I created in barely 10 minutes (I know it is kind of horrible, but considering the time invested it is not too bad after all 😄):

Anyway, to better understand the true potential behind the tool, watch the official introductory video: