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.

Looking for a TypeScript Developer on your next project?

I help agencies, startups, and individuals stand out by creating exceptional websites, mobile apps, and digital experiences. Based in Surrey, I work with clients in London and internationally, providing flexible, tailored solutions for every project.

• Website Design & Development - Custom websites designed to fit your brand, optimized for performance, and built with scalability in mind.
• Web App Development - Robust, feature-rich web applications for startups and enterprises.
• Mobile App Development - Cross-platform mobile apps using React Native for iOS and Android.
• Laravel Development - Scalable, secure backend solutions with Laravel.
• React JS Development - Modern, fast, and responsive frontends built with React.
• React Native Development - Cross-platform mobile apps built with React Native for native-like performance.