How to animate a background using text lines with the Typewriter animation

[Antoine]

Hello Armin,

First of all, thank you for the new features in Layhtheme: they’re brilliant.

My question today concerns the coloured lines animation that appears behind the ‘typewriter’ animation applied to the text on my homepage.

My problem is this: I’d like to place a video or a photo behind the text on my homepage whilst applying the typewriter animation to the text, but the issue is that the text wouldn’t be very legible. That’s why I’d like to add a coloured background to the typewriter animation, with lines appearing behind the letters of the text at the same time as the letters themselves.

I’ve tried modifying the CSS code to add this to the animation module, but it isn’t working properly.

How can I go about doing this?

I’ve attached a few example images to illustrate what I mean, as well as a link to my homepage with the animated text.

https://selah.fr/en/home/

Thanks in advance,
Have a nice day,
Antoine

[arminunruh]

thanks a lot.

So what you can do is you go to Text Formats and create a character or a headline text format, and in the Decoration tab, enable Background. It kind of looks like this:

Then apply that format to your text. You may want to select your text in the text editor first and click the clear formatting button so we make sure that this character or headline format that you apply is the only one that we apply, the only text format that we apply.

The clear formatting button is the button with the eraser icon.

Okay, so now you apply this new format that has the background color.

And then with the next Lay Theme update, the animation will work as you intend it to, because right now what you will see is that the background color of the text will simply just be already visible. Only the text will animate in on top of that, but with the next Lay Theme update it will work as you wanted. Have a great day!

[Antoine]

Hi Armin,
thank you for your quick reply.

OK, I see – I hadn’t thought of that solution with the text style; thank you.

I’ve carried out all the settings and steps you told me to, as well as the latest update.

Unfortunately, I’m still having two problems: I can’t centre my text with a background font (the text style doesn’t seem to support it), and the text animation with the background isn’t working properly. I’ve included a link to my test here so you can see for yourself.

https://selah.fr/accueil/

Thanks for your help!
Antoine

[Antoine]

[arminunruh]

hello can you please create a test page for me where i can see this?
cause now the texts on the page have no background color

[Antoine]

Hi Armin,

Great, thanks for your feedback.
I’ve copied the page with the effect so you can see it: https://selah.fr/en/home-copy/

[arminunruh]

thank you so much. I'm gonna work on it.

[arminunruh]

ok it will be fixed with the next update!

[Antoine]

Super ! Merci beaucoup Armin !

[Antoine]

Hi Armin, I’ve installed the latest update and the text display effect is working perfectly. The problem is, I made a mistake and deleted the pre-saved ‘typewriters’ effect – is it possible to restore the default settings? Many thanks. Antoine

[arminunruh]

there is no way to restore this.

you can try

animation type: typewriter
duration: 0 ms
stagger: 40 ms
stagger easing: linear
delay: 0 ms