I’ve rebuild a simple version of my interraction project.
My situation is the following: I’ve set up a scroll into view interraction so that element fade in, when scrolling into view. As this interraction is too heavy for mobile phones, I’ve asked webflow to only trigger that animation on desktop and table wich works fine.
The problem
On mobile devices, the interraction is not triggered but the element remains hidden, which is the initial state of the fade in interraction… how couls I ask webflow, to not even display the initial state of the interraction ?
The video
Here is a video capture I made to explain you my trouble
Here is my read-only simpfied project link.
Is there nothing I could do ?
Should I simply remove that interraction at all ?
That’d make me sad looks beautiful on desktop but too heavy for mobile to stay fluid
It’s true the trigger setting does not alter the initial state of elements that have been set inside the animation.
The way to keep your animation on desktop and tablet but disable it on mobile is to remove the initial states from the interaction and apply them directly to the elements in the styles panel. Then go to your mobile view in the designer and remove the initial states needed only for the desktop interaction. It’s a problem I keep running into so I’m now in the habit of not using the interaction initial state unless required to by the interaction. This way I have the flexibility of using the trigger settings fully.
It’s a nuisance during design if you need to make adjustments to see what you’re working on, but it is a viable work around to get the right results on each viewport. This is also why I try to do all the design work first and finalized before moving on to the animation phase. It can be hard to have the self control to not play with the animation before it’s time though.
@matthewpmunger, thank you very much for your answer !
Yes it’s so hard not to test things around with interraction just a few clicks away…
I will try your technique, hopefully I’ll sort things out.
Is there maybe a wishlist so that we can vote on improving that interraction initial state issue ?
@HammerOz Yes this is still a known issue with interaction initial states.
If it is necessary to disable (on smaller breakpoints) an interaction with initial states, then it is recommended to move the initial state settings to the styles panel instead of the interactions panel.
@matthewpmunger Thank you for this explanation–those initial states were driving me crazy. But how do I apply these same effects (in this case, 0 opacity) in the styles panel? I’m sure it’s simple, but I can’t figure it out.
I notice Webflow is very conspicuous in its absence from this conversation!
Basically a serious known bug that they are just ignoring.
I have spent a day building very complex animations only not find that is completely breaks my mobile layout which has the animation disabled but still pulls in the initial state.
Very, very poor Webflow!
I think the above workaround is a good idea but would drive me nuts having to set entire multi-div sections to be offset with false initial states, what a dreadful way to design.
I think as a work around I will merely duplicate out the sections and have a desktop version showing only on desktop and a mobile version showing on everything else below, then switch off the animations on the mobile only version.
At least that way the designs are still correctly laid out for each device viewport.
Come on Webflow, lets see a member of staff take some responsibility and give at least a basic response!
This was answered by staff at least once in another similar thread. This is not a bug but rather just the way initial state is delivered (before the interaction itself, it is a will-change property). It is unlikely that something will be done with this. I would rather they at least told us about this problem in some of the ix tutorials or something.
