Streaming live at 10am (PST)

Help with horizontal scroll on hover interaction

Hi all,

I’m having a little bit of a headache trying to figure out how to make my interaction work on 13" laptops.
I’ve created an interaction on my top-right menu to make the it scroll on hover. It works fine on by screens, but when i resize the browser, the entire menu won’t scroll so we can’t see it entirely.

Hope someone can help with this one :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/lc-wedding-v2?utm_source=lc-wedding-v2&preview=de446e4d6cd1e8c52d40cc59829762a0

Try reducing the width of your trigger div to 37VW or so. It’s set to 100VW which sends it off the right hand of the screen making it not possible to mouse over more than what’s visible, thereby only triggering part of your animation.

Does this help?

53%20PM

Hi @dont-pop

Thanks for the answer. Unfortunately, i’ve tried this but it doesn’t work…
Here’s a video https://streamable.com/p6rna

1 Like

Hey, does it work if you change it to -50%?

@Noah-R

I have tried it already, same problem… it only shows the first 2 blocs, the 2 others are still missing.

I have also tried using PX for the menu-flex and menu-col-scroll (and the interaction triggers), still not working

Dang, that’s weird. Hmm… Because I resized my window pretty small and it showed for me. I am on a 15" but I will keep trying to think of something. Good challenge.

Heres the fix… I think

See the Youtube Video Above.

**In your animation, use PX as units. You want the changes in position Fixed in relation to your scroll area.
Start at 0 and finish at -900 or so (the screencast shows -940 but it clips the final menu item a little)

**Change the padding in your “Right Col” from em’s to VW. You want these to be flexible so your mouse trigger area doesn’t squeeze off the screen.

**Finally, change menu-col-scroll to VW as well to keep the trigger area visible… it’s going to get smaller anyway, so keep it accessible to the mouse.

If this works, and you love it, let me know. :slight_smile:

1 Like

How to adjust the width of desktop view in the designer

Also check out this link… hopefully this will help you hone in details on animations.

@dont-pop sorry for the late reply. Actually, there was a conflict with another javascript resource. I’ve found pretty much the same solution for the units and interaction, thanks again :wink:

1 Like

Hello Guys I have a question about this,

This is my public link: (product template page!)

https://preview.webflow.com/preview/gallieresparis?utm_medium=preview_link&utm_source=dashboard&utm_content=gallieresparis&preview=d4d3cdaaa1bf1847d534d73a91b3882b&mode=preview

Is it possible that the 100% of the X actions corresponds with the 100% of the width of my div block five?

As I am using CMS this width variates and I dont know how to put this movement on the “x move” to adapte to the div 5 width.

Is this possible?

Thank you!