How to modify before & after image section

Store Design
, , , , , , , , , ,
1

Hey guys, I added a before and after image section to my store. But I need help with one thing.

I want that when I click on the “BEFORE” or “AFTER” heading on mobile, it smoothly scrolls to the before/after image.

Here’s the JavaScript code I used for that, and if needed, I can also provide the CSS styling and HTML structure.

Code:

Here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll almost to the bottom, that’s where the section is)

And here’s a store where it works how I want it: https://tomnoske.store/products/cinema-luts
(Just scroll almost to the bottom, that’s where the section is)

I want this fix for the click on the before/after only on mobile!

Thanks a lot,
Tim

2

Hi @CreatorTim

Regarding your observation, the feature works smoothly on desktop because it is designed to function based on mouse movement. The image responds dynamically to wherever the mouse is moved.

On mobile, however, the feature operates differently, as it relies on touch interactions. Since it cannot detect continuous movement the way a mouse does, the behavior may appear less fluid. Unfortunately, there isn’t an alternative solution to fully replicate the desktop experience on mobile devices.

Best,
Daisy - Avada Support Team.