Animating text nodes (Airbnb style) - Kevin Powell - Community

Kevin Powell - Community•4mo ago•

8 replies

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>

<div>

s as there are letters, and each

<div>

<div>

s contains individual

Text

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

transform-origin

set to different percent value for each

<div>

<div>

).