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

A fresh and cool collection of JS libraries!

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 this API:

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

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>

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 .

Below an example using the swing effect:

PWA asset generator is a tool implemented by my friend and based on . 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]

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.

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:

Originally published at on January 9, 2020.

Senior Consultant & Angular Trainer at Trivadis — Passionate about web technologies | Focusing on Javascript, Angular and PWAs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store