Animating text nodes (Airbnb style)
Has anyone attempted to do this style of animated text (the "Now you’ll see one price for your trip, all fees included." in the video from the landing page of airbnb.com)? I can't tell exactly how this is accomplished: inspecting the HTML, I see that there are as many
<div>s as there are letters, and each <div>s contains individual Text nodes for each letter (though I can't tell how that would help) and they seem to have pre-calculated the bounding rect of each letter (seeing transform-origin set to different percent value for each <div>).
6 Replies
Here's my attempt at reverse-engineering something, using way more markup (there's
<span> + <div>s around each letter) https://codepen.io/ptrfrncsmrph-the-vuer/pen/myPmyYv. Curious about other approaches, if anyone's seen a pure CSS version of this for example (but maybe that's impossible)?This can be achieved with just CSS.
You would need to divide the words up into spans and use a keyframe animation to move them up and down, adding a delay to each letter so that it animates slightly after the previous one.
Ideally you would use sibling-index() to calculate the delay but, as that is not yet widely supported, you would need to add a custom prperty to each span to define its “index” then use this value to calculate the delay.
There are cdns incliding GSAP that have a library for this kind of thing. If I’m not mistaken though GSAPs Split Text is paid.
Try Split Type , an open source alternative
https://unpkg.com/split-type
Ah, sorry, I didn’t take a proper look at your code earlier. I see that you are already using a css key frames animation with a delay based on the index.
So your question is really just about how to split up the text into separate elements.
So your question is really just about how to split up the text into separate elements.
yeah... I think maybe I'm using more markup than needed
also I notice that although I have
transform-origin: center, the scale transform appears to have horizontal origin on the left of each letter (vertically it does seem to be centered)
It does seem like I need to at least add some element around each character, since Text nodes/Ranges seem to only be styleable in a very limited way with Highlight APIfound a guide here: https://web.dev/articles/building/split-text-animations
the scale transform appears to have horizontal origin on the left of each letter (vertically it does seem to be centered)it seems like I just need
inline-block on each span (from that article). also, can't remember why I thought I needed to have the entire sentence replicated so many times 😅 but ... also not sure why the Airbnb example does the sameweb.dev
Building split text animations | Articles | web.dev
A foundational overview of how to build split letter and word animations.