Jump to content
Search Community

Animation Looks Janky on Mobile Inquiry?

onthegocode test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello,

 

I am new to Gsap and have been having some fun creating animations. I created an animation that primarily uses clip paths and everything looks perfect on Desktop ("Chrome browser"). The issue occurs when on mobile. I am using a iPhone XR running Chrome Browser also tested on Safari and the animation starts looking Janky. The frames are dropping and svg just pops into view when it should appear with a nice animation. I have linked a codepen of the project, please let me know if my code isn't optimized and what I can do to help make my animations work on mobile devices.

 

Best,

 

Andrew Rivera

See the Pen yLKpvVb by onthegocode (@onthegocode) on CodePen

Link to comment
Share on other sites

  • Solution

Hi there, welcome to the GSAP forums. This is a lovely effect! Well done.

I'm afraid I don't have an easy answer here though. It's largely 'don't animate Clip Path on mobile safari'. Sorry, I know it's not a nice answer. There's no real magic-trick for mobile. You just have to be careful what you're animating/animate less.

Also on IOS, Chrome is Safari. Apple don't allow any other browsers on their devices, so it's just safari wrapped up to look like chrome. 

Transforms and Opacity are going to be your friends for mobile animations, you can create effects like this by wrapping elements in a div with overflow hidden and then animating the internal or external elements to create masking/clipping effects.

Another option that tends to be smoother on mobile is using SVG clip paths or masks.

 

Or alternately - animating the clipped elements 'within' a clip path with transforms rather than the clip path itself. That's sometimes more performant.

 

Happy to elaborate a bit more on one of these options if it helps.

 

Good luck!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hello Cassie,
 
Thank you for your kind words. I had no clue Chrome was bascially the same as Safari, good to know. I did have a feeling clip paths could be the culprit. Thank you for your alternative options I will be trying them out shortly 🙂.
 
Quick question I am familiar with masks but not so much with using SVG clip paths, how would they work? Also by animating the clipped elements, do you mean moving the element itself rather than the clip path?
 
Thank you,
 
Andrew Rivera

Link to comment
Share on other sites

I put together a little  fork for you.

See the Pen vYRdOpw?editors=1010 by GreenSock (@GreenSock) on CodePen



MDN docs - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

 

Quote

Also by animating the clipped elements, do you mean moving the element itself rather than the clip path?

If you apply a clip path or mask to a parent element - then you can animate the children inside that.

 

There are a ton of different combinations of different sorts of clip paths and mask and ways you can use them. I find SVG masks and overflow hidden the most useful and reliable for animation though.

 

Hope this helps!

  • Like 1
  • Thanks 1
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...