Finger move over element interaction

Design help Animations & Interactions
1

Hello !

On the introduction of my website, I used “mouse move over element” interaction to animate the white circle. It’s lovely to me. But I would like it to work the same with a finger on phone/tablet… Is there any solution for this ? Would make the responsive stuff easier.

Thanks,
Matthew

Here is my public share link: (https://preview.webflow.com/preview/artwwwork?utm_medium=preview_link&utm_source=designer&utm_content=artwwwork&preview=4d1d54b2bb92038764245e67f25be33c&workflow=preview)
(how to access public share link)

2

I’m sure someone already did it, just need to know who ^^’

3

HI @Matthew firstly mobile devices does not understand what :hover mean but there are ways around. You can find many articles and solution how to on internet fo eg.

or

etc.

4

Hey Stan, thanks for your answer ! Sadly i’m not talking about the simple hover interaction. Hit my website, it’s the very intro of it on desktop, when the light follows the mouse. It would be wonderful if it could work the “same” on mobile… (light follows finger).

5

Hi @Matthew like I have mentioned :hover on mobile doesn’t exist, you have to deal with touch instead. Tracking touch is a bit complex task and you can look on internet to find some library to solve this issue for you or use Web API Touch events.

here are some articles to read :wink:

You may face issues that this will not work on all devices or with specific mobile OS, if so, you will need to make some work around to make it work everywhere .

6

Thanks for your time Stan, I will jump into the touching meta from now and make it work (i hope)