Hello!
I’m working with Greensock’s SVG Morph plugin to help achieve this look. It’s pretty straight forward and works great in my Code Pen example.
The issue I’m having is halfway through the shape tweens, the svg paths randomly are getting clipped around the edges. I made a screencast to help demonstrate the issue.
Happy to pay anyone for their time to help me fix this!
Here is my site Read-Only: LINK
Hi
First let me tell you that it looks impressive.
Did you check that is not the nav bar that hiding the shape?
@DesignByDre
Does your layout look like this?
-Body
–Section
—Row
----Column 1 Discover Complete Transformation
----Column 2 SVG Animation
-----SVG Animation
Column 1 = relative position, 50% width, transparent background, z2, NO Overflow filter
Column 2 = Position Absolute right justified, 100%, flex right, z1, NO overflow filter
SVG Animation = set canvas width and height
What’s your live io link? I only see designer preview.
Does same clipping error occur on Windows 10, iOS, Android devices? Mac OS uses different rasterization acceleration rendering methods at the kernel level than other OS that could potentionally be the issue (hardware related).
Does same error occur in other browsers, Sifiari Chrome, Firefox, Edge? If getting different results, look at plug ins and incognito interference.
Go incognito and paste screenshot of console errors, could have indicator
Paste screenshot of performance monitor, is there any funky business with SVG component?
Hey,
Here is the live link: https://movement-signature-projects.webflow.io/
My setup isn’t quite how you have it suggested. I have the hero slider layer on top of the Hero section. with an absolute position. All of the svg code and clip path’s are int he html block below all of the layers. Here’s my layer build:
The clip path’s don’t even work in Safari:
And it works perfectly in Firefox.
I also don’t see those console errors in the live link.
Thanks for the compliment! The nav has a transparent background and has absolute positioning so unfortunately thats not it 
Thanks for the suggestion though!
