Forum Discussion
Masking?
Although visual masking in the Storyline editor isnot possible, you can achieve it with some Javascript. Clipmasking works perfectly as you can see in my post here...
https://community.articulate.com/discussions/articulate-storyline/changing-state-directly-from-javascript?page=2
With some nice tricks you can then create a mask by adding a shape on top of your image in Storyline...then the javascript will use the x/y position of the element on top to clipmask the image.
Lets get that done...
As you can see in the above image... i imported 2 images. Mountains in the back and a grid of bodyparts image on top.
First thing you need to know when doing things with Javascript in Storyline ( in fact anywhere ) is how to use selectors. jQuery offcourse is a library for easy selecting elements, but that is not standard anymore in Storyline. So were gonna use Vanilla ( vanilla = plain, without any external libraries ) javascript to select our Storyline elements. I find the most simple method for selecting elements in SL the 'accessibility names'. Any element in SL gets default a 'acc-name'. The 'data-acc-text' property in the HTML is that. If you donot specifically change it, its the original image name. For this one that would be 'grid.jpg'
So to select the image you can use this code...var StorylineSprite = document.querySelector("[data-acc-text='grid.jpg']");
And because recently Articulate updated its internal Javascript tween engine to the newest GSAP you can then set the clip-mask for that image like this.gsap.set(StorylineSprite, { clipPath:"inset(50% 50% 0% 0%)"});
Like this you can set ( and animate ) the mask as wanted. Adding this sample as Storyline-clipmask001.story
If you want to dive deep into clip-paths this is a great resource...
https://css-tricks.com/almanac/properties/c/clip-path/
Hi Math,
This is brilliant! Thank you so much for sharing!
However...
I have noticed that this clip-mask is either rectangular or a square.
Is it possible to do one as a circle or as an ellipse?
Please reply here either way or here's my email:-
keith_trodden@yahoo.com
Thanks
- KeithTrodden-485 months agoCommunity Member
Hi!
Actually I have just figured out how to do this mask as a CIRCLE!
Check it out!
Cheers!