Hey guys,
I often get frustrated I can’t make custom masking shapes in Hype and do more complicated animation as a result from it. Well after a few weekends of extra work with SVG I discovered SVG’s clip path does an amazing job at doing advanced masks. And I can integrate it into hype just by dumping the SVG code into a div box’s inner html. And I can also control it with hype so I wanted to share this.
Live link: http://www.luckyde.com/ipad/svgtest/
So here when you click on the small gray box on the right it reveals the car which has a ton of masks applied to it at every stage(that flicker’s intentional , client request)
As you can see here i’ve got a ton of paths I’ve exported from illustrator(if you can name me a better software that does svg vectors cleaner and is also not basic i’m switching). Also I set all of them to hidden so you won’t see the masks.
Those are my first layers
Then I’ve got a bunch of clip masks set up to the path ids(i couldn’t do this without making this part).
And Finally I’ve got the actual image in a G layer
So here it’s linked to clipPath0.
Now in javascript you can change the opacity but you cant swap out that clip path easily with style, you’ve gotta use SetAttribute
So like this
imageLayer.setAttribute('clip-path', 'url(#ClipPath4)')
Just as an example and that will swap out the mask.
Now i shoved that in a for loop which gets triggered once every 50 ticks with a basic setTimeout and that made the revealing animation happen!
So that’s how to do it
Now you can also use transformations on those clip path layers or on the image layer with code so on paper you can animate the layer below or the path above and make complicated masking techniques that way. It works on all my tablets and it runs perfect even on 3 year old devices.
So yeah wanted to share!
svgtest.zip (83.6 KB)