text-flashy-reveal.js

v0.1.1

Published

11 days ago

A lightweight JavaScript library for creating beautiful text flashy-reveal animations that trigger on scroll.

0High
0Medium
0Low

rogeriotaques

text reveal flashy-reveal lightweight customizable zero-depencies vanilla-js

TextFlashyReveal.js

A lightweight JavaScript library for creating beautiful text flashy-reveal animations that trigger on scroll. Perfect for headers, hero sections, and any text that needs to grab attention with a smooth, staggered reveal effect.

✨ Features

🎯 Zero dependencies - Just plain JavaScript
🎨 Customizable - Adjust colors, timing, and animation behavior
📱 Scroll-triggered - Uses Intersection Observer for performance
🔄 Replay support - Animations can replay on scroll
⚡ Lightweight - Minimal impact on your bundle size

🚀 Quick Start

<!DOCTYPE html>
<html>
<head>
    <title>TextFlashyReveal.js Demo</title>
</head>
<body>
    <h1 id="hero">Welcome to TextFlashyReveal.js</h1>
    
    <script type="module">
        import { textFlashyReveal } from "./text-reveal.js";
        
        textFlashyReveal(document.querySelector("#hero"));
    </script>
</body>
</html>

📖 API Reference

`textFlashyReveal(element, options)`

Parameters:

element (HTMLElement): The text element to animate
options (Object): Configuration options

Options:

{
    accentColor: "#ff7a00",    // Color during fade-in
    finalColor: "#000",         // Final color after animation
    revealDelay: 40,            // Delay between characters (ms)
    fadeDuration: 350,          // Fade-in duration (ms)
    colorDelay: 300,            // Color transition delay (ms)
    replay: false,              // Replay animation on scroll back
    threshold: 0.4              // Intersection observer threshold
}

Returns:

Function: Cleanup function to disconnect the observer

💡 Examples

Basic Usage

import { textFlashyReveal } from "./text-reveal.js";

textFlashyReveal(document.querySelector("h1"));

Custom Colors and Timing

textFlashyReveal(document.querySelector("#hero"), {
    accentColor: "#3b82f6",
    finalColor: "#1e293b",
    revealDelay: 25,
    fadeDuration: 200
});

Replay on Scroll

textFlashyReveal(document.querySelector("#replay-text"), {
    replay: true,
    threshold: 0.5,
    revealDelay: 35
});

🎯 Use Cases

Hero sections - Make your main headlines pop
Feature lists - Reveal bullet points with style
About sections - Add personality to your story
Call-to-actions - Draw attention to important messages
Portfolio pieces - Give your work that extra polish

🔧 How It Works

TextFlashyReveal.js splits text into individual character spans, then uses CSS transitions and Intersection Observer to:

Hide characters initially
Detect when element enters viewport
Stagger character reveals with randomized order
Transition from accent color to final color
Optionally reset for replay

📄 License

MIT License - feel free to use in personal and commercial projects.

👨‍💻 Author

Created by Rogerio Taques

Made with ☕️ and plain JavaScript! 🎉