Streaming live at 10am (PST)

How to seperate every single letter in a heading with text span?

Hey folks,

I’m trying to build an interaction where I’d like to move around every single letter within a one word heading. Therefore, I tried to span every letter of the heading into seperate text spans.

The problem is, every time I add a span to the letter next to one that is already spanned, it is added to the existing span. Is there any way to prevent that from happening? Or is there a better way to solve it?

1 Like

Hey @ChrisT

Check this out >

Piter :webflow_heart:

1 Like

Works like a charm!

I thought about adding spaces but didn’t know that removing them later keeps the spans like intended.

Thanks a million for your quick response and the effort of making a loom.

1 Like

Happy to help :webflow_heart:

Feel free to reach out if you have any questions

Another way of keeping different spans is to simply add a class to each after creating it. This way the next letter with the span will not be autoadded to the previous one.


I’ll keep that in mind too. Thanks for pointing out an alternative solution!

1 Like