Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG animation not working on mobile devices.

Recommended Posts

I have this SVG graph animation that works on my laptop, but doesn't work on any mobile browser, either android or IOS, I can't seem to figure out why. I'll appreciate if someone can help me with a fix.

See the Pen NWrVdNz by oluwadareseyi (@oluwadareseyi) on CodePen

Link to post
Share on other sites


Hey @Seyi


I just tested on Android 10 - Samsung Galaxy Note 10 in Edge, Firefox, Opera, UC Browser, Chrome and Samsung Internet

And in all of those, the animation worked fine.


Could you provide some more information, for others to help, on where exactly you don't see the animation working?



One thing I noticed: 

You use ScrollTrigger 3.3.3 alongside GSAP 3.4.0 in that demo.

Try and keep the versions synced, to rule out anything that could be related to differences in those.


  • Like 3
Link to post
Share on other sites

Okay. I use an iPhone, it also doesn't work on my safari on my laptop, Chrome and Safari on my phone. About the scroll Trigger thing, I installed gsap as one package, and that's the version that came with it.

Link to post
Share on other sites

Hey @Seyi,


Unfortunately, I have no idea why your code doesn't work the way you want it to.

But here's a simple example for charts:


See the Pen RwGwWma?editors=0010 by mikeK (@mikeK) on CodePen


Here is a live link to test it on an Iphone.


Happy tweening ...



  • Like 1
Link to post
Share on other sites

Seems to work for me, though I haven't tested it on a bunch of devices. I would definitely recommend fixing the following though: 

  1. You're setting a <g> transform to translateY( calc(var(--transform-value) * .85%) ) but I'm not sure that's well-supported across browsers. You're using calc() and css variables on a CSS transform on SVG. In my experience, it's much more reliable to use the "transform" attribute of SVG elements instead of CSS transforms, and some older browsers may not support calc() or CSS variables. I'd STRONGLY recommend setting all your transform-related stuff directly via GSAP because it protects you from a lot of those cross-browser "gotchas". 
  2. transformOrigin: "bottom" isn't valid. It should have two values, like transformOrigin: "left bottom"

I'd also update to the latest GSAP and ScrollTrigger (3.5.1 as of now). 

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.