Interactions that respect CSS breakpoints

Not sure if this has a solution already in place or not but here goes, can we get Interactions that break down individually over the CSS breakpoints? ie Desktop/Landscape and Phone Landscape/Portrait? Page scrolling and While Page is Scrolling specifically, since layout on mobile is so different it really screws up the timing…

Oops, this was meant for Design Help > Interactions

Hey @PhillipRousu

It is possible adjust the trigger settings for each interaction as needed. Scroll dow to the bottom of the interaction panel after clicking on the trigger.

04%20PM

Just be aware that any “initial state” settings will still affect breakpoints that don’t use the trigger. The trick here is to move those settings to happen instantly at 0:00 instead. The effect should be the same, but you’ll save yourself some headache of troubleshooting or needed separate elements per breakpoint.

Hopefully this helps. Happy designing!

2 Likes

Ah, they really did think of everything. “The trick here is to move those settings to happen instantly at 0:00 instead.” can you elaborate on that more? I jumped into my project and replicated the problem you brought up very quickly!

@PhillipRousu

Maybe this will help explain it.

Don’t do this.

Instead turn off “initial state” and use Delay:0sec and Duration:0sec.

This will achieve the same animation without the negative side effects.

One other note, sometimes (depending on the trigger and interaction happening) you might need to move the “initial” or zero state settings from the interaction to the css styles panel. This way the styles load into their desired states upon page load. Another benefit of this is you can then adjust/remove those initial styles for the mobile breakpoints.

Hope that makes sense.

2 Likes

Makes perfect sense thank you for taking the time to explain it! I am assuming it is the same concept in scroll based interactions?

My pleasure!

And yes, this tip should apply to all types of interactions and breakpoints.

1 Like

While your still online :), I only have 1 javascript class under my belt so far and havent gotten to jquery so far in my current class. Is interactions basically jquery?

@PhillipRousu

Yes, exactly that.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.