Jump to content
GreenSock

code_wild

Animation: Growing out of a button

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

Hi Everyone,

 

I am brand new wto GSAP and fairly new to the whole web dev world. I am a software engineer but until recently I have been focused on backend and middle tier, recently though I have decided to follow my passion and go frontend/web dev (at least for the hobby projects!).

 

Anyway, I would like to create an animation where a div would "grow" out of a button, similar to how the applications "grow" out of the Mac dock. Any ideas on how to do this? I have fiddled around with some things and can't really find the right direction. 

 

I attached a picture of the kind of thing I am looking to replicate. I don't need a full on codepen (but wouldn't compain), just a gentle nudge or shove in the right direction would be great.

 

Thanks for the great community and I hope to contribute soon.

post-17498-0-44212200-1386256151_thumb.jpg

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

For that particular effect I have no answer, basically because of the curve you see in the element, perhaps you could achieve something like that with Canvas or SVG, but I'm not sure, perhaps another user with more experience could give an insight.

 

What I know you could do is reduce the element using scaling or width and height, similar to minimizing a window before these neat effects by Mac OS. For example windows still uses a more simple approach to the minimize effect with alpha and scale.

 

Here's a very simple codepen showing a windows' similar minimize effect:

See the Pen GDwob by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Thanks Rodrigo!

 

I figured that the curve would be difficult to achieve. I like the look in the codepen that you posted, I will give something like that a shot and see how it turns out. 

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.
×