Converting a MorphSVG to use clipPath/mask

[Mattrudd]

Hey,

I'm pretty pleased with the results of my first MorphSVG setup after following the great docs/digesting a few examples on here!

The O --> U was a little tricky but got there in the end with some Illustrator experimentation.

Would love to convert the SVGs into either masks or clip paths (whatever's easiest) to reveal a video for 'NOISE' and either an image or second video for 'MUSIC' but I'm unable to get this to work while maintaining the morph.

Taking the 'NOISE' svgs out of their group enables clipPath on the video... and it looks like MorphSVG can still work with these paths even though they're in a <def>. 

So the next step is to get the clipping to work while morphing these clipping paths from NOISE > MUSIC - all at the size and central position of the morphing letter shapes.

 

Unsure of the best way to do this?

Hope that makes sense - true to form it's pretty late here!

Thanks folks!

See the Pen abQbgRb?editors=1111 by matt-rudd (@matt-rudd) on CodePen

[mvaneijgen]

Seems like you can't clip-path a video directly, but if you wrap it in an extra div and clip that it does work. I had to move the clip-path to the visible SVG shapes instead of in the refs. But hope it helps and happy tweening! 

 

See the Pen VwVYvJm?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Mattrudd]

Fantastic... Echt heel erg bedankt @mvaneijgen!

[Mattrudd]

Hi again, a few issues have cropped up when adding this section to my project:

 

1. Having clipPath issues with Safari. I've tried (now commented out) all the solutions referenced here, including all those listed in the thread linked below - adding a <rect>, onUpdate (although not sure I executed this properly) and webkit prefix. Also tried some Stack Overflow suggestions like adding

filter: hue-rotate(0deg);

to the clipped element.

 

 

 

2. The positioning of the SVG is a bit of a mess - I've managed to centre the SVG horizontally* in the .noise_container but can't figure out how to get it centred vertically so that it truly pins "center center".

*Since managed to break the horizontal alignment, too 🥴

Thanks as ever for any help! 😎

See the Pen abQzLra?editors=1111 by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

With the Safari issues I can't help, sorry.

 

As for the position of the video and/or the SVG, that's definitely a CSS issue and not a GSAP related problem. I commented out all the JS code in your codepen example and the position of both elements is the same. The only advice I can offer is to forget about GSAP and ScrollTrigger at this point and just focus on the HTML and CSS side of this in order to correctly get the position and size of your elements. Maybe start with the SVG without being clipped or masked, just the colored paths and get those in the right position first, then create the morph tween and then attach ScrollTrigger to this.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

Hi @Rodrigo, thanks for the sound advice dude...

Followed your advice (knew it would be a CSS issue at heart).

I've centred the SVG and the video elements that get clipped (one overlaps the other [pos: absolute, z-index 0/1]) and I just can't seem to work out why the clipped word won't centre itself. Seems adding/removing a viewbox doesn't affect positioning.

See the Pen abQzLra by matt-rudd (@matt-rudd) on CodePen

SVG is centred in Chrome Inspect, as shown here, but need to get to grips with how the clipping affects its visible positioning.



One for the scary realms of Stack Overflow though 😬

[mvaneijgen]

It seems like the clip-path property just places the element in the upper left corner to start and your svg is just 1000 by 200 which is a small stroke. I've tried modifying your viewBox to be more inline with the video 16:9, but with no luck. It seems like you can't really position the clip-path after it is set. Any modifications you do on the svg don't move over to the clip path.

 

My next suggestion would be creating a svg with a back ground with the text punched out of that background and use that as the overlay, I have no idea if that would be the solution, but that is where I would go next if it was my project. Hope it helps and happy tweening! 

 

See the Pen RwqrrRW?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen

 

Just remembered. This is what I've used in the the past, but just with simple blobs, not really detailed letters https://davesmyth.com/clip-path-scaling

[Mattrudd]

2 hours ago, mvaneijgen said:

My next suggestion would be creating a svg with a back ground with the text punched out of that background and use that as the overlay, I have no idea if that would be the solution, but that is where I would go next if it was my project. Hope it helps and happy tweening! 

Thanks again @mvaneijgen - this is what I've been looking into doing.

SVG masking and clipping is pretty complex, for me at least! 😵

[Mattrudd]

Hi again, thought it would close this thread nicely to say I've found a solution that works for both issues - centring and Safari display.

Ended up ditching the clip path method and went for a mask instead, along with @PointC's advice in another thread to ensure there's a rectangle in the SVG exported from Illustrator (guess we can't say AI anymore!).

I then reworked the JS a little so the coordinates to morph to were managed in the tween rather than referenced from the HTML.

Here's the result for anyone curious:

See the Pen abQdmrz by matt-rudd (@matt-rudd) on CodePen

 

Thanks again all for your help with this one!  Definitely nudged me on towards a solution.