Streaming live at 10am (PST)

Fade in/out = invisible on mobile


#1

Hey guys,
I applied a Fade in/out interaction on several columns but I’ve unselected the mobile devices for this so that the columns will just show but instead they just disappear all together (but they are visible on desktop as per interaction).

As of this writing I’ve removed the interaction across all devices until I can find a solution.

Any suggestions?

ascs


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


#2

happy to help look into this. can you show us an example of this issue?


#3

Sure thing @PixelGeek .
I created a form on ascs.webflow.io/project-strategy and applied Fade in/out interactions for each row that scrolls into view. However, when viewed on mobile the rows are invisible (whether active or inactive trigger) even tho I disabled trigger interaction on mobile devices.

click on questionaire or push to start to access form
N.B. Interaction is now active with the trigger disabled on mobile for your viewing.

ascs


#5

Hi @andreswaby

Thanks for posting about this. This is a known issue with the media query settings for interactions. Basically, initial even if an interaction is disabled for a breakpoint, the initial state will still render. In this case, since the interaction is a fade in / out the initial state is 0% opacity.

The team is currently digging into this issue to find a solution. In the mean time, the best workaround is to set the initial state via the Style Panel, then create a new interaction that will set the row to 100% opacity. Here is a quick video showing how you can do this for your project: https://cl.ly/440T3v3i2a1N

I hope this helps and I’ll post back here when the team has a fix :bowing_man:


#6

Thanks @Brando,
i figured that would be suggested and that works for mobile.

I’m still having a bit of issue in that i would like for the class to be affected (on desktop) but i;m not having any luck as the initial state seem to take priority.

what i’m avoiding (as i thought about it) would be to apply the effect manually to every single row, thereby duplicating and changing the individual targets to affect each row.

thoughts?
ascs


#7

Hi @andreswaby ,

You should be able to use the same method I described above, but with a class based interaction:


#8

I’m gonna give it a shot.

Thanks @Brando, I appreciate it :raised_hands:t5:


#9

hey @Brando,
SOOOOOOOO…HERE’S THE FIX :raised_hands:t5:


#10

Ah brilliant man! Thanks for sharing that :smiley:

I’ll definitely keep this in mind for future reference :fist_right: :fist_left:


#11

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