VariableFontRotate

VariableFontRotate

About VariableFontRotate

Overview

Dynamic text rotation with variable font weight transitions. Each character animates individually with staggered timing, creating captivating typography effects.

Features

Variable Font Animation Animate font weight from light to bold (or any weight range) as text rotates, creating a dynamic typographic experience.

Staggered Character Animation Each character animates independently with customizable stagger direction—from first, last, center, or random.

Multiple Slide Directions Choose from up, down, left, or right slide directions to match your design's flow.

Spring & Ease Transitions Select between bouncy spring physics or smooth ease transitions for different visual effects.

Use Cases

Hero Headlines — Create eye-catching animated headlines that captivate visitors on landing pages.

Feature Highlights — Rotate through product features or benefits with engaging typography.

Creative Portfolios — Add dynamic text elements to showcase creative work and personal branding.

Marketing Pages — Draw attention to key messages with animated text transitions.

Properties

  • Texts: Multiple text lines to rotate (one per line)

  • Font: Variable font with extended controls

  • Use Slant Axis: Enable slant animation (for fonts with slant axis)

  • From Slant: Starting slant value (-15 to 15)

  • To Slant: Ending slant value (-15 to 15)

  • Interval: Time between text rotations (ms)

  • Speed: Transition duration (s)

  • Type: Spring or Ease transition

  • Direction: Slide direction (Up, Down, Left, Right)

  • Stagger From: Animation start point (First, Last, Center, Random)

  • Stagger Delay: Delay between characters (s)

  • Auto Rotate: Enable automatic text rotation

  • Loop: Loop through texts continuously

  • Animate On Enter: Animate when component appears

  • Text Color: Color of the animated text

Customization

Content Settings

  • Add multiple text lines (one per line) to rotate through

  • Choose any variable font for weight animation support

Animation Controls

  • Adjust rotation interval and transition speed

  • Select slide direction and stagger pattern

  • Enable/disable auto-rotation and looping

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Version

1.0.0