Posted August 10, 2018 My SVG that I'm trying to animate is large and scaling moves the elements around so I can't animate with scale. Is there another way i can achieve that pop-up smooth animation without using scale? See codepen! https://codepen.io/anetakostic/full/wxNBVZ/ Also, would like if they could faster pop up, currently i have 0.2sec.. why is it taking longer? Share this post Link to post Share on other sites
Posted August 10, 2018 Hi @nino-la Welcome to the forum. I'm not following your question completely. I don't see any scale tweens in your code. All I see are opacity tweens. Scaling an SVG element shouldn't move other elements around it. You'd need to set the transformOrigin to center, but it should work fine. I don't understand the part about 0.2 seconds. Are you wanting all those tweens to start at the same time? If you added a class to all those groups you're tweening you could shorten your code quite a bit and use a simple stagger. It would give you a lot more control. Any more details you could provide would be most helpful. Happy tweening. 1 Share this post Link to post Share on other sites
Posted August 10, 2018 @PointC Thanks for your replay! So I don't think I can use stagger cause each icon has 2 separate paths (1 to load path and another one to load circle fill -- they are also not next to each other so I can't wrap them) so wouldn't they load in different time? I have added scale. Can you have another look? You see how they are not in the bulb. Share this post Link to post Share on other sites
Posted August 10, 2018 You can use a stagger. It would be better if the icon and the background circle were each in their own group, but you can make it work like this: Is that what you needed? Happy tweening. 3 Share this post Link to post Share on other sites
Posted August 10, 2018 Yes! 🤸♀️🤸♀️🤸♀️ Thank you so much! @PointC 2 Share this post Link to post Share on other sites
