Having used countless NPM libraries in my day to day job, I wanted to take a bit of time to publish a simple NPM package myself.
The aim was to build something that could be useful, but wasn't just your typical "Hello World" package. The library had to be something manageable, small and quick to create in my spare time. It would also be great to use it in future projects if there was a need.
The aim
With all that in mind, I decided on creating a simple scroll animation library.
- When a user scrolls past an element that comes into the users viewport, a configurable CSS classname would be added to the element.
- The classname would have a CSS animation attached, triggering when the user scrolled to the element.
Setting up the NPM package structure
Before I could dive into the building the library, I needed a solid foundation for the NPM package. I wanted a quick and no fuss way to create a package that still allowed me to use TypeScript.
TSDX as quoted from their project repo, “is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages”. TSDX gives you some fantastic options to boilerplate your project for an npm package all of which can be found in the TSDX Documentation
Running npx tsdx create simple-scroll-animate was my first step, and just like that I had a ready to go NPM package.
Next, was to create my library. To find out more about the Intersection Observer API, read more from the mozilla.org website, “The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.”
See how I used the API in my library in the GithHub src.
Publishing the library
Needing an NPMJS account, I simply signed up and within a few minutes I could run npm login so I could publish from the CLI.
Make sure your codebase is in a public repository, with a good README, and simply npm run build and then npm publish.
Introducing Simple Scroll Animate
I now have a simple library in which I can add css animations to elements as they come into view. View the project on GitHub or by running npm install simple-scroll-animate and following the README for usage.
A demo page of the library in action can be found here.