Scroll animation · .sds-scroll-pixel-in

Pixel In

Resolves from a heavy blur and slight zoom to sharp full detail. Add the class .sds-scroll-pixel-in to any element — it plays once when scrolled into view, with no JavaScript beyond the optional 1.3 KB scroll gate (or native scroll-driven animation with sds-scroll-auto).

Live demo

Scrolls into view

Demo uses this site's neutral theme; override --sds-primary to match your brand.

Quick start

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/scroll.min.css" />

<div class="sds-scroll-pixel-in" data-sds>Scrolls into view</div>

Loads only the scroll bundle (core is included).Prefer one file? Use https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css (all 604 effects).

How it works

Plays when the element enters the viewport (gated by data-sds + the scroll engine, or fire it yourself by adding the class). It animates filters (blur/brightness), opacity and movement and scale (transform) — compositor-only, so it never causes page reflow. Timing is fixed for this effect, but you can still override animation-duration/timing-function on the element.

Technical details

Class	`.sds-scroll-pixel-in`
Category	Scroll
Runs	plays once, when scrolled into view
Animated properties	filter, opacity, transform
Compositor-only	Yes — transform/opacity only, no layout reflow
Needs child elements	No
Needs per-character spans	No
JavaScript	sds-scroll (optional)
Keyframes	sds-scrollPixelIn
Design tokens	n/a
Since	4.0.3

Copy-paste code

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css" />
  </head>
  <body>
    <div class="sds-scroll-pixel-in" data-sds>Scrolls into view</div>
    <script src="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/sds-scroll.min.js" defer></script>
  </body>
</html>

React / Next.js

import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";
import "@salkomdesignstudio/sds-motion-forge/dist/sds-scroll.min.js"; // optional 1.3 KB scroll gate (client-side only)

export default function Demo() {
  return (
    <div className="sds-scroll-pixel-in" data-sds>Scrolls into view</div>
  );
}

Angular

// angular.json → architect.build.options.styles:
//   "node_modules/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css"
import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `
    <div class="sds-scroll-pixel-in" data-sds>Scrolls into view</div>
  `,
})
export class DemoComponent {}

Tailwind CSS

/* app.css — Tailwind v4 */
@import "tailwindcss";
@import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";

/* then use the class like any other: */
<div class="sds-scroll-pixel-in" data-sds>Scrolls into view</div>

Typed React, Angular, Tailwind and Web Components wrappers live in packages/ in the repository and are not yet published to npm; the snippets above need only the CSS.

Related animations

All 100 scroll animations · Installation & usage docs · Custom bundle builder