Position Lottie animation relative to text span

Design help General
1

I’m trying to achieve something like the image below, where the line around the text is actually a Lottie animation that is always relative to the first word in the heading. If the word changes, the Lottie animation should grow/shrink in width along with it. For SEO purposes, the heading needs to be a single H1. That’s why I’m thinking it needs to be relative to a span, but of course you can’t drop a Lottie animation into a header element.

I’ve tried wrapping the Lottie animation and the heading in a div that is position: relative and positioning the animation absolute, but it’s not reliably lined up with the text at every screen size within breakpoints since the text is center aligned.

Header Section
Header Section1440×528 72.8 KB

:point_up: What it should look like on desktop

Header Section Mobile
Header Section Mobile400×694 56.7 KB

:point_up: What it should look like on mobile

2

Hi James,

Without seeing how your project is built, would having an sr-only class for your H1 make it easier for you. That way you can have multiple text block elements to achieve your desired look but still have a dedicated H1 for SEO/Screen readers

3

Hey James,

Did you see this video?

I haven’t tested yet this for the mobile, but for the desktop it works. I used it for the svg path animation, but this should work for Lottie as well.

Would be nice to hear if you found an alternative solution as well.