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 3 posts - 16 through 18 (of 18 total)
  • Author
  • #242858

    Tweaked it a bit with transition-delay, which may or may not be what you are after. For me it falls into place, like it is now here and are going to leave it at that. I enjoy tinkering with this sort of thing, and will probably use something like this somewhere in the near future.
    If you would want to explore animation with javascript, the greensock library recommendation by @amanda_ is probably the best choice. My advice: take it one thing at the time + enjoy every iteration ;)


    Alright, I got it done. It took a bit of Javascript but it works.


    Congrats, that is a clever way of scoping those clipPaths to the right elements; kudos for that javaScript!

    The scoping of those clipPath was really complicating and frustrating things a lot, I can see this now, but underestimated this initially.

    An alternative approach could be having inline style-blocks targeting those clipPaths with unique ID’s. In the CSS one could then target those with attribute selectors (, when you would name them like #leftClip-1 #leftClip-2 and so on):

    clipPath[id*="rightClip"] {
        transform-origin: center right;

    Admittedly more typing, but those style-blocks are still quite small.

    BTW Firefox seems to have a problem with rotating those clipPaths …

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