: How to gradually reveal letters in website text? Hope it's the appropriate address for this question. Imagine the letter 'A' on a website (in a div), at a sufficiently large font to see the
Hope it's the appropriate address for this question. Imagine the letter 'A' on a website (in a div), at a sufficiently large font to see the effect.
How could I gradually reveal the letter such that it appears as if the letter was written with a pen (I don't mean reveal letter by letter)?
Note: I would like to do this in code (if possible) and not requiring a pre-animation step. It should work interactively on a website, such that letters typed on a keyboard appear as if they were hand written (just in a machine type font).
More posts by @Pierce403
1 Comments
Sorted by latest first Latest Oldest Best
There are several different approaches you can take, just as there are many ways to animate things on the web.
If the lines are fairly simple, you can use SVG and animate the lines to fake a drawing effect. More information/tutorials can be found on Google. For extremely simple reveal effects, you could use a mask in CSS or SVG.
If you need to do something more complex, you can use a sprite like Alex Engzell's old portfolio did. You could also use a video.
Each approach has its limitation and advantages. For more, check out my larger post on animating things on the web.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.