Ink Transition Scroll Effect

This Ink Transition Scroll Effect brings digital storytelling to life by mimicking the organic spread of ink on paper. Designed for a biography page, it reveals images using a “splatter” transition triggered by scrolling. It combines ScrollMagic for timing, GSAP for smooth text entry, and CSS Sprites for the complex ink mask animation.

Core Technique: CSS Sprite Masking

The most visually striking part - the ink spreading - is achieved without heavy video files or complex canvas code. It uses a CSS Image Sprite.

1. The Sprite Logic

The ink spread is actually a long strip image containing 39 frames of an ink blot growing larger.

• Container: A pseudo-element ::after covers the image.
• Animation: The CSS steps() function moves the background image instantly between frames, creating the illusion of motion (like a flipbook).

&::after {
  background-image: url('ink-transition-sprite.png');
  width: 4000%; /* Long strip width
  /* ... */
}

&.is-active::after {
  /* Move through 39 frames in 2 seconds */
  animation: ink-transition 2s steps(39) 0.5s forwards;
}

2. ScrollMagic Trigger

JavaScript uses ScrollMagic to detect when an image enters the viewport. Instead of animating the image properties directly via JS, it simply toggles a class (.is-active). This keeps the heavy animation logic in CSS, which is often more performant for frame-based effects.

const sceneInk = new ScrollMagic.Scene({
    triggerElement: ink,
    triggerHook: 'onEnter',
})
.setClassToggle(ink, 'is-active') // Adds class to trigger CSS animation
.addTo(controller);

3. SVG Liquify Filter

The main title features a “wobbly” entrance. This is done using an SVG <filter> with <feTurbulence> and <feDisplacementMap>. GSAP animates the scale attribute of the displacement map from a high value (distorted) to 0 (clear), making the text appear to settle from a liquid state.

Browser Support

This effect relies on modern CSS animation and SVG filters.

Key Technologies:

• CSS steps(): Universal support.
• SVG Filters: Well supported, but can be CPU intensive on large areas.
• ScrollMagic: Compatible with all browsers.