Skip to content

component

Highlight Cycling

By Sanna Granqvist

Details

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.

Introduction

Text cycling with animated color bar

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100113478/148/228/309/79/15
  • All · #1089