Text Effect

Hi!

I am trying to create a text effect, that the letters would be appearing as you scroll down the page similar to this website.
http://officenter.gr/dao/

The only thing is that I want to make it more smooth than this and also wondering if each letter separately could have this effect instead of the whole line.

In this example JS has been used to. Is there any way that this can be created with only css or maybe should I use a plugin in JS to be faster?

If you want an animation that is applied to an element as it scrolls into the viewport then there is no way to trigger this unless you use JS to detect when the element has entered the viewport.

Once you have detected that the element is in view then you can apply your css animation to it. You can animate all the letters of a sentence separately but you would need a span around each letter and an appropriate key frame for each.

This may help

https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/

1 Like

Yes thank you!
I have definitely to use JS

1 Like