Jump to content

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

At a loss of how to create this animation

Go to solution Solved by PointC,

Recommended Posts



I have a mp4 to show this animation, I have the static site at the end done so the easier part is done haha.  But am lost on how to create the actual animation and come through on the M as it shows, if you cannot see the link above please let me know and I'll adjust.


Any pointers and places I should look at accomplishing this?  Appreciate it.

Link to comment
Share on other sites

  • Solution

Hi @tjefe :)


Welcome to the forum.


Masks and/or clipPaths would be the way to go here. The handwriting can easily be handled with the DrawSVG plugin.



If your stroke width is the same width throughout the letters, you can animate the stroke itself. I have a couple tutorials about that.




If the stroke width of the letters is variable, you'll want to mask them and use DrawSVG to animate the mask. Tutorials about that here:




The trick is having a duplicate set of the letter paths in your mask (or clip-path) and animating the opacity of those paths once the lettering is done drawing itself. Then scale both groups of paths up at the same time to reveal the underlying image. Something like this:

See the Pen zYdPXXa by PointC (@PointC) on CodePen


Hopefully that gets you started. Happy tweening and welcome aboard.



PS The DrawSVG plugin is a Club perk. More info:


  • Like 5
Link to comment
Share on other sites

+1 mod point for the dog pic.

  • Haha 2
Link to comment
Share on other sites

@PointC Thanks for the write up I have been attempting to play with your codepen a little and sort of fit what I have in to there but am at a loss.  I have just a continuous word with one single stroke and one thickness.


And to understand your codepen better, with the clipping and masking you are reusing the "M" three times within the pen to get the affect correct, that is what it looks like to me per your drawing the word, showing the whole word, then zooming the word to view what is under the word?


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 368 95" style="enable-background:new 0 0 368 95;" xml:space="preserve">
<style type="text/css">
	<path class="st0" d="M326.4,93c-3.9-2.2-6.8-5.7-9.3-9.3c-1.2-1.7-2.2-3.5-3.3-5.3c-0.6-1.1-1.5-3-2.8-3.2c-2-0.2-3.9,2.4-5,3.8
		c-2.2,2.7-4.6,5.4-7.2,7.6c-3.1,2.6-7.1,5.2-12.1,5.5C331,95,328.6,94.2,326.4,93 M266.1,58.8c-2.1,1.8-3.5,4.5-3.6,7.2
		C267.1,58.1,266.6,58.5,266.1,58.8 M129.6,23.5c-1.9-0.2-3.9,2.3-5.1,4.8c-2.2,4.3-2.8,12.4-2.4,17.6c0.3,6.3,1.6,12.8,4.3,18.5
		c4.4-6.6,7-14.5,7.9-22.4c0.5-4.2,0.6-8.8-0.4-12.7C133.2,26.4,131.9,23.7,129.6,23.5 M168.3,11.4c-2.6,2-4.1,5.3-5.1,8.3
		c-0.7-0.7-1.5-1.1-2.5-1.2C170.3,10.2,169.2,10.7,168.3,11.4 M217.6,8c-2.8,5.2-3.5,13.1-3.7,17.6c-0.6,9.4-0.1,18.9,0.6,28.3
	<path class="st0" d="M100.5,49.9c0,2-1.6,3.6-3.5,3.6c-2,0-3.6-1.6-3.6-3.5c0-2,1.6-3.6,3.6-3.6C98.9,46.4,100.5,48,100.5,49.9"/>
	<path class="st0" d="M193.2,47c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.5c0-2,1.6-3.6,3.5-3.6C191.6,43.4,193.2,45,193.2,47"/>
	<path class="st0" d="M358.8,87c0-2.5,2-4.6,4.6-4.6c2.5,0,4.6,2,4.6,4.6c0,2.5-2,4.6-4.6,4.6C360.8,91.5,358.8,89.5,358.8,87
	<path class="st0" d="M361.5,84.6h2.1c0.6,0,1,0.2,1.3,0.5c0.2,0.3,0.4,0.6,0.4,1v0c0,0.8-0.5,1.2-1.1,1.4l1.3,1.7h-1l-1.1-1.6h0h-1
		v1.6h-0.8V84.6z M363.5,86.9c0.6,0,1-0.3,1-0.8v0c0-0.5-0.4-0.8-1-0.8h-1.2v1.6H363.5z"/>

I do have the svg here that I need to work with I was just putting each "section" similar to how you have them, does that sound like the right path to go down?



Link to comment
Share on other sites

Hey pal!

If you have one continuous stroke all you need is to draw that line with drawSVG and then zoom in. No need to worry about sections and clipping.

Craig's broken it into sections so that the line doesn't cross over itself - this is purely because of the calligraphy style of the stroke.

  • Like 2
Link to comment
Share on other sites

Yeah, there's a lot going on in that other demo. Here's a simplified version with just one path which should help.


See the Pen ExvQPQv by PointC (@PointC) on CodePen


Yes - you'll need a duplicate path in the <mask> which should scale at the same time as the lettering. Hopefully this makes a bit more sense to you. Happy tweening.



  • Like 3
Link to comment
Share on other sites

Thanks both of you!


See the Pen zYdRqmy by travisboss (@travisboss) on CodePen


So here is what I have and reading the docs I can only manipulate the stroke not a fill so it looks like the animation would only affect the lines shown in this example?


Appreciate your patience with me on this.

Link to comment
Share on other sites

Or you can draw the outline, fill it with white and then scale up. That would work, but probably not the handwriting effect you envisioned.

  • Like 2
Link to comment
Share on other sites

Still having my own issues with this, I cannot seem to get any traction on zooming in to the M.  Once I use the updated svg it just sort of floats off the page.


See the Pen zYdRqmy by travisboss (@travisboss) on CodePen

Link to comment
Share on other sites

Your lettering is quite small in the upper left corner of the SVG so you'll need a different origin than I used. Here's a fork with the SVG outlined so you can see where your path is actually positioned. It'll take some trial and error to find the perfect zoom scale and origin to land on the desired letter(s) to use as your mask. 


See the Pen yLojxRm by PointC (@PointC) on CodePen


Happy tweening.




  • Like 3
Link to comment
Share on other sites

Jinx. And Craig's is a better explanation.

  • Haha 2
Link to comment
Share on other sites

@Cassie @PointC I see now, so this is down the sizing the image behind.  The plan was to have the image be responsive until we hit mobile and then no animation at that time.


viewBox="0 0 368 95"


This is the size of the svg but I need to scale to an entire page, this is probably not a question for greensock forums?



I put a screenshot in that link of what the final size is which is just basically full width. So it looks like I need to keep the svg small and centered than as it zooms it needs to fill the entire page :ugeek:

Link to comment
Share on other sites

21 hours ago, Cassie said:

Jinx. And Craig's is a better explanation.

`transformOrigin` got me what I needed on sizing, thanks Cassie!

  • Like 1
Link to comment
Share on other sites

30 minutes ago, tjefe said:

`transformOrigin` got me what I needed on sizing, thanks Cassie!

That's because @Cassie is genuinely clever. I'm just running around pretending to know what I'm doing. :D

  • Like 2
  • Haha 2
Link to comment
Share on other sites


  • Like 1
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.