Streaming live at 10am (PST)

Help with horizontal scroll on hover interaction


#1

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


#2

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?


#3


#4

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


#5

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


#6

@J_Canan

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


#7

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.


#8

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:


#9

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.


#10

@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: