CSS Write-on text effect
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
README.md
general-styles.css
index.html
play-loop.js
write-on.css

README.md

CSS Write-on Text Effect

I'm using -webkit-mask-image with a sprite that contains a frame for each partial path of the text. The text, "Write-on!" is in an h1 element but the mask applied to its parent element starts out at 100% transparent so nothing is shown below it. A CSS animation is applied to the containing element. Each step of the animation changes the -webkit-mask-image-position to advance to the next frame. The animation step percentages are placed close enough together that the interpolation between one frame and the next is not seen.

https://lab.tylergaw.com/css-write-on

Reference