Jump to content

Kent Pilkington

Choppy Tweening only on Safari

Moderator Tag

Recommended Posts

I've tested on Vivaldi (Chrome), Safari, Firefox, and Edge, all on MacOS, and only on Safari is the tweening of the SVG's position choppy. Any ideas on how to do things more efficiently? It was originally choppy and laggy on all platforms until I added the TweenMax.killTweensOf(this); line.


Edit for posterity: the codepen below has been updated with some of the suggestions, so if you come upon this later and don't see what I'm talking about, that's why.

See the Pen GRXVedq by ThinkByDesignInc (@ThinkByDesignInc) on CodePen

Link to comment
Share on other sites



I can't test on a mac machine, but you could try using quickTo():



Also you could add will-change: transform to the clip path element you're animating.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Yep, sorta like this: 

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




And the reason the killTweensOf() helped is because you were creating a TON of conflicting tweens all trying to control the same properties of the same element. You could have solved it equally well by setting overwrite: true. None of that is necessary if you use the gsap.quickTo() technique. 

Link to comment
Share on other sites

Awesome! That looks exactly like what I'm looking for, but didn't know existed. :-) I'll try it out and let you know.

  • Like 1
Link to comment
Share on other sites

I'll also have to read up on the overwrite: true. I hadn't come across that in my Googling, either.

Link to comment
Share on other sites

Those changes (quickto) have helped a lot. I'll have to check in with the designers to see if it's smooth "enough", though honestly with this and adding will-change (which I'd forgotten about - only used it once before), I'm uncertain if there is more that can be done. I guess I'll find out! Lol. 

  • Like 2
Link to comment
Share on other sites

Excellent. Glad to hear it's working well for you. Good luck with the designers. :)

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.