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

Yes. You are correct.

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

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.

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

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.

 

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

@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? 

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

@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

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

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.

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

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?

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

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

[Rotating SVG with Tween]

Hi, first of all thank you very much for helping me out.

1. Actually i tried using other library as i had never experience of using external library. I was actually using Tweenlite before using anime.js.
2. Because i thought i need to have the same ID for those elements to rotate all together.
3.  & 4.  Never thought about that and i thought i was using gsap wrongly.

But still you did exactly what i wanted. And sure that helps. Thank you very much.

I did this is because I just wanted to try out more and learn new stuff other than html, css and javascript that was thought in class.😉

 

 

[Rotating SVG with Tween]

Hi all,

 

I've made a SVG image and i wanted to rotate the outer circles to the square box whenever i clicked a particular color. For example, if i clicked on the red circle the wheel will rotate so that the red circle will be in the square box. I tried using this code but when i click on my circles the wheel is not moving at all. 

document.getElementById("wheel").addEventListener('click',function(){
		TweenLite.to("#Layer_1", 0.5, {rotation:"40"})
    })

I tried referring to but still had no idea how to apply it to my project.

 What should i do to make my project works?

This is my first time using GSAP 😉.

Thanks in advance.

 

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