Is there any option to make move animation inside Clipping mask SVG?

[ahsartag]

I've tried to animate parts inside Clipping mask SVG and it not works.
Although opacity animation works perfect.

And please tell me how can I bind click function to TimeLineMax?
 

[ahsartag]

image removed by admin because it was hosted on sketchy site that had tons of ads and launched pop-up windows

[Carl]

Sorry to hear you are having trouble. SVG support for advanced masking / clipping is pretty tricky. It may not even be possible what you are trying to do.

The image you posted isn't much help and was on a bad site.

 

It is best to post a CodePen demo so that we can see and edit your actual code.

 

You can just fork this one, edit the code to match yours,  and save it: http://codepen.io/GreenSock/pen/MJGrxm

 

More details here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You can't bind a click to a TimelineMax but you can click on any element and tell a TimelineMax to play. Is that what you mean?

[ahsartag]

Thanks Carl. I'll post my code on CodePen
Yes - I didn't meant the bind() function.

[PointC]

I'm not sure if you meant animating other elements that are clipped/masked or the clips/masks themselves, but I'll offer my 2 cents worth here. I made this pen last summer as an answer to another forum question, but maybe it will help. It shows two circles being revealed. One with a clip-path and one with a mask. You can see that some browsers may or may not cooperate with what you'd like to animate. As Carl mentioned, some of this is tricky right now. 

 

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

 

Hopefully it helps a little bit.

 

Happy tweening.

[ahsartag]

Thank you PointC!
Clip/mask I can animate, but with inside details there is a problem.
My svg linked in <object> and in CodePen I don't have a storage space(only for Pro users)
 

[PointC]

I don't see a CodePen link in your posts.

 

I'm still confused about the question. Are you saying child elements of a masked/clipped SVG won't tween?

 

If you create a CodePen demo, you don't have to upload your final assets. Can you demonstrate the problem with an SVG and a few circles, rectangles or polygons? You can just fork Carl's pen from Post #3 to get started.

 

Thanks.

 

Happy tweening.

[ahsartag]

Here is the CodePen

See the Pen qRPgLp by ahsartag (@ahsartag) on CodePen

 

[PointC]

You're adding your clip-path to each individual path and rectangle. All you have to do to fix this is create a group around those elements and add the clip-path to that group. Here's a fork of you pen with that change:

 

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

 

Happy tweening.

[ahsartag]

Thank you a lot PointC!
 

[MCP]

On 2/5/2017 at 6:21 PM, PointC said:

You're adding your clip-path to each individual path and rectangle. All you have to do to fix this is create a group around those elements and add the clip-path to that group. Here's a fork of you pen with that change:

 

 

 

 

Happy tweening.

 

Wow! Thank you for the knowledge. This tip with clipping group and moving paths inside the group after save me.
One should remember that you have to resave your code from your vector editor instead of trying to change the html code of svg. It worked that way for me.