Animation - Text gradient

Question

Hi, everyone. I have to tell you that I've been working with animations since the release, and I simply love this incredible new feature!

I'm currently creating this animation:
https://www.youtube.com/watch?v=UM8WNeqWWqM

It works, but when I want the text to be a gradient background image, the text no longer works. It's invisible.

Mr Bean · Answer

HI someone can help me please ? 🙂

Oleg Isonen · Answer

Hey, you know you gotta share the project and give us exact thing to look at and test 😉

Mr Bean · Answer

https://p-ee1a9099-fed8-4528-9880-7c9b8c0f6bad.apps.webstudio.is/?authToken=30ed64de-6af5-4ed5-ad2c-5bcbbe49d60d&mode=content
Here's the link. This is a test page.
But I'm having the same problem. Go to #simplicity. The first grid contains a text animation, but the gradient doesn't work.
Thanks 🙂

Oleg Isonen · Answer

you shared a content mode link, can't do anything in that

Mr Bean · Answer

Yes sorry :https://p-ee1a9099-fed8-4528-9880-7c9b8c0f6bad.apps.webstudio.is/?authToken=30ed64de-6af5-4ed5-ad2c-5bcbbe49d60d&mode=design

Mr Bean · Answer

🙂

yannick · Answer

I think here is an issue with the Text Animation Block it seems like it overrides the font color or only animates the font color so attributes like background-clip text get overriden. Maybe try writing the code on your own and integrate it like an js script for the animation. So you would have to write the text animation letter by letter or so on your own.

Join the Webstudio community

Animation - Text gradient