How to Trigger Interactions Only on Larger Desktop?

Hey everyone :wave:,

Does anyone know how to trigger an interaction only on the larger desktop breakpoint? Below I have an image of the trigger settings and I want to trigger an interaction on the larger 1920px desktop breakpoint only. Is this possible? Please let me know if you have any solutions and thanks.


Here is my public share link: LINK
(how to access public share link)

Hey Joe, that is not currently an option. It’s desktop and up only at this time. Does not look like want is in the wishlist but it probably should be. Feel free to add it! I will vote!

1 Like

@Monterje One workaround is to have two of the exact same elements on your page, one with an animation, one without an animation. For your main breakpoint and down, set your display of the element with the animation to Display: none and set the display of the element that does not have an animation to whatever you want: block, flexbox, grid, inline-block or inline. Then on your larger breakpoint do the opposite, set the display of the element without the animation to Display: none and set the display of the element with the animation to whatever you want.

This is not the perfect solution to this problem but it will work! :grinning: Hope this helps you out.

4 Likes

Thanks, Jeff. How do I add this feature to the wishlist :thinking:? It’s the first time I ever heard of this.

Visit Webflow Wishlist and add an idea!

1 Like

Nice :+1:. Thanks for the link Jeff.

1 Like

I think I know what you mean so I’ll give it a try. Thanks for the suggestion.

1 Like

@Bopper I just tried it and maybe I’m doing it wrong but it didn’t make a difference because the interaction was still triggered on the main breakpoint desktop setting.

Ok @Monterje there are a couple of possible problems. First, make sure that the element with the animation has a different class from the element without the animation. To duplicate an element so that it has a different class is pretty simple. Just copy/paste the desired element onto your page, then on your new element click on the class dropdown and press “Duplicate class”.

Screen Shot 2021-08-27 at 10.03.06 AM

Name this new class something like “Element w/ animation”. Change this class so that it has your animation. Then double check to make sure that the element with an animation is hidden on regular desktop and below and that it is set to the appropriate display on your largest breakpoint. Then check that the element without the animation is hidden on your largest breakpoint and that it is set to the appropriate display on desktop and below.

Hope this works for you. If it does not, please share your read-only link so that I can see the problem and what’s going on.

Hi Luke,

I just made a recorded video response that I would like to share. But I’m having trouble adding it in this post. Is it not possible to add video responses here?

Not directly. Linking to media files that have a public URL does work.

1 Like

Thanks Jeff. @Bopper I added a YouTube link Webflow Trigger Interaction on Larger Desktop? where I show what I’m trying to accomplish. I hope this helps and thanks.

Ok @Monterje , you’re really close. The key is to actually “hide” the element on your main breakpoint and down. So on your largest breakpoint set the display to something other than Display: none. On main breakpoint and down, set Display: none.

Screen Shot 2021-09-01 at 3.26.36 PM

Sorry if I confused you about duplicating an element so that one had an animation and one didn’t. I assumed you had an element on your page that you wanted to appear on all breakpoints, but only have an interaction on the largest breakpoint. If you just want an element to be visible on one breakpoint and not another, it’s simply a case of setting Display: none on breakpoints that you don’t wish the element to appear.

Hope this explains it! :+1:

1 Like

Hey @Bopper ,

This is a follow-up video response for the most recent post https://youtu.be/CSAqfB0ISoI

So @Monterje just to be clear, the offside image is still appearing on the screen on the main breakpoint? Even though it’s display is set to none? Hmmm… You could check to make sure that nothing in your interaction sets the offside image’s display to inline-block again.

The only other thing I can think of is to set the trigger text to hidden. Then replace it with another duplicate piece of text that doesn’t trigger anything.

@Bopper Unfortunately, duplicating the text without the interaction isn’t going to work either because again the trigger is the cause of the problem. The only other solution that I figured out is to remove the trigger animation entirely. This would actually make the offside images only appear on the larger desktop breakpoint and hide it on the desktop and below. It sucks because I want to have this slide-in animation but the trigger will cause it to appear on a desktop breakpoint and above.

I submitted a Webflow Wishlist of having a Larger Breakpoint trigger setting. Take a look below at this quick mockup I did. If this can be added to future Webflow features, then my problem will be solved.

Anyways, thanks Luke for trying to help me with all of this.

Best,