Skip to content
CSS Write-on text effect http://lab.tylergaw.com/css-write-on/
Find file
Latest commit 145c1cc @tylergaw Update README.md
Failed to load latest commit information.
images Initial commit
README.md Update README.md
general-styles.css Updating description
index.html Moving JS to external
play-loop.js Moving JS to external
write-on.css Updating docs in 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.

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

Reference

Something went wrong with that request. Please try again.