Animations on mobile not working

Hi,

I’m trying to add animations to my website, but on mobile, the animated elements are not showing. A couple of questions:

  • Are animations supposed to render on mobile?
  • Which is the best method to configure animations to not render on mobile?

Thanks for your help,
Zain

Hi Zain,

animations should also render on mobile with the default settings. You can control this behavior with the “MatchMedia” rule:

Here you can add values like CSS Media Queries. (min-width: 768px) for example will run the animation only for viewports that are larger than 768px (width).

Regards
Daniele

1 Like

Hi,

Does render mean that they fully animate on the mobile as on the desktop experience or that they are merely shown without animation?

Thanks
Ash.

Hi :raising_hand_man:t2:

Yes, by default, the animation will run for mobile devices the same as for desktop. Using MatchMedia, you can change this behavior. (Also regarding browser motion settings)

Thanks, Daniele,

I’ve never got this to work on mobiles and just presumed it would not work. Are there any common issues that we might have on mobile?

Could you create an example and send me access to the site? I could take a look :slight_smile: