Create Scroll-Triggered Letter Animations – AniLet.js

AniLet.js is a viewport-aware text animation library that animates individual letters when text elements scroll into view.

It splits text into separate spans and applies staggered animations to create typewriter-style effects with visual flair.

Features:

• Letter-Level Animation: Splits text into individual character spans and animates each letter independently with configurable delays.
• Viewport Detection: Triggers animations automatically when elements enter the viewport using scroll event listeners and bounding rectangle calculations.
• Multiple Animation Styles: Includes 11 pre-built animation types ranging from simple fades to complex bounce and fall effects.
• Customizable Timing: Accepts data attributes for per-letter delay and total animation duration, giving precise control over animation speed.
• Class-Based API: Uses simple CSS class names for activation. Requires no JavaScript configuration or initialization code.
• RequestAnimationFrame: Implements smooth animations using browser-native requestAnimationFrame for optimal performance.
• Automatic Initialization: Self-executes on DOM ready without requiring manual function calls or explicit setup.

See It In Action:

Use Cases:

• Landing Page Headlines: Animate hero section headlines and taglines to create amazing first impressions when visitors scroll down the page.
• Section Headers: Trigger animations on section titles as users navigate through long-form content.
• Call-to-Action Text: Draw attention to important CTAs and conversion elements by animating key phrases when they enter the viewport.
• Portfolio Introductions: Create dynamic text reveals for project descriptions, client testimonials, or about sections in creative portfolios.

How To Use It:

1. For npm-based projects with bundlers like Webpack or Vite, install the package and import the built file:

# NPM
$ npm install ani-let

import 'ani-let/dist/aniLet.min.js';

2. For projects without a build step, reference the library directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/ani-let/dist/aniLet.min.js"></script>

3. Or download the file and host it locally:

<script src="/path/to/aniLet.min.js"></script>

4. Add the aniLet base class and one animation modifier class to any text element. The library automatically initializes on page load and watches for scroll events.

The animation triggers when 90% of the element enters the viewport, animating each letter sequentially with a default 50ms delay between characters.

<div class="aniLet aniLet__fadeIn">Text Here</div>

5. The library currently provides 11 animation styles through modifier classes:

• aniLet__fadeIn: Letters fade in with subtle scale increase from 95% to 100%.
• aniLet__slideUp: Letters slide upward from below their final position.
• aniLet__slideDown: Letters slide downward from above their final position.
• aniLet__zoomIn: Letters scale from 30% to 100% with synchronized opacity.
• aniLet__fadeInLeft: Letters slide in from the left while fading in.
• aniLet__fadeInRight: Letters slide in from the right while fading in.
• aniLet__fadeInDown: Letters slide down from above while fading in.
• aniLet__fadeInTopLeft: Letters move diagonally from top-left while fading.
• aniLet__fadeInTopRight: Letters move diagonally from top-right while fading.
• aniLet__bounceIn: Letters scale through multiple size stages creating a bounce effect.
• aniLet__fallDown: Letters drop from -1200px with a two-stage animation and scale change.

6. Tweak the animation’s timing with these data- attributes:

• data-delay: Sets the delay between each letter’s animation in milliseconds. The default is 50.
• data-duration: Sets the total duration for the entire text animation in milliseconds. The default is 1000.

<div class="aniLet aniLet__zoomIn" data-delay="80" data-duration="800">
  Custom Timing
</div>

How It Works:

AniLet.js works through a three-stage process: text splitting, viewport monitoring, and frame-based animation rendering.

During initialization, the library queries all elements with the aniLet class and wraps each character in a span element with inline-block display and zero opacity. Spaces get converted to non-breaking spaces to preserve layout. This text splitting happens only once per element, tracked via a data attribute flag.

The viewport detection system uses scroll event listeners combined with getBoundingClientRect() calculations. An element triggers its animation when its top edge crosses 90% of the viewport height and its bottom edge remains above the viewport top. Once triggered, the scroll listener removes itself to prevent re-triggering.

The animation engine uses requestAnimationFrame for smooth rendering. Each letter gets its own animation function that calculates progress based on performance.now() timestamps. Progress values feed into cubic easing functions (specifically 1 - Math.pow(1 - progress, 3)) that create natural acceleration. Different animation types apply these eased values to CSS transform properties. The bounce animation implements a multi-stage timeline with different scale and opacity values at specific progress thresholds.

The library avoids CSS transitions entirely, instead calculating and applying transforms on every frame. This approach gives precise control over timing and easing curves while maintaining compatibility across browsers.

Alternatives:

• Splitting.js: Focuses purely on text splitting without built-in animations, giving you more control but requiring separate animation libraries like GSAP or Anime.js.
• TextillateJS: Provides similar letter animations but depends on jQuery and Animate.css, adding considerable dependency weight compared to AniLet’s standalone approach.
• Anime.js: A full-featured animation engine that can animate anything, including individual letters. It’s far more powerful but also much larger and more complex than AniLet.js.
• Typed.js: A popular library focused on creating typewriter effects. It offers more complex logic, like backspacing and looping, but is less focused on scroll-triggered CSS animations.

FAQs:

Q: What happens if I apply multiple animation classes to the same element?
A: The library checks classes in a fixed order defined in its internal map object. Whichever animation class appears first in that map will be used, regardless of HTML class order. Only one animation type can be active per element.

Q: Does this work with dynamically inserted content?
A: No. The library only initializes once on DOM ready. Text added after page load won’t be processed.

Q: How does this affect SEO and screen readers?
A: The text content remains in the DOM and accessible to crawlers and screen readers since the library only wraps characters in spans without changing the text itself.

Related Resources:

• 10 Best Typewriter Text Animation JavaScript Libraries

The post Create Scroll-Triggered Letter Animations – AniLet.js appeared first on CSS Script.