Image slide animation and clip-path issue

[mapps-video]

Hi all, 

 

I am trying to do a image slide animation like here:

-> click Animate. 

 

All good except if the image is "transformed" the clip-path is not correct anymore. 

 

-> click Transform and then Animate. 

 

Now, questions:

1. is there a different way to do this animation? 
2. what is the problem with this clip-path? - or how can I fix it?

 

Thanks in advance,

Andrei

See the Pen gggdZO by klodoma (@klodoma) on CodePen

[mapps-video]

Anyone? 

[Carl]

Sorry, I don't know much about how clip-path works on transformed SVG elements. clip-path seems to have pretty poor support right now:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

 

Perhaps try an SVG <mask>. Here is a simple example: http://codepen.io/GreenSock/pen/jywVVq?editors=1010

 

Not sure how it will hold up to transforms. You may want to first find the masking / clipping technique that works the best cross-browser without any GSAP animation (check stackoverflow) and then see how that setup animates with GSAP. 

[PointC]

Hi mapps-video 

 

Welcome to the GreenSock forum.

 

I'd agree with Carl here. clip-path is gonna be hit and miss right now. Your demo isn't working correctly for me in Firefox or Edge. I'd also recommend a mask. I'm wondering if you could just rotate the div that's wrapping the image rather than the image itself? Then the mask would go along for the ride.

 

Here's a fork of Carl's demo that rotates the SVG's parent div as the mask is animating.

 

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

 

Hopefully that helps.

 

Happy tweening.

[OSUblake]

The question was actually about raphael, which I have no experience with.

[PointC]

The question was actually about raphael, which I have no experience with.

Oh sure Mr. Smarty Pants. Actually take the time to read through the code and see which libraries are being used before answering the question. 

 

I have never tried Raphael so I'd be no help. Sorry.

[mapps-video]

Thank you all for your responses. 

 

Indeed mask seems to work better than clip. 

 

Here is my solution:

See the Pen OWgBVG by klodoma (@klodoma) on CodePen

 

The trick is: "create the mask" BEFORE the item transformation. It seems quite important, otherwise the getBBox() returns the transformed values. The item transformation is applied also to the mask itself.