Jump to content
Search Community

How to create pop-up animation without scale?

nino-la test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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! 
Also, would like if they could faster pop up, currently i have 0.2sec.. why is it taking longer?

See the Pen wxNBVZ by anetakostic (@anetakostic) on CodePen

Link to comment
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
Link to comment
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. 

Link to comment
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.
×
×
  • Create New...