Text follows mouse cursor on hover [Collection Item]

Hi!

I want to create a text-follows-cursor hover on a collection item. The text following the cursor will be the title of a collection item. Is this possible to create in Webflow (with or without custom code)?
(See live-example here: https://vspicer.com/projects/ Click top-right icon!)

Thanks in advance,

Yoerdan

I think this tutorial can help you with that:

https://university.webflow.com/lesson/rotational-parallax-on-mouseover-interactions

1 Like

Hi, i’m currently trying to make a rotational parallax on mouseover. it appears great in the viewport, but everything gets flattened out and loses all the depths given to the children elements after it gets published. let me know if you want the Read-only link since i’m making a lot of changes right now.

Hey @Yoerdan, I saw your posted site (vspicer) with the hover effect in the grid view that shows the project description following the cursor by hovering a box. This is EXACTLY what I need and I am already despairing how to implement this with webflow. Would you mind telling me how you implemented this in Webflow? Or even share a link to the project, that would be super sweet.

Hi @Anne_Fr

I’ve created an example for you: https://preview.webflow.com/preview/textfollow?utm_medium=preview_link&utm_source=designer&utm_content=textfollow&preview=9d859014d1751e0a659e65e52a3c4015&workflow=preview

What I did to create this:
Create a div and put a textblock in that div.

First thing to do is to let the textblock follow the mouse cursor:

Select the div block and put a ‘Mouse move over element’ animation for this divblock.
Mouse X-actions (left-right): put the left axis on 0px and the right axis the width of your div block (for me this would be 300px). I’ve put a 20px padding: so the text wont interrupt when clicking a block.
So for this example: 0% is 20px and 100% is 320px.

Mouse Y-actions (up-down): do the same as above but with the height of your divblock instead of the width.
So for this example: 0% is 20px and 100% is 220px

Make sure you set smoothing to 0%.
The text is now following the cursor while hovering over this block.

The only thing we need to do now is to make the text appear when hovering over the div block.
Select the div block and create a ‘Mouse hover’ animation.
On hover: textblock to display: block
On hover out: textblock to display: none

The last thing you need to do is to set the textblock to display none.

Hope this solution will work for you! :grin:

Hey @Yoerdan! Thanks so much for your reply and all the steps and even the prototype. This will help me a lot. Super happy about the community power here! :pray: Thank you!