Streaming live at 10am (PST)

Best Practice: Different Interactions for Different Viewports


#1

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?


#2

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.


#3

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.


#4

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.


#5

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!