Seyi Posted November 26, 2020 Share Posted November 26, 2020 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 comment Share on other sites More sharing options...
akapowl Posted November 26, 2020 Share Posted November 26, 2020 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. 3 Link to comment Share on other sites More sharing options...
Seyi Posted November 26, 2020 Author Share Posted November 26, 2020 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 comment Share on other sites More sharing options...
mikel Posted November 26, 2020 Share Posted November 26, 2020 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 ... Mikel 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 26, 2020 Solution Share Posted November 26, 2020 Seems to work for me, though I haven't tested it on a bunch of devices. I would definitely recommend fixing the following though: 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". 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). 3 Link to comment Share on other sites More sharing options...
mikel Posted November 26, 2020 Share Posted November 26, 2020 Another option See the Pen 0f6b36d256899f45f9c71ba5bbfdc549?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now