BetaMIT

SigmoidScroll motion without the JavaScript tax: native CSS scroll timelines, spring and S-curve easings as CSS linear(), reduced motion by default. About 2 kB.

pnpm add @sweberdev/sigmoid

Most scroll animations still run in JavaScript: a listener measures elements and changes styles on every frame. Browsers can now do this themselves with CSS scroll-driven animations. Sigmoid is a small layer on top of that platform feature. Reveals, parallax and scroll-linked effects run on native view and scroll timelines, and a tiny fallback with the same range maths covers browsers that do not have them yet.

With sigmoid.css you do not even need JavaScript: write data-sigmoid="fade-up" and the browser animates it. The easing curves are the other half: physically correct springs, the logistic S-curve and Bézier curves that work as JavaScript functions and as CSS linear(), also together with Motion, GSAP or Tailwind. When people ask their system for reduced motion, Sigmoid shows the content without moving it.

Example

A short exampleCopy it into your project.

app/page.tsx

import "@sweberdev/sigmoid/sigmoid.css"
import { ease } from "@sweberdev/sigmoid"
import { Reveal, ScrollProgress } from "@sweberdev/sigmoid-react"

export default function Page() {
  return (
    <>
      <ScrollProgress className="fixed inset-x-0 top-0 h-1 bg-black" />
      <h1 data-sigmoid="fade-up">No JavaScript needed</h1>
      <Reveal as="article" preset="scale-in" easing={ease.bouncy}>
        …
      </Reveal>
    </>
  )
}

Features

What you getFree under MIT, with Pro on top.

Free, MIT

reveal, parallax, scrub and a reading progress bar on native CSS view and scroll timelines
Zero-JavaScript mode: data-sigmoid attributes in one stylesheet
A small fallback with the same range maths as the CSS spec, so every browser looks the same
Physically correct springs, the logistic S-curve and Bézier curves as functions and as CSS linear()
Curves usable with Motion, GSAP, CSS transitions and Tailwind
prefers-reduced-motion respected by default
React components and hooks: Reveal, Parallax, ScrollProgress, useScrub
About 2 kB for a reveal, 3.4 kB for everything, checked in CI

FAQ

QuestionsShort answers.

Why not just use Motion or GSAP?

Both are excellent and do far more: layout animations, gestures, timelines. If you only need scroll-linked motion and good curves, Sigmoid lets the browser do the work and stays around 2 kB. Its easing curves also work inside Motion and GSAP.

Which browsers run it natively?

Browsers with CSS scroll-driven animations, such as Chrome, Edge and Safari 26. Others get the JavaScript fallback with the same result. The docs list the details.

Does it work with Next.js and Server Components?

Yes. The data-sigmoid attributes work in Server Components without client code. The React components are client components that render one element.

What happens with reduced motion?

Reveals and parallax are skipped and the content is shown. Only the reading progress bar stays, because it moves only when the user scrolls.

Articles

ArticlesGuides and release notes.

2026-10-05
Sigmoid 0.1.0 released
Scroll motion on native CSS scroll timelines, spring and S-curve easings as CSS linear(), reduced motion by default. About 2 kB, with React components.