Masking + Animation with SVG's
I am attempting to use a SVG as a mask in an animation, however I am unable to determine what the correct custom css code I need to use to enable this.
I understand how to use the overflow (hidden) property in the Sencha interface, but I wish to create a more complex mask animation with a SVG.
Below is an example image illustrating what I'm trying to accomplish. Is this possible within Sencha? Thanks for your time!
Masking is not directly possible in Animator since it's a feature that is not widely supported in browsers.
With that in mind, webkit browsers (Chrome and Safari) do have mask support (svg or png based) and you can set this up relatively easily in Animator, although you can only preview it in browser.
Fist take a look at this for an idea how masking works in webkit browsers: https://developer.apple.com/library/...sks/Masks.html
After you have an understanding of this it's relatively simple:
- import your picture and your mask in animator
- place the picture on the canvas
- in Base Object -> custom css set the -webkit-mask property to point to your mask image (tip: you should set the url to point to assets/mask.png, as all images in the animation are exported into assets folder)
- create keyframes, and then set -webkit-mask-position property for every keyframe (once again, add this in custom css)
- preview in browser! it should work in Chrome and Safari
I set up a very simple project to demonstrate this, you can get it here (click download ZIP if you don't use GitHub): https://github.com/mbojic/example_webkit_mask
Once again - it is impossible to do this in Firefox or IE. Firefox has some rudimentary support for SVG masking, but I'm not sure if this works coupled with CSS3 keyframe animations.
Hey Miro, thanks so much for the explanation and example files! Hopefully, IE will also support SVG masking at some point in time. What a bummer that it isn't capable right now... Thanks again!