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
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 4 results

  1. Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
  2. Hi! I am working on an SVG handwriting effect. I've got it to work but I can't figure out how to make it not show the "crossing" points of the letters as shown in the codepen. Also, I need the final SVG animation to have a gradient such as in the image below but can't figure out how to change the color of the stroke which is currently black to a gradient. Hope my questions make sense. Thanks!
  3. 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!
  4. 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!