perspective(1000px) = perspective: 1000Īpplies perspective to the children of the element it is applied to:.But your div has know children so it wont apply perspective properly. Whereas you changed it to using the set() method to use standalone perspective() CSS property, which only applies to the children of div only. That will allow your element to be outside the flow of document, and is required to animate properly so it doesn't effect the elements around itĪlso keep in mind that i used transform: perspective(1000px) since that will apply to the element itself. position: relative or even better position: absolute. that anytime you animate an element the it should always have the CSS property. Are you seeing this on Chrome Windows 10 or 7.81) and no longer saw jitter when viewing my codepen. I tested on Windows 10 and Windows 7 on latest Chrome (. See the Pen aWNvVL by jonathan ( on CodePen Try this with the changes i advised above Rotation: 0.01 /* add to force matrix3d() */ webkit-transform: perspective(1000px) /* add to fix webkit bug jitter */Īnd also add a slight rotation to your tween so it forces GSAP to animate using matrix3d() instead of matrix() or translate3d(), for better performance: webkit-backface-visibility: hidden /* add to fix webkit bug jitter */ Or you can add the following CSS properties to your CSS div rule like i discussed in that same topic link above: You can either opt for using a tag instead that is not affected by this webkit bug, but that might not be feasible in your project. Webkit has a bug were if you animate above a scale factor of 1, in your case 1.1 you will start to see jank (lost frames) and jitter (shake rattle and roll) Its discussed in this topic Chrome 49 - Janky GSAP: The issue you describe is a webkit bug that affects scale and along with the CSS property background-image Hello RolandSoos and welcome to the GreenSock Forum!

Animated google chrome backgrounds