Jump to content
Search Community

SVG animation not working on mobile devices.

Seyi test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

 

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 comment
Share on other sites

  • Solution

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 comment
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.
×
×
  • Create New...