Skip to content

component

Text Shuffle

By Aviral Lakhanpaul

Details

Summary

Drop the Text Shuffle component onto your canvas 2.

Description

Best suited for moments on your website where words need personality and impact. Features Character-level shuffle animation powered by Framer Motion Automatically selects a portion of characters per word for visual balance Multiple shuffle modes: Linear, Random, and Even/Odd Shuffle direction control: Left or Right Looping with configurable delay between loops Trigger on view (once or always) and on-hover retrigger Fully responsive and wrap-aware — ideal for long headings Customisation Options Text content and typography via Font control Shuffle direction, duration, stagger, and max delay Shuffle count (number of shuffles per character) Shuffle mode: Linear / Random / Even-Odd Colours for initial and final states Trigger settings: On View / On Hover / Looping / Loop Delay Set up 1. Drop the Text Shuffle component onto your canvas 2. Enter your headline or content in the Text field 3. Play with the properties, and you're done! After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it.

Introduction

Shuffling animated text effect

Rank history

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

120014001600164388/148/228/309/79/15
  • All · #6438