camwiegert/in-view

★ 4,612JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((in-view.js))
    What it does
      Scroll visibility events
      Enter and exit hooks
      One-time triggers
    Options
      Offset adjustment
      Visibility threshold
      Custom test function
    Performance
      Throttled listener
      Under 2KB size
      Single event handler
    Use Cases
      Scroll animations
      Lazy loading
      Read tracking

mindmap root((in-view.js)) What it does Scroll visibility events Enter and exit hooks One-time triggers Options Offset adjustment Visibility threshold Custom test function Performance Throttled listener Under 2KB size Single event handler Use Cases Scroll animations Lazy loading Read tracking

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Trigger a CSS animation when a section of a landing page scrolls into view for the first time.

USE CASE 2

Lazy-load images or videos only when they are about to become visible, reducing initial page load time.

USE CASE 3

Track which content sections a user has actually seen by firing an analytics event when an element enters the viewport.

USE CASE 4

Show or hide a call-to-action button based on the user's scroll position relative to a specific element.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial projects as long as you keep the original copyright notice.

In plain English

in-view.js is a small JavaScript utility for web pages that tells you when a specific element on the page scrolls into or out of the visible area of the browser window. This is useful for things like triggering animations when a section comes into view, lazy-loading images, or tracking whether a user has seen a piece of content. You give it a CSS selector, then attach functions to the enter and exit events. When an element matching that selector scrolls into view, your enter function runs. When it scrolls back out, your exit function runs. You can also use once instead of on if you only want the function to fire a single time. The library includes a few configurable options. The offset setting lets you adjust when an element is considered visible relative to the edge of the browser window, so you can trigger things a bit before or after the element fully crosses the edge. The threshold setting controls how much of the element needs to be visible before the event fires: zero means any tiny portion counts, while one means the entire element must be on screen. There is also a test option that lets you replace the visibility logic entirely with your own custom function. On the performance side, the library attaches a single throttled listener to the scroll, resize, and load events on the window, checking no more than once every 100 milliseconds. It is about 1.9 kilobytes when compressed. The README also notes that the library is designed to eventually use the browser's built-in IntersectionObserver API where available, which is the more modern way to handle this type of detection. The library works in modern browsers and Internet Explorer 9 and later. It is licensed under MIT.

Copy-paste prompts

Prompt 1

Using in-view.js, write the JavaScript to fade in every .card element the first time each card scrolls into view.

Prompt 2

I want to lazy-load img tags on my page using in-view.js. Show me how to swap a data-src attribute for src when the image enters the viewport.

Prompt 3

How do I use in-view.js to fire a tracking event when a user scrolls to see the #pricing section of my page?

Prompt 4

Show me how to use in-view's threshold option so an event only fires when at least 50% of an element is visible on screen.

Prompt 5

What is the difference between .on('enter') and .once('enter') in in-view.js and when would I use each?

Open on GitHub → Explain another repo

← camwiegert on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.