nino-la

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:

 

Is that what you needed?

 

Happy tweening.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.