Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Scotty

Handwriting reveal in HTML5 example

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone, I'd like to share a final in-the-wild example of a handwriting reveal effect using HTML5's canvas and GSAP to handle the drawing animation. I'd like to make a codepen of this soon with much better code (I'm doing some stupid stuff here) but as I'm getting married in a couple weeks and with work being very busy, the time isn't there for that right now.

 

With help from searching the forum and information on canvas transparency found at this link, I was able to make this effect happen. We think it turned out very nice! Just view the page source code and scroll to the bottom, nothing's compressed. I'm using two function calls for the "brush size", it's a stupid hack but it works. :D I call the brush functions 4 times because on some devices (iOS) and browsers, the exposed layer did not always reveal correctly as expected. The time nudge value is set to make the animation quick while allowing the transitions to reveal smoothly. Again, this is not optimized!

 

GSAP is being used to tween floats used as physical X & Y co-ordinates on the image. I got the co-ordinates for the animation by using photoshop with a similarly sized brush and just hovering over the image with how I wanted the straight lines to be drawn, and getting the X & Y values from there. Very simple!

 

http://pmi.mkt6308.com/pba-certification

 

Note: You could also load in an image instead of embedding the image for the mask in javascript, but because the hosting site is a managed CMS, it doesn't see links to images in JS, therefore I can not link to it. This is a workaround.

 

Thanks for the great support found in these forums!

  • Like 1
Link to comment
Share on other sites

Scotty,

 

Thanks so much for sharing this. The end result is very nice. Love seeing GSAP being put to use in creative ways to solve real-world challenges. Great job!

 

I would encourage you to make that codepen when you have time, I think a lot of people will find it usefule and we'd love to share it (and give you the proper credit of course).

 

Thanks again and congrats on the marriage!

 

Carl

  • Like 1
Link to comment
Share on other sites

Very cool and creative trick.. a codepen demo like carl advised would be very  helpful to others :)

Link to comment
Share on other sites

It'll get there, I promise! Thanks for the interest in it!

Link to comment
Share on other sites

  • 7 months later...

Any updates to this codepen? I'm trying to also implement something similar, but the demo link you provided (with the canvas trasnparency demo) doesn't seem to work in Chrome.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×