I'm currently working on a freelance website project using Gatsby for the frontend and Sanity for the CMS. It's for a large tech company and one visual request was a for a text shuffler showcasing their service offerings using animated shuffled text like this:

Here's the process I went through to complete the shuffling text component using Gatsby for the frontend and Sanity for the data modeling.

(** The animation of the shuffling text was found online and modified to work with Gatsby & Sanity. This tutorial does not include the shuffling effect explanation)

To show how I put together the component I'll be using the following block of text:

I am a Gatsby Developer.

I am a Sanity Developer.

I am a Website Consultant.

The repeating phrase 'I am a' will remain static. The end of the sentence will be animated using a shuffle and the text will change from one phrase to another. It also loops when it gets to the end. For example:

Requirements I drafted up before getting started:

• Create the ability for the client to easily manage and change the shuffling text and also the non-shuffling part of the phrase.
• Setup this text effect in a way that allows for multiple areas of shuffling, and multiple static parts of the phrase.
• Allow for client-side styling of both sections of the phrase, or a global styling for the entire phrase. In the example above the beginning is a normal text style, the shuffled text is bold. In the example below, there is normal text followed by a headline:

Some text is small. Some text is...

How this text shuffler was built:

Shuffle Effect:

There are a fair amount of Javascript and React shuffler effects that can be found online. To save some time I found a react component that I could pull apart and slightly modify to fit my needs.

Here's the original text effect - Credit: Łukasz Kółko

Sanity:

Sanity does almost the entirety of the work through its content modeling process. It was pretty straight forward to build out.

Sanity's content modeling process is built using schemas that define the content model. I divided this model into 3 schemas

1: Shuffled Text Section - This is the primary schema and allows for you to pick either a shuffling array of phrases or a static text block. (Shuffled Text or Standard Text)

2: Shuffled Text - This schema allows you to pick and organize multiple strings that will shuffle in order.

3: Standard Text - It's a block of standard text...

Gatsby:

Not too much was needed in Gatsby. I brought in the text shuffle component I found online and integrated the data from sanity. Theme-UI made styling pretty quick as well via the sx prop in the JSX.

I'm pretty happy with the end result, ease-of-use for the client, and the reusability moving forward.