Jump to content
Search Community

Choppy Tweening only on Safari

Kent Pilkington test
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

Yep, sorta like this: 

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

 

Better? 

 

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

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

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...