Increasing clickable area of an element, easy way?

Saola Animate Support Questions
1

Hello, I have some relatively small elements (triangles) on the canvas allowing the user to skip to the next scene. Now I wonder how one could increase the clickable area by e.g. having a invisible border?

How would I do this?

I attached a class “smallTouchable” to the element (an svg shape) and then tried with CSS like that:

.smallTouchable{
position:relative;
}

.smallTouchable:after{
content:’’;
position:absolute;
padding: 100px;
top:-50px; bottom:-50px;
left:-50px; right:-50px;
}

Although the css is applied to the div in the DOM, it won’t increase the clickable size.

Thanks!

2

v3 adds support for pass through transparent areas.

You can bypass it without CSS. Add the line to the triangle with a decent width. Set colour to white and adjust the alpha level to zero.

image

2 Likes