v5.0.0

[yesiamrocks]

Major Text Animation Overhaul

New Features

• Letter-by-Letter, Word-by-Word, and Line-by-Line Animations Introducing granular text animations:
  • Letter-by-Letter Animation: Animate each letter sequentially, randomly, or in reverse.
  • Word-by-Word Animation: Animate text one word at a time.
  • Line-by-Line Animation: Animate text line by line, with support for custom separators.
• Flexible Animation Class Support: No longer limited to .ca__le* classes. Now, any CSS animation class can be used with text animations, providing greater flexibility.
• Enhanced Timing Control with ca__lt-delay and ca__lt-base-duration Fine-tune animation timing:
  • ca__lt-delay: Specify delays (in milliseconds) for each unit (letter, word, or line).
  • ca__lt-base-duration: Set a base duration for animations, overriding default durations.

Example Usage

<h1 class="cssanimation" ca__lt-sequence="ca__fx-FadeIn">Animate Me</h1>

<p class="cssanimation" ca__lt-word="ca__fx-SlideUp" ca__lt-delay="100">Word by word animation with delay</p>

<h2 class="cssanimation" ca__lt-line="ca__fx-FlipIn" ca__lt-separator="dot">First sentence. Second sentence.</h2>

Migration Instructions

Version 5.0.0 introduces a significant overhaul of how text-based animations (Letter-by-Letter, Word-by-Word, Line-by-Line) are configured. This version moves away from a reliance on the .ca__le*CSS class to a more flexible and powerful attribute-based approach.

• Simplified HTML Markup: Previously, letter animations required .ca__le* classes. Now, simply add the ca__lt-* attribute to your HTML elements:

Previous

<h1 class="cssanimation ca__lt-FadeIn sequence">Animate Me</h1>

Now

<h1 class="cssanimation" ca__lt-sequence="ca__fx-FadeIn">Animate Me</h1>

Attribute-Based Control

New animation control attributes: Customize animations directly in HTML using attributes:

• ca__lt-sequence: Animate letters in order
• ca__lt-random: Animate letters randomly
• ca__lt-reverse: Animate letters in reverse
• ca__lt-word: Word-by-word animation
• ca__lt-line: Line-by-line animation
• ca__lt-delay: Delay between items in ms
• ca__lt-base-duration: Override default duration
• ca__lt-separator: Define custom separators for line animations (e.g., "dot" for periods).

Additional Enhancements

• Improved Documentation: Comprehensive guides and examples are available in the README, detailing usage and customization options.
• Demo Page Updates: The demo page now showcases the new animation features with updated examples and interactive previews.

For detailed examples and further information, please refer to the official documentation.

Let me know if you need assistance with integrating these new features into your project!

---

This discussion was created from the release v5.0.0.