Jump to content
GreenSock

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

Scaling in Place & moving waves/zigzag like waves/zigzag

Go to solution Solved by OSUblake,

Recommended Posts

I am trying to make the circles Scale in place , as well as diamonds and the splaches but i don't quite get why does it come from the center and not in place. 

And i am also wondering how can i make the waves and zigzags move like the ones attached in the video.

 

One last question as a beginner in the GSAP world where do u guys recommend i start ? 

whatiwant.gif

See the Pen oNwozOE by sandysameh (@sandysameh) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Sandy!

 

You're animating <g> elements, so you're scaling a container. You need to get more granular and target the shapes. And I would set the transform origin ahead of time.

 

For example, your circles could be like this.

 

gsap.set("#circles circle", {
  transformOrigin: "50% 50%"
});

...

.from("#circles circle",{opacity:0,scale:0,duration:2})

 

But it would probably better to just give your circles the same class name to make target easier.

<g>
	<circle class="circles st6" cx="775.79" cy="197.35" r="5.81"/>
	<circle class="circles st6" cx="370.82" cy="55.65" r="5.81"/>
	<circle class="circles st7" cx="595.77" cy="70.42" r="5.81"/>
</g>

 

The zigzag could be done with the DrawSVGPlugin, or maybe by animating a clipPath.

 

For beginners, I would recommend checking out @PointC's MotionTricks and @Carl's CreativeCodingClub.

 

  • Like 6
  • Thanks 2
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.

×