Interaction not on mobile devices

Design help General
1

Hello,

I have a lot of elements that appear on “Scroll into view”. As I do not want this effect on mobile devices I chose Desktop and Tablet in the trigger settings. However, in this case the items do not appear at all in the mobile version. What am I missign?

https://preview.webflow.com/preview/activesol?preview=d704e3f1bd7253f4e5737daa8dae9ba0

Thanks for your help.
Christof

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Christof, thanks for the excellent question. At the moment the initial states apply to all viewports regardless of whether the interaction is being used on a particular viewport, so what I would recommend is to duplicate your elements and on one set of elements have those show only on desktop view using Visible On setting in the Global Settings Panel.

On the duplicated elements on mobile, remove the interactions and have those elements only show on mobile viewports and not the desktop viewport.

I hope this helps.

3

Thanks, I had the same idea. I just wondered if there is a more somple way - if I duplicate the elements I also need to have the duplicated elements in mind if I make a change.

4

Hi @Christof,

I had a similar issue recently.

My work around is a bit different. What I’m doing is instead of using initial state I’m doing an animation for each initial state on a page load interaction and I set all my transform animation to duration 0sec. I hope my screen shots will make sens.

50
50480×776 19.9 KB

33
33478×970 25.6 KB

14
14480×980 26.3 KB

46
46476×1218 39.9 KB

This has 2 advantages. It can separate the initial from already complex animation and second it will not be triggered when javascript is disable so the elements will have their original positions.

I hope it can help you.

Max

3 Likes
5

Hi @Maximosaurus,

Thanks for your suggestion. I already duplicated all content but next time I will try your solution. I think it is better than duplicating content.

Regards
Christof