Forums

bookcasey

I made this little Codepen demo of a 'printing' page.

Basically, the animation is:

@keyframes print
  0%
    +translateY(-75%)
  100%
    +translateY(0%)

And called with: animation: print 3s cubic-bezier(.75,.8,0,-0.5)

I played around with cubic-bezier() to get the back-and-forth type movement a printer makes when going back over to plop down some more ink.

I've curious is anyone has any tips to make a more detailed / realistic, or at least read better like it's coming out of a printer.

Thanks!

DustinWoods

Here's my go at it. I think the key is emulating the jittery-ness of a printer. I used linear transition, but I made the keyframes have a stop-n-go feel.

bookcasey

Thanks, Dustin. Very cool.

treehouse : what would you like to learn today?

Forums

Let's make a better printing animation together!