Create a Text Animation

Is it possible to animate text like this?

This effect works with a background image. So, you set

CSS on your text

root {
    background-image: url(https://karopack.de/wp-content/uploads/2021/05/start_niederlassung-682x1024-1.jpg);;
    background-clip: text;
    -webkit-background-clip: text;
    background-position-x: 0px;
    color: transparent;
}

You would then have to animate the

Animation Object

{
    background-position-x: -50px;
}

Or do you mean animating the entire thing? That would be trivial after applying the “texture” using the background-clip trick. The above example is to illustrate moving the image inside the text.

I’m concerned with the shifting of the text when scrolling. Up and down

Oh! Sorry, okay… you want to animate the entire headline. That would be done with a fromTo animation. I think it should be part of the next update. In the meantime you could use a to animation, but set the element to initially x:-50vw and animate it to x:50vw for example. FromTo will make it easier.

1 Like

0.9.4 will include the SplitText plugin. Then you will can whatever you want with text layers! :nerd_face:

3 Likes