Streaming live at 10am (PST)

Font filling on scroll

Does somebody know how to implement such a animation, where the font are filling in on scroll?
(I attached the website where I got this from: Create Award Winning Animation and Interaction Design In Webflow (Online Course)) - Funny enough it’s about interactions with webflow but course is only available in June :wink:


Here is my public share link: LINK
(how to access public share link)

It looks like they just broke up each word into individual letters (with spans) and then animated the fill color based on the scroll position:

I’m not sure if there’s any other sort of trickery other than just a lot of time and energy for all the text, but hopefully that points you in the right direction to prototype something similar :+1:

Hey,

thanks a lot! How would you proceed to animate the fill based on the scroll position in webflow?

Have a good one!

You’d section the section, or container that the text/span is in. Go to interactions and create a new element trigger for ‘scroll into view’. Start a new animation, select the text span and add an interest to change the colour.

Thanks George,

I tried to do this but realized that there are a limit of spans I can add in one animation, right? Thanks

Hey, I’ve never tried it so I don’t really know. Out of interest, how many spans did you manage to create? :joy:

Not that much :sweat_smile:

It kind of work but I am not really convinced by the result. It works better with empty fonts as original state, and I have no clue how to do that. But thanks)))

I’m not following you. What do you mean by empty fonts?

ah my bad, as you see in the example, it seems like there is only the border of the font in the original state which is gradually filled in on scroll. I meant this effect. So far I manage to only change the color from pink to black on scroll.
This empty effect of the font - I don’t know how to achieve this.

Yeah that’s beyond me. I’d think some sort of vector overlay. Looks really cool though.

1 Like

Each letter is in a span.
The spans are in a flex container.
That container font CSS is:

color: transparent;
webkit-text-stroke-width: 1px;
webkit-text-stroke-color: #202121;

That’s how you get the effect of stroked letters.
as you scroll, each span is added with the class=“fill”.
The class “fill”, ads the text fill color #202121 with a 0.3s transition.

You understand by now, you must use some custom coding to achieve this effect.

The closest option you have to achieve this effect, without using any custom coding -
natively in Webflow, is using Lottie.
You can easily animate this effect, or any other cool text animation,
using “while scrolling” to animate it with some smoothing.
Upside: It will perform great. better than the effect you referred to.
Downside: it’s an animation. NOT TEXT! so use it accordingly,
with all the repercussions in consideration.

My two cents… learn " DevTools". you have time until June :wink:
it will assist and improve you in any aspect of web development.

Thanks a lot!

I managed to do it with “scrolling into view” animation feature and spanning each letters while adding the custom code for the stroked letters.

But I am gonna give it a go with Lottie, to see if the rendering is better.

Thanks for the tip, I am trying to use dev tool on regular basis now - still need to get familiar with the interface though.

All the best