Jump to content

Search the Community

Showing results for tags 'handwriting'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 2 results

  1. I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks!
  2. 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. 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!