Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animated Clipping In SVG

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #242756
    MrTimcakes
    Participant

    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.

    #242767
    Atelierbram
    Participant

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

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

    #242779
    MrTimcakes
    Participant

    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

    #242786
    Atelierbram
    Participant

    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.

    #242790
    MrTimcakes
    Participant

    I’m relentlessly experimenting with clipPath and mask

    #242792
    MrTimcakes
    Participant

    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

    #242797
    Paulie_D
    Member

    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.

    #242798
    Atelierbram
    Participant

    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

    #242802
    amanda_
    Participant

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

    #242818
    MrTimcakes
    Participant

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

    #242822
    MrTimcakes
    Participant

    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?

    #242832
    Atelierbram
    Participant

    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.

    #242833
    MrTimcakes
    Participant

    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

    #242842
    Atelierbram
    Participant

    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

    #242850
    MrTimcakes
    Participant

    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 :(

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.