Streaming live at 10am (PST)

Mouse wheel animation on hover with CMS

Hi there!
I’d like to create a portfolio page like this https://www.masonstudio.com/projects with CMS and I wonder if it is possible to create a similar interaction with Webflow. I’d appreciate any help or piece of advice!

P.S.:
As far as I understand this website uses https://github.com/jquery/jquery-mousewheel .


Here is my public share link: https://preview.webflow.com/preview/mouse-wheel-animation?utm_medium=preview_link&utm_source=designer&utm_content=mouse-wheel-animation&preview=a7a8e415129d7aae5c2274057dc68447&mode=preview

Hi Anastasiia, very cool layout indeed. I don’t fully get why the library it runs on is call mouseWheel, because it works with other pointing devices — for instance I’m using a Wacom tablet and the hover works just great.

This Interaction cannot be done with Webflow IX2. You could approach it but it won’t be clean and precise as the reference is, and cleanliness and precision are everything for this interaction.

So you have to use the js library, which is indeed calculating exactly what the delta between the hover and the scroll in the other section should be.

I can’t help you further on this as JS is really not my specialty. If you can’t do it, find help with a coder.

Hi Vincent,

thank you for the reply! I guess I’ll be looking for a developer to help me now. :smile:

You’re welcome. if you come back here to share with us what you end up creating with that JS and a dev, that’ll be fantastic :slight_smile: I find that layout and IX very effective and would like to consider it for future designs.

1 Like

I hope I’ll be able to solve this, then I promise I’ll create and share a cloneable project. :blush:

1 Like

Fantastic, I can’t wait to see that.

Be aware of one thing, that you can test along during the development: using JS to control scroll often ends up with hacking it so much that Webflow IX scroll triggers don’t work anymore. The reason is basically the JS often creates an environment that’s fixed (that doesn’t scroll) and control the scroll within. Hence the scroll IX Webflow triggers to never actually be able to fire.

You can make your developer aware of that and make him work on a project were you have already set some Webflow IX scroll triggers, just to see when it breaks. Depending of course on wether or not you’re planning to use Webflow IX scroll triggers on that page.

Example of a JS lib that’s breaking Webflow IX scroll triggers: fullpage.js

Vincent, thank you so much for the information! :bowing_woman:

1 Like