tjefe Posted November 2, 2021 Share Posted November 2, 2021 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 More sharing options...
Solution PointC Posted November 2, 2021 Solution Share Posted November 2, 2021 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/ 5 Link to comment Share on other sites More sharing options...
Cassie Posted November 3, 2021 Share Posted November 3, 2021 +1 mod point for the dog pic. 2 Link to comment Share on other sites More sharing options...
tjefe Posted November 4, 2021 Author Share Posted November 4, 2021 @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 More sharing options...
Cassie Posted November 4, 2021 Share Posted November 4, 2021 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. 2 Link to comment Share on other sites More sharing options...
PointC Posted November 4, 2021 Share Posted November 4, 2021 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. 3 Link to comment Share on other sites More sharing options...
tjefe Posted November 4, 2021 Author Share Posted November 4, 2021 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 More sharing options...
PointC Posted November 4, 2021 Share Posted November 4, 2021 Yep - you'll need to turn that fill into a stroke to make this work. That's the subject of this tutorial. https://www.motiontricks.com/animated-handwriting-effect-part-1/ 2 Link to comment Share on other sites More sharing options...
PointC Posted November 4, 2021 Share Posted November 4, 2021 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. 2 Link to comment Share on other sites More sharing options...
tjefe Posted November 4, 2021 Author Share Posted November 4, 2021 14 minutes ago, PointC said: Yep - you'll need to turn that fill into a stroke to make this work. That's the subject of this tutorial. https://www.motiontricks.com/animated-handwriting-effect-part-1/ Thanks this file is from a designer, so I will have to go back to them about this. Link to comment Share on other sites More sharing options...
tjefe Posted November 8, 2021 Author Share Posted November 8, 2021 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 More sharing options...
PointC Posted November 8, 2021 Share Posted November 8, 2021 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. 3 Link to comment Share on other sites More sharing options...
Cassie Posted November 8, 2021 Share Posted November 8, 2021 Hey @tjefe, You just need to get the correct origin for your transform. Maybe something like this? See the Pen LYjmJqy?editors=0010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 8, 2021 Share Posted November 8, 2021 Jinx. And Craig's is a better explanation. ✨ 2 Link to comment Share on other sites More sharing options...
tjefe Posted November 8, 2021 Author Share Posted November 8, 2021 @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 Link to comment Share on other sites More sharing options...
tjefe Posted November 9, 2021 Author Share Posted November 9, 2021 21 hours ago, Cassie said: Jinx. And Craig's is a better explanation. ✨ `transformOrigin` got me what I needed on sizing, thanks Cassie! 1 Link to comment Share on other sites More sharing options...
PointC Posted November 9, 2021 Share Posted November 9, 2021 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. 2 2 Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 NONSENSE. 💜 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now