---
title: "VariableFontRotate — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Text. Text Animation Variable Font Text Rotate"
canonical: "https://framer.elliotli.dev/component/variablefontrotate"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/VariableFontRotate

# VariableFontRotate

Text Animation Variable Font Text Rotate

[View on Framer](https://framer.com/marketplace/components/variablefontrotate/?via=elliot-li)

![VariableFontRotate preview image 1](https://framer.elliotli.dev/og/component/variablefontrotate/3cea3b78bba85668/1600x1200.jpg)

## Summary

Text Animation Variable Font Text Rotate

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hzhv4ku0-6S85AliQ0IFakq9ndYivK8vTSHyrJM)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=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

## Rank history [How rankings work →](/terms#rankings)

-   All · #9793

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-04-04
- **Updated**: 2026-04-07
- **Added**: 2026-01-19
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos