▼
Streaming live at 10am (PST)

Hidden section on mobile breaks in through the animation for desktop

Design help Animations & Interactions
#1

hi guys, I am using the horizontal scroll option from one of the tutorials made by Webflow Member, where you create a wide DIV box with a width fo 300+ VW and use this DIV box to animate the horizontal scroll.

so the thing is that I don’t want it to appear immediately on the desktop and therefore it is hidden in the beginning, and interaction enables it in 3 seconds. and on the mobile I don’t need it at all. so this DIV is hidden on the mobile.

however I am noticing that the interaction still enables it on mobile. if you load the website from mobile, there is an animation and afterwards thee is white box. if you scroll down the content is below.

so I am not sure why it started to enable this wide DIV even though it is hidden on mobile because it didn’t act this way actually and when it was hidden it didn’t break in through the animation…

#2

With the div selected In the interactions panel. You have the option to disable the interaction based on device/screen size.

Screenshot 2021-02-16 193357
Screenshot 2021-02-16 193357355×953 64.9 KB

#3

hi there. I did it. it seems that it helped with the mobile, but on the desktop now vice a versa it doesn’t work and you may scroll the sections even though the DIV block in the animation it should be enabled only in about 3-4 seconds in the end of the animation…

#4

solved. was my mistake as I had two same sections :frowning: thank you!

1 Like
#5

Glad it worked out! And nice work on the site! Would you mind setting my previous comment as the solution.

1 Like