npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@union/unmask

v1.0.1

Published

A scroll-to-reveal JavaScript library that unmasks your elements using the clip-path CSS property.

Downloads

4

Readme

Unmask.js 🎭

A scroll-to-reveal JavaScript library that unmasks your elements using the clip-path CSS property.

Install

npm i @union/unmask

How To Use

Add the data-unmask attribute to any DOM elements you want to add this transition to. In JS, you may run Unmask() without any options, or you can add an options object as a parameter to Unmask(). This will apply global options to all elements with the data-unmask attribute.

Usage and Options

JavaScript

import Unmask from 'unmask';
	
Unmask({
  // All options using defaults, with other options listed
  
  area: 'edge',
  // edge, center
  // What area of the element the transition starts from
  
  size: 'full',
  // full, half
  // Do the entire unmask transition, or start halfway
  
  origin: 'left'
  // left, right, top, bottom, horizontal, vertical, center
  // Where the animation begins on the element
  // The 'edge' type uses left, right, top, and bottom origins
  // The 'center' type uses horizontal, vertical, and center origins
  
  fade: true,
  // true, false
  // Fade in when revealed
  
  speed: 1000,
  // Affects the transition-duration when unmasking
  
  delay: 0
  // Affects transition-delay once element is within the viewport
});

HTML

<img src="https://www.example.com/image.jpg" data-unmask />

CSS

This library uses JavaScript to apply styles so that no CSS file is needed for this library to work, but any elements that will be transitioned that are immediately visible when the page loads will not fade in properly. To fix this, simply add

[data-unmask] {
  opacity: 0;
}

Element-specific options

You may also pass options to the data-unmask attribute as a JSON object to cause Unmask to affect individual elements differently. Any options passed in the data-unmask attribute will override the global options on this element, and any options not specified will fallback to the global options and then the defaults.

<img src="https://www.example.com/image.jpg" data-unmask='{"speed": 500, "delay": 200, "size": "half"}' />

How It Works

This library utilizes the clip-path and -webkit-clip-path CSS attribute in combination with the Intersection Observer API to detect when elements are within the viewport and then reveal them.

Docs for clip-path

Docs for Intersection Observer API

Browser Support

This library supports Chrome, Firefox, Safari, and Edge (Chromium). IE11 and Edge are not supported.


Brought to you by Union