Text Animator

A lightweight GSAP-based text animation library for scroll-triggered animations.

Installation

npm install text-animator

Usage

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import TextAnimator from 'text-animator';

// Initialize with default config
const animator = new TextAnimator('.your-container-selector');
animator.init();

// Custom configuration
const customAnimator = new TextAnimator('.your-container', {
  selectors: ['h1', 'p'],
  animation: {
    duration: 1.5,
    yOffset: -50,
    stagger: 0.2
  }
});
customAnimator.init();

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | selectors | Array | All text elements | CSS selectors to animate | | animation | Object | See below | Animation parameters |

Animation Config:

{
  duration: 1,
  yOffset: -100,
  ease: "power2",
  autoAlpha: 0,
  stagger: 0.25,
  childSelector: ".text-animation"
}

perfect syntax use case

npm install text-animator

import TextAnimator from 'text-animator';  // Import from npm package


const animator = new TextAnimator('.classtoanimate'); //it will be main wrapper
animator.init();