The GreenSock team has released an update to their animation platform and introduced an interesting feature called smoothOrigin.

What does it mean and how it will help you with your SVG animations?

Keep reading and watching to find out.

What is smoothOrigin useful for?

Imagine a scenario where you have an SVG element that you want to scale down or rotate and then you want to change the transformOrigin to a different value.

Unfortunately, the newly defined transformOrigin would be aligned to the original element state, and the SVG element would jump to a weird position.

Here’s a short video that describes the issue and explains the smoothOrigin feature more visually:

Below is the SVG animation with smoothOrigin turned off and you’ll see that it’s quite messed up once the transformOrigin is changed when the head is turned upside down.

SVG animation without smoothOrigin

See the Pen GreenSock – smoothOrigin turned off demo by Petr TIchy (@ihatetomatoes) on CodePen.4864

Now have a look at the same animation with smoothOrigin in action and you’ll see the animation as expected.

SVG animation with smoothOrigin

See the Pen GreenSock – smoothOrigin demo by Petr TIchy (@ihatetomatoes) on CodePen.4864

The best way to learn how this feature works is to create your own demo and create some SVG animation from scratch.

Carl Schooff from GreenSock goes more into detail how this new addition to GreenSock arsenal works:

More SVG animation resources

For more useful SVG tips, CodePen demos and SVG animation resources visit the SVG Power article by GreenSock.

Conclusion

What do you think about the latest GreenSock update? Have you started playing with SVG animations? What is the most frustrating thing for you when it comes to SVG’s? Let me know in the comments.

Related SVG and GreenSock articles

• GreenSock Cheat Sheet
• Simple ScrollMagic Tutorial
• How To Animate SVG With GreenSock