Help with clipping paths and MorphSVG

[MrJL]

Hi everyone. I've put together a pen with an svg path that's animated on scroll. I'd like to develop it so that it's an image with an animated clip-path rather than a flat svg. Is there a simple guide somewhere on how to do this? I looked but all I found were other people's pens and I'm still pretty new to gsap so reading them and understanding them is still out of my reach. But if there's a simple tutorial or guide on how to do this I'd love to read it!

See the Pen zYMLMEW by mrjonoces (@mrjonoces) on CodePen

[Cassie]

Hey there!

 

Before we get into clip paths, there's a few things I picked up on in your code, you may be overcomplicating some things

 

1) quad.easeInOut isn't valid - I think you're looking for "power4.out"
2) Timelines are for sequences of multiple animations - you only have one animation so this would be best acheived with a tween.

3) You seem to be trying to control the animation using ScrollTriggers callbacks, while also controlling it on update. This is causing conflicts, and more importantly... it's a little bit like trying to reinvent the wheel by making a big wheel made from wheels...
ScrollTrigger already does this all. Here's an example of a scrubbed animation. (like using onUpdate to tie the progress to the scroll value)

 

See the Pen Jjeeqvo?editors=0010 by GreenSock (@GreenSock) on CodePen

And if you don't want it scrubbed you can use toggleActions (like calling play and pause on enter/leave callbacks)

See the Pen vYQQovB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does this help clear things up a little?

[MrJL]

Thanks Cassie that makes perfect sense. I'm still getting a bit lost in the myriad different ways of achieving things with gsap, hence why I'm building wheels out of wheels haha!

[Cassie]

No worries! The docs are always a good source of info. Sometimes trying to extrapolate out from demos can get a bit confusing. Also if you feel like something's too complicated - it probably is. 

So now that's out of the way - Clip path wise, the GSAP stuff stays the same but the SVG markup changes ✨ Nice and simple

See the Pen Jjeeqvo by GreenSock (@GreenSock) on CodePen

This is an evergreen article 

https://css-tricks.com/masking-vs-clipping-use/

And dev reference here!
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

If you have questions I'm happy to answer them ☺️

[MrJL]

Thanks Cassie! I actually figured that out yesterday with a little reading so things are moving in the right direction for me. Now I've got it working I'm pretty underwhelmed with the effect and wondering if it would be more interesting to tween from the arch shape to full screen on scroll. I've seen it done before and it looks pretty good. Can an svg path be set to 100vw/100vh?

[Cassie]

There's no such thing as viewport widths in SVG land. The units are SVG units, which are determined by the viewbox
 

viewBox="0 0 450 400"

450 units wide, 400 units high

You can set the SVG itself to 100vh / 100vh though, then you can set the SVG shape to fill the whole SVG.

Depending on how you want it to scale, you may need to look into preserveAspectRatio, it's kinda like background size and background position, but for SVG scaling rather than background images

https://www.svg.fyi/#/preserveaspectratio

[MrJL]

Thanks Cassie I'll give it a go