- This topic is empty.
June 12, 2016 at 12:27 pm #242756
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.June 12, 2016 at 1:48 pm #242767
Don’t quite get the clipping part, but is CSS-animations an option?June 12, 2016 at 1:59 pm #242779
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/zKplCJune 12, 2016 at 2:48 pm #242786
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: absoluteon those SVG’s, and rotate those with the same amounts back. That could work I think, but still have to try this out.June 12, 2016 at 4:43 pm #242790
I’m relentlessly experimenting with clipPath and maskJune 12, 2016 at 5:44 pm #242792
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/oLxNaVJune 13, 2016 at 3:24 am #242797Paulie_DMember
Don’t quite get the clipping part, but is CSS-animations an option?
The points of the path are not selectable with CSS.June 13, 2016 at 4:02 am #242798
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 ;)June 13, 2016 at 6:50 am #242802amanda_Participant
I recommend the greensock library for animating svgs. I am a big fan.June 13, 2016 at 8:53 am #242818
Thanks, I used your changed grouping method and animated the rest, thanks http://codepen.io/Ducky/pen/oLxNaVJune 13, 2016 at 9:50 am #242822
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
.and change the svg to
class="leftClip"it doesn’t work? How can I use classes in url or something to similar effect?June 13, 2016 at 3:26 pm #242832
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.June 13, 2016 at 3:39 pm #242833
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,outputJune 14, 2016 at 2:07 am #242842
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.June 14, 2016 at 8:35 am #242850
- The forum ‘CSS’ is closed to new topics and replies.