Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to create pop-up animation without scale?

Recommended Posts

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

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.



  • Like 1

Share this post

Link to post
Share on other sites

@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

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:


See the Pen RBvWKP by PointC (@PointC) on CodePen

Is that what you needed?


Happy tweening.



  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.