Animated Clipping In SVG

[Atelierbram]

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 ;)

[MrTimcakes]

Alright, I got it done. It took a bit of Javascript but it works. http://codepen.io/Ducky/pen/oLxNaV

[Atelierbram]

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*="leftClip"],
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 …

[Author]

Posts