Disabling animations on mobile devices

Design help General
#1

Hello,

I am trying to disable some animations on the mobile device.
For some reason I can only disable it everywhere but not just on one specific device.

How is that working ?

mobile%20anim

1 Like
Removing animations on other devices
#2

Hi @Design1214

Could you share your read only link please:

The setting you have there means the trigger will not happen on mobile, but the initial state will still apply on all devices.

1 Like
#3

Sorry for the late answer. A more urgent project came up

Here is the link : https://preview.webflow.com/preview/designs-first-project-436-aba50666199aa?preview=2c4dc5e6828ab42d6e4fbf919cbf4a5a

Thanks :slight_smile:

#4

So I asked a little while ago and I still haven’t found a solution. Is it possible to remove / disable animations on devices such as Mobile and tablets ?

Currently the animations works well on desktop but it looks too much on mobile.

Here is a link to my project : https://preview.webflow.com/preview/designs-first-project-436-aba50666199aa?preview=2c4dc5e6828ab42d6e4fbf919cbf4a5a

#5

Hi @Design1214

Sorry you didn’t get a response previously. (I’ve merged the topics)

CloudApp

You can find the interaction triggers for different devices in the interactions panel.
Which element is it you’re having trouble with and I will take a closer look for you.

1 Like
#6

No problem I was late to answer !

I tried this method before but then my elements stays invisible :confused:

#7

I did not check but it is likely that the visibility of your element is controlled by the “initial state” in your animation. If that is the case just make sure to make your element visible in the first place while styling it

#8

Most of my elements are on 0% oppacity on the initial state of the animation. But I didn’t touched their oppacity on the style.

#9

try explicitly setting element’s opacity to 100 perhaps?

#10

Doesn’t seem to do anything :frowning:

#11

Which element/page is it?

#12

Every title and visual element almost.

#13

For the Header on the initial load, the only way I can get it to work is by removing the intial state button, and giving the 4 elements this setting with a 0 second duration.

CloudApp

So it’s still kind of an initial setting, but that way the designer doesn’t try and take an initial state on all devices.

#14

This seems to be working yes ! Now I just need to apply it to all my interactions ahah !
Thanks !

EDIT : After trying it only works well for page load animations. It kinda bug for other types :confused:

#15

I do have an other question, I put a background video of a mobile phone app. The issue is that in order to stay at the specific ratio I needed to put exactly the size in pixels. The issue with that is that it’s kinda killing the responsive aspect. Do you know any solution ?