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>
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:
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]
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:
Top comments (13)
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!
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 Vaibhav! AOS is a very cool library too. I already described it in the July edition:
Be more productive with these tools! 🌻 My July picks for you
Francesco Leardini ・ Jul 19 '19 ・ 3 min read
Thanks for mentioning though
Oh, I will look into that post. :)
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!
Extremely helpful, thanks 😄
Thanks Prafulla!!
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 like the sal.js, thanks for share!