Josef

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 ?

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?

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?