Jump to content
Search Community

TweenMax.to() – Shaky in Safari and Chrome

Josef test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am animating letterforms of a font with wide and condensed shapes, i.e. interpolating between the letterform’s widest and most condensed states with TweenMax.to().

The SVG-Vectors animate smoothly in Firefox, however in Safari and Chrome the movement looks very shaky.

 

Am I doing it wrong? And more importantly, are there ways to prevent this?

See the Pen zMwMXj by oolong32 (@oolong32) on CodePen

Link to comment
Share on other sites

Hello @Josef and welcome to the GreenSock Forum!

 

Sorry your having this shaky issue.

 

I was also seeing a slight jitter shaking of letters, but in Firefox and Chrome on Windows 10.

 

To better help you troubleshoot this:

  • Can you please verify what OS and OS version you are seeing this on?
  • What Chrome version is this?

I believe this is caused by the animating of the width attribute. You can see how it is less or not shaky when you comment out that tweens that animate the width attribute. Maybe you can animate scale instead of the width attribute?

 

But we are still looking into this so i can test on an Apple device so i can see exactly what you are seeing.

 

Thank you while we look into this for you :)

  • Like 4
Link to comment
Share on other sites

Hello @Jonathan, thanks for getting back at me so quickly and many apologies for thoughtlessly manipulating the codepen example. I’ve restored it in order to show the original problem.

 

The OS is macOS High Sierra 10.13.6

Chrome: Version 70.0.3538.102

Safari: 11.1.2 (also on iOS Safari, recently updated, so probably newest)

 

Best Result in Firefox (Nightly, 65.0a1)

 

You are right, when I animate the scale instead of the width, the animation runs smoothly. However, other problems arise, i.e. the vectors get distorted (but not how they should) and/or overlap.

 

The original idea was to get a couple of SVG-Shapes to stretch and contract horizontally, in such a way that they push and pull on each other without ever overlapping. In order to do this it is (I think) neccessary to a) interpolate between a contracted and an expanded set of coordinates for every Vector b) change the width of the SVG’s viewBox and of the SVG itself.

 

Is there a way of achieving this without animating the width attribute?

Link to comment
Share on other sites

On 11/15/2018 at 8:01 PM, GreenSock said:

I didn't notice any shaking. Hm. 

 

Oh, and I'd definitely recommend using scaleX:2 rather than attr:{transform: "scaleX(2)"}. Much faster. 

 

Thank you @GreenSock for pointing this out. There wasn’t any shaking anymore, because my brains malfunctioned and I changed the original pen after @Jonathan’s first answer ?

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