Animating svg mask

[Gumbo]

Hi,

The attached is someone else's codepen but I was wondering if the mask itself can be animated up or down etc? Also, could you replace the text with a path and animated that?

Like this path: 

<path class="cls-1" d="M455.7,98.51c-37.55,18-103.7,11.12-103.7,11.12V500H645.74V102.63s-35.52-22.87-85.79-24C530.85,77.89,487.62,83.22,455.7,98.51Z" transform="translate(-352 -78.52)"/>

 

Thanks in anticipation.

Paul

See the Pen QvvEYQ by dudleystorey (@dudleystorey) on CodePen

[PointC]

Yes, you can animate a SVG mask. You can also switch the text in the mask to a path if you like.

 

My advice would be to start trying things and see what works and what doesn't. The best way to learn is to start messing with code and see what breaks. 

 

Happy tweening.

 

[Gumbo]

Hi PointC,

 

I've managed to switch to path but I don't know how to animate the mask. Can you help me?

 

Thanks,

Gumbo

[PointC]

If you can post a demo with what you've done so far, I'll take a peek.

 

[Gumbo]

Whatever I've done is not working that's why I need help. Can you not make the mask in the codepen above animate?

[PointC]

Load GSAP into that pen and add this line:

 

TweenMax.to("text", 0.5, {y:10, yoyo:true, repeat:-1});

That will move the mask text up and down.

 

Happy tweening.

 

[Gumbo]

Thanks for your help