Animation Presets: Color Effects & Distressed (Batch 1/5)

by Admin 58 views
New Animation Presets: Color Effects & Distressed (Batch 1/5)

Hey guys! Ready to dive into some seriously cool animation stuff? We're talking about a whole new set of animation presets designed to give your videos a fresh, eye-catching look. This is Batch 1 of 5, so buckle up – there's a lot of creative goodness coming your way! We're focusing on some amazing color effects and a seriously cool distressed look to add depth and visual interest to your projects. Let's get started, shall we?

1. Horizontal Text Progress Bar Fill Animation

Imagine a loading bar, but instead of a boring rectangle, it's your text! This effect creates a horizontal text progress bar fill animation where the text gradually fills with color from left to right, like liquid pouring into transparent glass letters. Think of it as a video editor would: a mask wipe transition applied to text, where the colored version of the text is revealed progressively. The effect should feel smooth and satisfying, like watching a loading bar complete but applied to typography. Picture this: your words slowly filling with vibrant color, creating a dynamic and engaging visual.

Technically speaking, this is achieved with a two-layer approach: a base layer of fully colored text and a top layer of outline/transparent text with a sliding mask. We're using a BaseLayout container with relative overflow-hidden to make sure everything stays within bounds. The magic happens with a keyframe effect that animates a clip-path or translateX on an overlay div from -100% to 0%. To make it even smoother, we're using ease-out easing for natural deceleration. And for that extra touch? A subtle glow or highlight at the fill edge to enhance the liquid effect. It's all about making your text pop!

Key Technical Specs:

  • Structure: BaseLayout container with 'relative overflow-hidden' containing two TextAtom components absolutely positioned.
  • Bottom layer: fully colored text.
  • Top layer: outline/transparent text with a sliding mask.
  • Animation: keyframe effect animating clip-path or translateX on an overlay div from -100% to 0%.
  • Timing: Use full parent duration with ease-out easing for natural deceleration.
  • Enhancements: Add a subtle glow effect at the fill edge using a gradient mask or box-shadow.
  • Performance: Use transform and will-change for GPU acceleration.

2. Vertical Bottom-to-Top Text Fill Animation

Next up, we're going vertical! This animation simulates water rising inside hollow letter shapes, filling them from the bottom to the top. From a video editing perspective, this is like using a gradient wipe with a soft edge, creating an organic fill pattern. The fill has a slight wave motion at the top edge, just like liquid settling. To really sell the effect, we're including subtle bubbling or shimmer effects within the filled portion to enhance the liquid metaphor. We want this animation to feel weighty and physical, like gravity is actually affecting the fill speed. How cool is that?

This is done with a BaseLayout with relative inline-block containing a TextAtom with a gradient background. We apply a CSS linear-gradient with an animated background-position from bottom to top. It's all about creating the illusion of rising liquid! We're also throwing in a second effect for subtle scale oscillation to simulate the liquid's natural movement. And to add that extra layer of realism? A ::before pseudo-element for wave animation at the fill line. Get ready for your text to come alive!

Key Technical Specs:

  • Structure: BaseLayout with 'relative inline-block' containing a TextAtom with a gradient background.
  • Animation: CSS linear-gradient with animated background-position from bottom to top.
  • Timing: 80% for main fill, 20% for settle animation.
  • Movement: Add a second effect for subtle scale oscillation on the Y-axis to simulate liquid movement.
  • Enhancements: Include a ::before pseudo-element via style prop for wave animation at the fill line using SVG filters or clip-path.

3. Radial/Circular Text Fill Animation

Time to get circular! This animation makes text fill from the center of each letter outward, like dropping ink into water. Think of it as multiple circular mask reveals synchronized across each character. The fill starts as a small dot in the geometric center of each letter and expands outward in a perfect circle, eventually flooding the entire letter shape. We're going for a mesmerizing, expanding effect!

We're using a BaseLayout with flex gap-1 containing multiple TextAtom components (one per character). The magic happens with radial-gradient backgrounds that have animated size/position. We're also using staggered timing to create a wave effect across the letters. To spice it up, we might even add subtle hue-rotate filter animation for some color variation. For performance, we'll composite layers for each character. It's all about making sure each letter gets its own spotlight!

Key Technical Specs:

  • Structure: BaseLayout with 'flex gap-1' containing multiple TextAtom components.
  • Animation: radial-gradient backgrounds with animated size/position.
  • Timing: Staggered timing via repeatChildrenProps with offset delays for wave effect across letters.
  • Enhancements: Add subtle hue-rotate filter animation for color variation.
  • Performance: Composite layers for each character, use transform: translateZ(0) for GPU promotion.

4. Typewriter-Style Progressive Fill Animation

Remember typewriters, guys? This animation brings that classic feel to your text. It's a typewriter-style progressive fill where text fills character by character from left to right, but instead of appearing, each letter transitions from hollow/outline to filled. Each letter has a quick fill animation when its turn comes. We're adding a touch of nostalgia!

We're using a BaseLayout with flex flex-wrap containing TextAtom components for each character. We're leveraging word data for precise timing. A sequence of generic effects with staggered animation ranges is used for each character's opacity and background fill. To make it pop, a rapid ease-in-out over 200ms per character is used. We're also adding a trailing BaseLayout div as a cursor, and the total duration is calculated based on character count. We might also add some subtle scale and brightness effects during each character's fill moment. Get ready for a classic look!

Key Technical Specs:

  • Structure: BaseLayout with 'flex flex-wrap' containing TextAtom components for each character.
  • Animation: A sequence of generic effects with staggered AnimationRanges for each character's opacity and background fill.
  • Timing: Rapid ease-in-out over 200ms per character.
  • Enhancements: Add a trailing BaseLayout div as a cursor. Add subtle scale and brightness effects during each character's fill moment.

5. Gradient Sweep Fill Animation

Alright, let's add some dynamism. This animation features a gradient sweep fill that moves diagonally across the text from top-left to bottom-right, like a scanner beam passing over and energizing the letters. The fill should leave a brief trail of enhanced brightness that fades back to normal, creating a scanning effect. It's all about adding a sense of movement!

We're using a BaseLayout with relative overflow-hidden containing a TextAtom with an animated linear-gradient. We're animating the gradient angle and position using generic effects on the backgroundImage property. This creates a sweeping animation from a specific angle with animated stop positions. We're also adding a secondary filter effect for brightness boost that follows the sweep with a slight delay. And to add that extra visual interest? ::after pseudo-element for particle effects. Get ready to scan and energize your text!

Key Technical Specs:

  • Structure: BaseLayout with 'relative overflow-hidden' containing a TextAtom with an animated linear-gradient.
  • Animation: Animate the gradient angle and position using generic effects on the backgroundImage property.
  • Enhancements: Add a secondary filter effect for brightness boost that follows the sweep with a slight delay. Include ::after pseudo-element for particle effects using CSS animations.
  • Timing: Ease-in-out over full duration.

That's it for Batch 1! I hope you guys enjoyed this. Stay tuned for Batch 2, where we'll explore even more awesome animation techniques. Happy animating! Let me know what you think, and if you have any questions, feel free to ask! Thanks for reading! This is the place for all things animation. Don't miss out on Batch 2!