Streaming live at 10am (PST)

Best Practice: Different Interactions for Different Viewports

New user and first-time poster here. I’ve dug around this forum quite a bit looking for answers but am still a bit confused.

I’m curious if it’s possible to have unique animations applied to specific viewports. I see a lot of conversation around disabling interactions on mobile, but I’d actually like to keep the interactions on mobile, just alter them to better fit that viewport.

For example:
In an interaction that starts on page load, I have text moving from left(set as initial state) to right in the desktop viewport, but I’d like it to move along the y-axis in mobile. I’m seeing the prompt that my interaction will apply across all viewports which I assume is a normal limitation of web animations - is there a workaround in Webflow for this type of limitation?

Hey @winmadden,

Absolutely! Just as you’ve mentioned you can turn interactions off for mobile, you can also do the opposite i.e. create mobile specific interactions and turn these off for desktop and tablet.

In your example of changing which axis the text moves along, you can simply duplicate the interaction, change it to the y-axis and set this to only show on mobile. Note, you may need to add an additional step or two if you’ve set initial states in the “desktop” interaction as these will still be applied - I think this is perhaps the prompt that you’re seeing.

Hope this helps.

1 Like

Thanks so much for the response, definitely helps.

Could you elaborate on “add an additional step or two” regarding setting initial states?

Because I’d like elements to appear(opacity 0 > 100) and shift(along x or y-axis) as the page loads I’d love to be able to have differing initial states per viewport. It sounds like this requires a little work around since an initial state is applied across all viewports…

Thanks again for your time.

Ok, no need to spend any more time trying to help me understand :slight_smile:

I kept working and found a solution. I stopped using initial states within the timeline editor and just set the actual initial state values I wanted in design/layout. As a designer this was a little unintuitive because my entire page appears blank in the editor since I want all elements to fade in.

So my solution is to get everything into a finalized layout and then bring the opacity down in the effects panel for every element. This way I can edit animation properties differently in every viewport.

If this is making any sense and there’s another way to do this I’d love to hear it. If not, I appreciate initial help regardless.

1 Like

Hey @winmadden,

That’s awesome! Glad you found a solution that solved it - makes total sense.

I completely missed that you were talking about a load interaction specifically in your original post, which as I’m sure you’ve found out can not be set to show only on different breakpoints, as you can only have one per page.

Another option that you could use for load interactions however is creating mobile specific elements that you wish to target in interactions. For example, if you have some text with the class of say ‘text,’ you could set this to only show on desktop, tablet and mobile landscape in the settings panel.

Settings%20Pane%20Desktop

Next, copy and paste this element (within the same parent), give it a combo class of ‘mobile’ and set it to only show on mobile portrait.

Finally, create a load interaction that targets both elements but each with their own animation e.g. ‘text’ will move along the x-axis, whereas ‘text mobile’ will move along the y-axis. Because each are separate elements, this removes the issue of initial states across breakpoints. And because you’ve hidden one or the other on specific breakpoints, the element itself or its interaction won’t be seen by the user.

Hope this is useful. Good luck with the build!

1 Like

Is there a better solution to this yet, or is this still the best way to go about having different initial states on different breakpoints?

@RHD I have a button, it does various things when clicked. However, within that trigger animation there’s one element that I want to stay visible on all breakpoints, except on mobile that element should be hidden.

I’m aware that I can set a trigger to work on a specific breakpoint. But if I make that button trigger on all breakpoints except mobile, then how do I get the trigger for mobile to work? Same button: different triggers for different breakpoints?

Ideally I would expect that for every action within a trigger animation I could specify which breakpoint that should be applied to. That way I can have one trigger that does different things depending on which breakpoint is visible.