Jump to content
GreenSock

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

Using the shape of SVG button as the shape of the modal box

Recommended Posts

Is there any example pen that i can refer to make a SVG morph into a pop up using GSAP?

How to turn the shape of the modal box from the shape of the SVG button?

 

Update

I created a few more icons and hover effect using gsap.

See the Pen qBbWdmP by lemon55699 (@lemon55699) on CodePen

Link to comment
Share on other sites

Popup for me is something that have a small window in the same page without covering the whole page and the part that is not covered by the window is blurred. 

Maybe the modal box is the smaller version of it?

Link to comment
Share on other sites

https://tympanus.net/codrops/2014/12/08/inspiration-dialog-effects/ This is the closest example i can find but what i wanted to achieve is the animation of the button slowly morph into the dialog box with the same shape of the button. Let say if my button is a circle then the button then will morph into a circle dialog box. Can GSAP library make this happen? Or only javascript is required to achieve it? @KarlikyBecause i can't seems to find any GSAP related code in it.

Link to comment
Share on other sites

3 hours ago, Raymond Chong said:

Let say if my button is a circle then the button then will morph into a circle dialog box. Can GSAP library make this happen?

It's definitely possible! What do you intend on using for the background? SVG? DOM? If you want the borders to actually morph (changing how the lines are drawn other than just scaling or changing dimensions) the MorphSVGPlugin can help. If all you need is a simple scale change or something, that's quite easily doable as well.

 

It would greatly help if you included a minimal demo of your setup and attempt at doing it. The thread below has more details on how to create that:

 

  • Like 2
Link to comment
Share on other sites

@ZachSaucierThis is the sample code pen that i had created that just with the css enlarge on hover animation. What i wanted to achieve is that the svg rotates and scales at the same time when it is clicked or just a simple scaling animation will do. And can i make the the background blur other than the svg that is scaled?

See the Pen KKdOvwx by lemon55699 (@lemon55699) on CodePen

Link to comment
Share on other sites

@ZachSaucierSorry for the late reply as i am changing the codes. I had referred to your article and it helps me a lot. And i found a thread that is almost similar to what i wanted to achieve but slightly different. 

See the Pen ddzYjy by Sahil89 (@Sahil89) on CodePen

 This is the codepen by Sahil. In his code, the shape his modal box is fixed to a square. But what i wanted is the shape of my modal box follows the shape of my icon when i clicked it. Is there any way that i can achieve it? 

Link to comment
Share on other sites

6 hours ago, Raymond Chong said:

what i wanted is the shape of my modal box follows the shape of my icon when i clicked it. Is there any way that i can achieve it? 

In the case of the demo above, you can just change the shape of the modal box. What issue are you running into?

Link to comment
Share on other sites

Quote
13 hours ago, ZachSaucier said:

you can just change the shape of the modal box.


show.to(modal, 0.5, {
    x: 0,
    y: 0,
    width: 800,
    height: 400,
    autoAlpha: 1
  });

Is this the part where i can change the shape of the box? Do i need a new SVG path? Or i can just change the code above to the shape i wanted? I just can't figure out how to make it work.

 

Link to comment
Share on other sites

That's just gonna be a rectangle. If you want other shapes, you can create them in your vector software or hand code them. I'm not quite understanding the thread though. You started by talking about morphing between shapes and now it looks you just want a regular modal popup rectangle? Is that right? Or are you still trying to morph?

 

If you'd like to learn to hand code simple SVG shapes, this is an excellent guide.

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I'm sorry for the confusion. I actually wanted the modal box to be the same shape as my icon. For example in my codepen i uses hexagon as my icon and i wanted my modal box to become a hexagon when i clicked it.

 

I think i should change the title of the thread.

Link to comment
Share on other sites

So the hexagon doesn't change shape? It just scales up and becomes a modal? 

Link to comment
Share on other sites

4 hours ago, Raymond Chong said:

Yes. You are correct.

What's wrong with the approach that I outlined above? 

 

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