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 
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 
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? 
Not that much 
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.
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
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
Hey Lna,
I was looking into the same solution and found this tutorial to be really helpful: Text Stagger Scroll Animations in Webflow - YouTube
Check out the animation called “Scrub Each Word” — this is done through custom code, not Webflow native animations, so may take some figuring out. But I think this is a good solution to your problem.
Note: this is a scrub on each word not each letter, but the desired effect is really nice.
