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
Now have a look at the same animation with smoothOrigin in action and you’ll see the animation as expected.
SVG animation with smoothOrigin
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.
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
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.