Animated Clipping In SVG

[MrTimcakes]

So, I’ve got this eye logo with a dash through it, I’ve got my animation to rotate the dash vertical and move each half of the eye through the dash to the other side. However I can’t figure out how to get these paths to be hidden once they go past the dash. This is what I have so far.

[Atelierbram]

Don’t quite get the clipping part, but is CSS-animations an option?

http://codepen.io/atelierbram/pen/oLxLjy

[MrTimcakes]

Not quite, sorry. Let me try explain the clipping part again, its close to what you did. I want each half of the eye to turn invisible as it passes through the dash, sort of like this pen does with the corners of the text http://codepen.io/simeydotme/pen/zKplC

[Atelierbram]

That is nifty, done with absolute positioning and rotating the wrapping element, and then rotating the element itself back with the exact same amount … But would you want to, or could one do this with SVG paths? Not like it is now I am afraid. Maybe better recreate those SVG paths as separate SVG’s. Then one can have those SVG’s in containers which all have position: relative; rotate those, and put position: absolute on those SVG’s, and rotate those with the same amounts back. That could work I think, but still have to try this out.

[MrTimcakes]

I’m relentlessly experimenting with clipPath and mask

[MrTimcakes]

Arg, I get a mask to clip all paths if I put clip-path:url(#leftClip);in the svg selector in my svg, but if I try just to target the left eye pieces they ignore the clip :/ frustrating. What am I Doing wrong? In the same codepend btw http://codepen.io/Ducky/pen/oLxNaV

[Paulie_D]

Don’t quite get the clipping part, but is CSS-animations an option?

No…not really. You’d need javascript for that.

The points of the path are not selectable with CSS.

[Atelierbram]

I wrapped those paths in groups, and used those to put the clip-path #targets in. This works, because those groups are not transitioning nor rotating along: turns out it’s tough hitting a moving target ;)

http://codepen.io/atelierbram/pen/jrqmGo

[amanda_]

I recommend the greensock library for animating svgs. I am a big fan.

[MrTimcakes]

Thanks, I used your changed grouping method and animated the rest, thanks http://codepen.io/Ducky/pen/oLxNaV

[MrTimcakes]

Now a new problem faces me, how can I use a class inside of a css url() function?
Currently I have clip-path:url(#leftClip); which means the clip targets an ID so there can only be one per page, meaning if I include the SVG twice on a page, the 2nd ones animation wont work. However if I replace the # with a . and change the svg to class="leftClip" it doesn’t work? How can I use classes in url or something to similar effect?

[Atelierbram]

Has to be an Id for this, that’s just the syntax. But I don’t see how this is a problem when you put the clippaths in its own SVG.

[MrTimcakes]

Ah drats, It just means I cant have the svg twice in the same page without changing it each time, or this happens http://jsbin.com/pofuga/edit?html,output

[Atelierbram]

Example of multiple copies of the SVG, but just one SVG with the clippath definitions (will have to hide this SVG with inline CSS). Works, at least in Chrome and Firefox. Polygon triangles for the clippaths is a bit cleaner than rotating a rectangle 45 degrees I feel.

http://codepen.io/atelierbram/pen/rLeZwq

[MrTimcakes]

Yeah, thanks for your help thus far. Nice work but that style doesn’t appear properly when reversing the animation (When the eye halves come back out). I might have to resort to Javascript :(

[Author]

Posts