Skip to content

Text Reveal on Scroll Animation (anime.js)

A smooth animation that reveals text elements and SVG drawings as the user scrolls, transitioning them from half-visible to fully visible with subtle movements and opacity changes.

  • Lorem, ipsum dolor.

    test1

  • Lorem, dolor.

    test2

  • Lorem, ipsum.

    test 3

How It Works

This component creates a smooth animation that reveals text and SVG elements as the user scrolls down the page. The elements start at 50% opacity and gradually become fully visible with subtle movements.

// Core animation code
animate(svg.createDrawable(paths), {
  draw: ["0 0.5", "0 1"], // Start halfway drawn
  fill: ["rgba(128,128,128,0.5)", "#000"],
  duration: 2000,
  opacity: [0.5, 1],
  ease: "inOutExpo"
});

The animation timeline synchronizes with the user’s scroll position, creating an interactive effect that responds to user actions.