---
title: "Highlight Cycling — Free Framer component · Best of Framer"
description: "Free Framer component · by Sanna Granqvist · Text. Text cycling with animated color bar"
canonical: "https://framer.elliotli.dev/component/highlight-cycling"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Highlight Cycling

# Highlight Cycling

Text cycling with animated color bar

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

![Highlight Cycling preview image 1](https://framer.elliotli.dev/og/component/highlight-cycling/cd535da411b90cb8/1600x1200.jpg)

## Summary

Text cycling with animated color bar

## Description

**How the cycle works**

Hold → Cover → Reveal → repeat. The bar wipes in to hide the current word, the text swaps underneath, then the bar pulls away. One smooth motion, no visible cut.

-   Wipe from any direction — left, right, up, or down
    
-   Per-word colors that lock in at the start of each cover phase and hold through the full reveal
    
-   Container width animates between words so the layout adjusts around different lengths
    
-   Optional appear effect: a one-time scroll-triggered reveal before the loop begins
    

Timing splits into two controls — how long each word holds, and how long the transitions take. The easing is a power3 curve, so the bar accelerates in and decelerates out of each pass.

**Controls:** word list, marker colors (per-word or single), wipe direction, cycle hold duration, transition duration, text style, appear effect toggle.

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

-   All · #1583

## Details

- **Author**: Sanna Granqvist
- **Published**: 2026-03-02
- **Updated**: 2026-05-15
- **Added**: 2026-02-25
- **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