loading...
Cover image for Be more productive with these tools! ❄️ January picks for you

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

paco_ita profile image Francesco Leardini ・5 min read

Happy

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

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:

Support

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

 


 
Logo

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:

Alt Text

Website

 


 

Alt Text

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.

demo
 

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

 


 

Alt Text

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

Alt Text

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.

Alt Text

Website

 


 

Alt Text

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.

Alt Text

You start by selecting a template from different categories:

Alt Text

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 😄):

Alt Text

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


 


  

Alt Text

Posted on by:

paco_ita profile

Francesco Leardini

@paco_ita

Software Engineer ∙ International speaker ∙ Focusing on Javascript, Angular, React and PWAs

Discussion

markdown guide
 

Awesome list! Another animation library I found was AOS - Animate On Scroll. It's light and setup is so easy and similar to Sal.js.

 
 

Thanks for sharing. I recently found humaaans.com/ but I will definitely look into unDraw.

 

That's a very interesting library as well, I like the way you can customise the individual parts like hair style and background. I will try to add it in the January list, just after unDraw. Many thanks for the hint!

 
 

Thank you, resources like this are very appreciated (even though I may use 5% because client projects are very specific). Still is good to compile these so others can benefit from them :D

 

Thanks Juan.

I created this periodical libraries collection as sometimes one specific tool might be exactly what was needed in the current project. Sometimes else it might give some hints and inspiration for a personal project, where you can have more decisional freedom.

Indeed if your clients' projects are very specific, it might be difficult to introduce them. Or maybe you can propose some new changes 😄

 

I didn't know about offeo I'm going to try right now!

 

I played with it just for few minutes, but it is very intuitive and easy to use and the final result is very cool. Glad you found it useful!

 

I like the sal.js, thanks for share!