Jump to content
GreenSock

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

Reveal any SVG shape - the mask way?

Recommended Posts

Hello everyone,

This one is making my head hurt for few days, there's a lot of similar topics but I just still don't get it, or maybe the thing I'm trying to do isn't possible for shapes.
(Here the stroke is just large enough to reveal the shape almost instantly, but it still runs half animation in the back animating stroke-dashoffset till the end, that produces some timing issues) 

I'm still lacking the skill to reveal complex SVG shapes, not sure how to bite it (drawSVG solves this problem for a path) - any suggestions will be a huge help!

Trying to do the same thing like @PointC did here - that looks just marvelous.

Tried to deconstruct it in Illustrator, made dozens of forks, read about masks/clipping but I still feel like I miss something important.

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

 
Have a lovely day and happy tweening :) 
 

See the Pen qoMqKe by tastysites (@tastysites) on CodePen

Link to comment
Share on other sites

Hi @Tasty Sites :)

 

It looks like you copied your original path and used it as a mask. That can work in some situations, but in this case you can see the path is not going in the right direction to make it work. The trick to these masks is creating your original artwork and then creating a separate mask. You line up your artwork and grab the pencil, pen or curvature tool and draw a new path along the middle of the artwork. Then add a stroke thick enough to cover everything.

 

The sharp point in the middle could be problematic, so I think two masks would be better in this case. Here's a fork of your pen:

 

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

 

It can be done with one mask, but there is a bit of hiccup on that bottom point. If it's fast enough, you may not notice.

 

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

 

If it were my project, I'd go with two masks, but that's just my two cents worth. Hopefully this helps. Happy tweening.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

22 hours ago, PointC said:

You line up your artwork and grab the pencil, pen or curvature tool and draw a new path along the middle of the artwork. Then add a stroke thick enough to cover everything.

 


That was the part I was missing/did wrong...thanks again Craig! Can't wait to use that trick everywhere :D 

BTW, about the curve (did it intentionally ^^), that was my main concern - I was able to replicate something "close enough" but that ugly hiccup was just not an option for production.

Thanks <3 !  

  • Like 2
Link to comment
Share on other sites

Yep - the animation is usually easy. (especially with GSAP). Most of the work is in asset prep and organization. I did a post over at CodePen about using the pencil to recreate a font for a handwriting effect. It's pretty much the same technique to create a mask except you don't have to be as precise. A mask has to be close and just enough stroke-width to cover the artwork. You may find some of the info useful.

 

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

And the pen that goes with it.

 

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

 

Happy tweening. 

:)

 

  • Like 8
Link to comment
Share on other sites

Thanks again Craig, I've seen that pen somewhere here - splendid work. 
I haven't seen the posts though, exactly THE missing guide for me! 
Reading atm :)

Happy tweening for you2

  • Like 5
Link to comment
Share on other sites

  • 3 weeks later...

Just curious if anyone is able to do this without drawSvg plugin?

Link to comment
Share on other sites

You can animate the strokeDashOffset. I wrote about it in this thread:

 

 

Just a reminder though - drawSVG will deal with some browser inconsistencies for you so I'd recommend a Club membership to make your life easier and allow yourself to work faster. More info:

 

https://greensock.com/club

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Hey again - had a lot of fun using this method - now I'm trying to use that on a font in logotype that has various widths and strange curves.
 

See the Pen QxpZma by tastysites (@tastysites) on CodePen

 

So far I've tried to trace one path using all the fancy stuff Illustrator has, but results are clunky like in the pen above - even when I'm using 4 paths.
Any tip on how to make it better will be a huge help ^_^
 

Happy Tweening :D

Link to comment
Share on other sites

Are you talking about the general timing of the animation looks clunky? Or do you mean those little edges on the middle section that appear when the first and last mask animate? If it's a timing thing, you'd want to adjust your easing. Use an easeIn on the 1st, an easeOut on the last and Linear on the middle two. Maybe something like this:

 

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

You could also use Linear as your default, pause the timeline and then tween the progress() with an easeInOut tween.

 

Is that what you meant by clunky?

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Thanks Craig,

That looks better - sorry this wasn't precise - my battery was blinking red ^^

I meant the edges in the middle section, tried to trace the letters precisely but there are always some 'leftovers'. I'm not sure I'm going in the right direction. After spending 6 hours in Illustrator with same results I'm convinced that there's something wrong with my approach...

If you could push me in the right direction (not sure that's the right way to achieve such effect) that will make my day!

Cheers

Link to comment
Share on other sites

Oh, I think you're on the right track. Making four lines is the approach I'd take. It's just a matter of lining up the lines a little tighter to the artwork.

 

Here's your pen with no animation and just showing the mask at 50% opacity on the letter.

 

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

You can see that path 4 looks nearly perfect. Path 1 is a bit wide and 2 & 3 look like they could be a bit narrower and maybe benefit from a slight rotation. That extra width is why you're catching a bit of the middle on the first segment.

 

Here's a quick pass I did for you. 

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

You can see that the masks line up flush with underlying artwork and I don't extend them any further than absolutely necessary. Here's the result of my attempt.

 

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

It's not perfect, but at normal speed it looks decent.

 

So, no you're not doing anything wrong. You'll just have to fiddle with the paths a bit. For animations like this I just take it one segment at a time and work with my paths at 50% opacity while I'm lining them up with the artwork.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

OMG thanks, Craig!

Now I know how to figure out masks for all the letters - the trick with opacity...I was doing it blindly ^^' 
Also, I wasn't sure that's a good way or how to align lines, but I see what you did there :D

Thanks again, it's time to have some fun in Illustrator!

 

  • Like 2
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.
×