Jump to content
Search Community

At a loss of how to create this animation

tjefe test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

https://nextcloud.travisboss.duckdns.org/s/ZSmx4godCcM4xTA

 

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.

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-2/

 

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:

https://www.motiontricks.com/svg-masks-and-clippaths/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

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:

https://greensock.com/club/

  • Like 5
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">
	.st0{fill:#FFFFFF;}
</style>
<g>
	<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-1.3,1.9-2.5,3.8-3.5,5.9c-0.5,0.9-1.6,3.1-2,4.1c-0.3,0.8-1.2,2-2.7,1.8c-1.8-0.2-2.2-1.6-2.2-2.3c-0.1-1-0.6-3.8-0.8-4.9
		c-0.4-1.8-1-3.7-2.2-5.3c-0.5-0.6-1.1-1-1.9-1.1c-0.7,0-1.5,0.2-2.2,0.5c-2.1,0.9-3.9,2.4-5.9,3.5c-1.8,1-3.7,1.9-5.8,2.3
		c-4,0.8-7.9,0-11.9-2.7c-1,0.7-4,2.7-6.1,3.7c-3.9,1.9-8.3,2.6-12.6,2.5c-3.9-0.1-7.8-1.1-11.3-3c-3.1-1.7-5.9-4.1-7.9-7
		c-0.6-0.8-1.4-1.8-1.4-2.8c0-1,0.6-2,1.4-2.3c0.5-0.2,1.6-0.5,2.3-0.8c3.7-1.4,7.6-3.9,8.9-7.8c0.6-1.7,1.1-3.8-0.4-5.3
		c-1.2-1.2-2.8-0.9-4.1-0.3c-2.9,1.4-6,5.8-7.7,8.3c-2.1,3.1-4,6.3-5.8,9.6c-1.2,2.1-2.3,4.2-3.3,6.3c-0.8,1.6-3.1,1.9-4.2,0.5
		c-0.5-0.7-0.6-1.6-0.7-2.4c-0.1-0.9-0.2-1.8-0.4-2.7c-0.4-2.9-0.7-5.8-1.1-8.7c-2.7,3-6.5,5.9-10.8,5.8c-4.3-0.1-7.4-3.5-9.3-7.1
		c-1.6,3.8-4.2,7.3-7.9,9.3c-3.4,1.9-7.5,2.1-11.1,0.5c-3.4-1.6-6-4.6-7.9-7.8c-5,6.7-12.1,13.7-21,13.5c-6.9-0.1-13-4.3-17-9.7
		c-3.1,3.2-7,6.1-11.5,7c-4.5,0.9-8.7,0.2-12.2-2.6c-1.8-1.5-3.3-3.4-4.3-5.5c-1.8,3.8-4.8,6.9-8.7,8.6c-3.7,1.6-8,1.9-11.9,0.5
		c-3.9-1.4-6.9-4.5-9.1-8c-2.1-3.4-3.6-7.1-4.8-10.9c-1.4-4.4-2.3-8.9-3.3-13.4c-0.4-2.1-1.5-7.6-3.1-10.6c-0.9-1.7-1.8-2.4-3.3-2.2
		c-2,0.2-2.9,2.7-3.3,3.8c-1,3.2-1.3,6.6-1.3,9.9c-0.1,2.9,0.2,7.4,0.6,12.3c0.6,5.9,1.5,12.3,2.5,16.2c0.1,0.4,0.6,1.9,0.6,2.5
		c0,1-0.5,1.8-1.4,2.3c-2.4,0.9-3.4-1.1-3.9-2c-5-7.6-8.1-16.2-10.7-24.9c-1.3-4.4-2.5-8.9-3.7-13.4c-1.2-4.4-2.5-9.8-4.6-13.5
		c-1.5-2.8-2.7-3.7-4-3.5c-0.9,0.1-1.5,0.8-1.9,1.3c-2.1,2.5-3.9,9.7-3.8,20.5c0,4.4,0.3,8.8,0.7,13.2c0.7,7.2,2,14.3,4.4,21.1
		c0.6,2,2.6,6.3,3.1,8c0.5,1.8,0.1,3.6-1.4,4.4c-2.8,1.4-4.6-1.4-5.6-2.7c-1.8-2.5-4.4-7.6-6.3-11.6C8.6,69.2,4.5,52.3,2.7,42.2
		C1.6,36.3,0.2,25.3,0,20c0-1.4,0.5-2.8,2.4-3C3.8,16.9,5,17.9,5,19.8C5.2,24.9,6.3,33,6.9,37.2c2.4,15.4,7.2,31,9.4,36.1
		c-2-8.3-2.5-22-2.5-26.4c0-4.1,0.2-8.2,0.9-12.3c0.3-2.3,1.7-7.6,3.8-10.3c1.1-1.5,2.6-2.8,4.4-3.3c2.1-0.6,4.2,0,6,1.2
		c3.3,2.3,5,6.3,6.3,10c1.5,4.3,2.6,8.7,3.8,13c1.3,5,4,14.4,6.1,19.6c-0.4-3.9-0.8-7.8-0.9-11.6c-0.1-3.2,0-8.2,0.8-12.2
		c0.6-2.9,1.7-6,4-8.1c0.3-0.3,2.3-1.9,4.5-2c3.2-0.2,4.6,1,5.4,1.6c1.6,1.2,2.7,3.2,3.6,5.5c1.4,3.7,2.1,7.2,2.3,8.4
		c1,4.6,1.8,9,3.3,13.6c1.2,3.9,2.8,7.9,5.1,11.3c3.3,4.8,6.9,5.5,9.1,5.5c3.9,0.1,7.4-1.8,9.8-5c2.2-3,3-6.8,3.1-10.5
		c-0.1-1,0.6-2.8,2.6-2.8c1.7,0.2,2.3,1.2,2.4,2.7c0.3,5.1,2.5,10.4,6,12.7c3.4,2.2,7.5,1.5,11.1-0.5c2.8-1.6,4.7-3.7,5.9-4.9
		c-0.7-1.3-1.8-3.6-2.1-4.4c-3.2-7.9-4.2-16.6-3.8-25.3c0.2-4,0.9-8.1,2.4-11.8c1.4-3.5,3.8-7.2,7.6-8.5c2-0.7,4.3-0.4,6.1,0.7
		c1.8,1,3.1,2.7,4,4.4c1.8,3.4,2.4,7.3,2.5,11.1c0.1,4.5-0.4,9.1-1.4,13.5c-0.9,4-2.1,7.9-3.8,11.5c-0.8,1.7-1.6,3.3-2.6,4.9
		c-0.9,1.6-2.6,3.9-2.8,4.2c1.9,2.9,5.4,6.3,9,7.7c1.6,0.6,3.2,0.9,4.9,1c5.4,0.1,10.1-4.1,12-5.9c2.9-2.8,5.6-6.6,6.3-7.7
		c-1.2-2.9-2.1-6.2-2.6-8.2c-1.1-4.4-1.8-8.9-2.1-13.3c-0.7-8.3-0.6-17.1,1.9-24.9c1.2-3.6,3-7.2,5.9-9.7c1.5-1.3,4-3,7.7-2.8
		c3.4,0.2,5.8,2.9,6.9,4.7c2.3,3.7,3.5,9,2.4,17.6c-0.6,5.4-4.2,17.5-8.4,26c-1.8,3.7-4.1,8.2-6.1,11.1c2.1,4.5,5.4,8.5,9.6,8.6
		c3.8,0.1,6.6-2.7,8.6-6c1.1-1.8,2.5-6.2,2.7-8.6c0.1-0.9,0.5-2.6,2.5-2.6c1.9,0,2.4,1.4,2.6,2.4c0.9,4.1,2.8,8.6,4.9,10.1
		c1.9,1.4,3.8,1,5.5,0c1.8-1,3.1-2.4,4.4-3.9c0.7-0.9,2.2-2.9,2.4-3.3c-0.4-5.1-1-12.1-1.2-16.8c-0.5-10.3-0.4-19.4,0.9-28
		c0.7-4,1.6-8,3.7-11.5c1-1.6,4-5.9,9.7-5.1c6.3,0.9,7.4,6.4,7.9,8.2c0.9,4.1,0.4,8.4-0.1,12.6c-1.2,8.6-5.4,21.1-8.3,27.4
		c-1.7,4-4.9,10.6-7.4,14.4c0,0.5,0.9,7.9,1.1,10.1c2.1-3.8,4.4-7.5,6.9-11.1c2.4-3.4,5.1-7,9.1-8.7c5.6-2.3,9,1,10.1,2.6
		c2.4,3.6,1.6,8.5-0.6,12c-2.2,3.6-5.8,6.1-9.6,7.8c2.3,2.6,5.3,4.6,8.7,5.7c4.1,1.3,8.5,1.1,12.6,0.1c2.8-0.7,5.4-2.3,7.8-4
		c-2.6-3.4-4.2-7.8-3.8-12.1c0.4-4,2.5-8,5.7-10.5c3.3-2.6,8.3-3.7,11.9-0.9c3.6,2.8,3.6,7.9,2.3,11.9c-1.5,4.6-4.8,8.6-8.4,11.8
		c5.3,2.8,8.9,0.7,12-1c3.6-2.2,7.7-5.4,12.2-3.7c3.4,1.2,5.1,4.7,6.1,7.9c1.1-1.9,2.2-3.8,3.6-5.5c1.3-1.6,2.7-3.1,4.5-4
		c1.8-0.9,3.9-1.2,5.9-0.4c2,0.8,3.3,2.4,4.3,4.2c2.2,3.9,4.6,7.9,7.8,11c1.5,1.4,4.4,4.2,8.9,4c3.9-0.2,7.9-3.3,10.4-5.7
		c2.6-2.5,5-5.3,7.1-8.3c0.7-0.9,2.8-3.9,3.7-5.5c0.6-0.8,2.2-1.4,3.5-0.5c1.4,1.1,1.1,2.8,0.5,3.5c-1,1.6-4,6-5.8,8.3
		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
		c-0.2,2.9,1,5.9,2.7,8.2c3.1-2.9,6.2-6.2,7.5-10.3c0.5-1.7,0.9-4-0.2-5.8c-1.2-1.6-3.5-1.1-4.9-0.3
		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-1.2,3.6-1.7,7.4-1.9,11.2c-0.6,8.1,0.9,20.7,3.4,28c4.4-7.7,7.9-16.1,10.2-24.7c1.1-4.1,2-8.9,1.9-12.5c-0.2-4.3-0.7-8-3.1-10.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
		c4.2-8.2,7.6-16.9,9.9-25.9c1-3.8,2.7-12.1,2-17.4c-0.2-1.8-0.8-5-3.6-5.5C219.9,4.5,218.4,6.5,217.6,8"/>
	<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
		 M359.5,87c0,2.1,1.7,3.9,3.9,3.9c2.1,0,3.9-1.7,3.9-3.9c0-2.1-1.7-3.9-3.9-3.9C361.2,83.1,359.5,84.8,359.5,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"/>
</g>
</svg>

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?

 

Thanks! 

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

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

@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?

https://nextcloud.travisboss.duckdns.org/s/rCrZs28pYybWdDp

 

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

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.
×
×
  • Create New...