Is there any way to create a text loader animation in which the text change its color in the same way as a progress bar did?

diegoardila · January 24, 2021, 10:44pm

Hi!

I’d like to know if it is possible to do an interaction like the one I attached to the topic.

Thank you very much.

Andrew_Coderre · January 25, 2021, 1:03am

This is possible using a lottie animation or integrally using Webflow interactions. Neither option would be entirely difficult depending on your knowledge of After Effects and Webflow.

AC

diegoardila · January 25, 2021, 1:10am

Hi @Andrew_Coderre thank you for your answer! If I want to do it using webflow interactions. Do you Know how to do it? Or May be do you Know where to find information like a tutorial or things like that?

Thanks again!

Andrew_Coderre · January 25, 2021, 1:57am

@diegoardila,

I did a quick mock-up of it to remind myself how. I didn’t create the slider or anything, just the text loading effect you are looking for. Here is the live link to the page in my sandbox:
https://www.coderre.co/sandbox/text-loader

And a read only for a backup page to see how it is put together:
https://preview.webflow.com/preview/coderreco-sandbox?utm_medium=preview_link&utm_source=designer&utm_content=coderreco-sandbox&preview=2bf1bfa6a84bd37c629ccb2b34486a63&pageId=600e24e1bed22902a069260c&mode=preview

AC

Andrew_Coderre · January 25, 2021, 2:02am

Make sure to pay attention to the size and layout of the different elements, it is the most important part. You can probably copy the container from the read only into your website then style it as necessary.

diegoardila · January 27, 2021, 12:26pm

Thanks a lot for your help!
I’m still trying to replicate what you did