No Touch Support?

Design help Custom code
1

I am creating a page based on this “made on webflow” page as I love the mask setup.

However, I’ve just realised there is no touch support on moving the masked element itself. Is there any way around this? The whole purpose was to create an interactive activation on a touchscreen that didn’t require mouse movement.

Thank you

(Secondarily, if anybody can work out/let me know please how to feather the edges of the mask so it’s not so clean cut, that would rock!)

2

Try this in the before-/body code area.
When you touch/drag inside of your .canvas element, it generates a symathetic mouse movement event which I think should trigger Webflow’s interactions ok.

<script>
const imageContainer = document.querySelector('.canvas');

// Trigger sympathetic mousemove event
function triggerMouseEvent(type, originalEvent) {
  const touch = originalEvent.touches[0]; 
  const mouseEvent = new MouseEvent(type, {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  originalEvent.target.dispatchEvent(mouseEvent);
}

// Add touch event listeners
imageContainer.addEventListener('touchmove', (event) => {
  triggerMouseEvent('mousemove', event);
});
imageContainer.addEventListener('touchstart', (event) => {
  triggerMouseEvent('mouseenter', event);
});
imageContainer.addEventListener('touchend', (event) => {
  triggerMouseEvent('mouseleave', event);
});
</script>
1 Like
3

You can do filter: blur but it would affect the entire mask evenly. I don’t see an easy way to blur just the edges of the mask in this scenario, you’d likely need to research a different masking approach so that you can use an SVG and/or radial gradient as the mask.

That’s a very different approach from the way the interaction works cloneable you’re using, so you’d be redesigning that entirely.

1 Like
4

This is amazing, thank you - it seems to reach an invisible barrier about 2/3rds of the way across towards the right of the page when touching (the circle stops and won’t be dragged further), but not when using the mouse. Any ideas why this may be happening?

5

No, it works perfectly for me on Android mobile.

My guess is that this cloneable was not designed for mobile users, and there may be some issue with the interactions or the positioning of the elements that’s different on mobile.

The code is pretty simple, capture a touch event on the .canvas element, and fire a mouse move event, so your problem is most likely outside of that.

You could target 'body' instead in the queryselector and see if that helps/hurts your device’s behavior. You’ll need to test this on a lot of devices.

6

Thank you I tried it on my mobile and it was fine - I’ll just have to make sure it works on the device i’m using it on and cross that bridge if it doesn’t

Appreciate your solution greatly

1 Like