Animations on mobile not working

How To
1

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

2

Hi Zain,

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

Xnapper-2023-01-16-12.35.53
Xnapper-2023-01-16-12.35.531440×810 36.2 KB

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
3

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.

4

Hi :man_raising_hand: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)

5

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?

6

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