- This topic is empty.
-
AuthorPosts
-
June 12, 2016 at 12:27 pm #242756
MrTimcakes
ParticipantSo, 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 #242767Atelierbram
ParticipantDon’t quite get the clipping part, but is CSS-animations an option?
June 12, 2016 at 1:59 pm #242779MrTimcakes
ParticipantNot 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
June 12, 2016 at 2:48 pm #242786Atelierbram
ParticipantThat 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 putposition: 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.June 12, 2016 at 4:43 pm #242790MrTimcakes
ParticipantI’m relentlessly experimenting with clipPath and mask
June 12, 2016 at 5:44 pm #242792MrTimcakes
ParticipantArg, 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_D
MemberDon’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.
June 13, 2016 at 4:02 am #242798Atelierbram
ParticipantI 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_
ParticipantI recommend the greensock library for animating svgs. I am a big fan.
June 13, 2016 at 8:53 am #242818MrTimcakes
ParticipantThanks, I used your changed grouping method and animated the rest, thanks http://codepen.io/Ducky/pen/oLxNaV
June 13, 2016 at 9:50 am #242822MrTimcakes
ParticipantNow a new problem faces me, how can I use a class inside of a css url() function?
Currently I haveclip-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 toclass="leftClip"
it doesn’t work? How can I use classes in url or something to similar effect?June 13, 2016 at 3:26 pm #242832Atelierbram
ParticipantHas 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 #242833MrTimcakes
ParticipantAh 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
June 14, 2016 at 2:07 am #242842Atelierbram
ParticipantExample 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 #242850MrTimcakes
ParticipantYeah, 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 :(
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.