bparticle

This a first attempt to make these animations work. Two buttons for two windows, but they can only be opened once and will then be erased from the DOM.

I'm back again working with this code The CodePen above is showing a beautiful modal folding open using SVG point animations. I'm integrating this code in a situation where multiple modal windows need to open and close individually, without being erased from the DOM like is happening in this code. If I understand it correctly, what's happening here is the markup for the modal is kept in memory in the modal object, and therefore the window can be reopened like it does. If there are multiple modal objects however, they will be overwritten in memory and will not be able to be reopened. Could someone take a stab at editing this code with two or three instances of these modals, or point me in the right direction on how to edit this? The part that concerns me is body.removeChild(container). It seems to be a vital part of the code, but it comlicates things when multiple objects need to be opened and closed.

I have one more question: when closing the modal in the CMS, I need to actually keep the created window in existence on the page, because the Ajax call won't work twice on the same object for performance reasons (if the content is loaded once, no need to do that again the second time). Is there a quick method to remove the points from the polygon, so they can be recreated next time the same modal is opened? Right now the second time around, these points are all mangled up.

@OSUblake @Sahil Thanks for all the help!! All works well, play AND reverse, so far no glitches. Of course the best part is that I learned quite a bit about gsap and javascript in general while tinkering with this code. Super heroes! Cheers

@OSUblake Thank you for the elaborate and enlightening answer! Seems like this is going to be a rewrite All for the better. About moving the timeline to a function, you wrote the following: I was afraid for that actually, but I didn't know the details about it, nor how to go about it differently. Could you tell me how exactly it is different in the CodePen you have shared? (Please excuse me if it's obvious) I will try this out tonight in any case, and report back. Thanks again!!

Thanks, @Sahil. I will try this approach and report back if it worked out for me. Since you mention mixing jQuery animation and gsap: is that a very bad idea? I'm doing it, because jQuery is added to the CMS by default, and it's second nature for me to use it, but in this case I have the full gsap suit loaded as well. Better to stick to gsap only? What are the disadvantages of mixing the methods?

@Sahil I managed to reproduce the behavior in a CodePen, so maybe this will help you or someone else pinpointing my problem. This code is used in a CMS for animating the opening of modal windows. There are multiple modal calls on the same page, everywhere in the website, and the behavior needs to be consistent and reliable. Right now it works pretty well, but only the opening of the window is executed, the closing window is skipped and "freezes" the svg animation like I mentioned and like you can see in the CodePen. I have moved the timeline into a dedicated function in order to be called by the different modal actions (in this case I have modified it to receive the appropriate message from the button click). When the function receives the 'playTl' message it will play the timeline, when it receives a different message it should play it in reverse.But the reverse never works.

I am integrating a piece of code that was discussed in this forum post: The code works in itself but while interacting with it, the reverse animation does not show and I noticed in the code inspector that the animated points of the SVG are somehow frozen at 0,0,0,0,0,0. The numbers also shake a little bit as if there is conflicting animation commands freezing it in a certain state. I attached a gif to illustrate this. How can I debug this effectively? No other errors are being shown in the console.

@Sahil This is great stuff. I have based my code on your demos and it's looking great! I made a new CodePen to illustrate what effect I was looking for specifically @Sahil Your latest code suggestions made it very easy to attain the appearance of a div "folding open", since it's based on percentages of the target div width and height. Very flexible and very stable. Thanks once again.

Great CodePen you cooked up, thanks!! This helps me a lot. The idea is to use this effect as a global behavior for opening modal windows on a page. So the target div is actually the modal window that will be hidden while the opening animation runs, after that the contents of the modal will be shown. So the sizes of the modal windows will vary, and that's why I need a dynamic way of using the svg's. I see you have hard coded the size of the svg to the size of the target div. Any chance this can be done programatically?

I am trying to animate the corners of a rectangle SVG from the centerpoint of a div, one by one to eventually take the exact shape of that target div. I have invested quite some time in this already before I realized that the points of an SVG can't be positioned in an absolute way, in the same way an HTML element can, or a canvas object maybe. Is this effect doable? In the attached CodePen I am just trying to get from the center of the target to the end in one go, and was planning to add the substeps later on. As you can see, it doesn't work. The rationale was to grab the center point of the target, and put the four corners in four arrays that I can pass to the SVG (topLeft, topRight, etc.). Then animate from the center point, to those four corners. The center point seems to work well, but the other points are not responding as they should. The idea is to eventually build a dynamic system with multiple clickable links that will open up these animations, like a fold-open modal window.

Hello again. I was indeed trying out that library while posting, so in the end I was able to put the codepen in the right place to ask my question. Step1 doesn't pose a problem. I'm struggling with the transition between step 4 and 5 (I actually edited my question). I'm posting the same pen with the relevant changes (please note that all these steps are hidden because the first shape changes shape according to these invisible paths or steps)

I just learned about the index tool which is a good start for this exploration. It doesn't seem to find ant points though... EDIT: I found out how to use the tool. Great, so now my (better researched) question is: how can I fix #step4 to #step5? No matter which point I chose, it folds inside out anyway. Do I have to map every single point individually? I hope now because I can't currently invest the time to do that

Looks like this Codepen is going to work Thanks for the help there So, I have a bunch of these animated characters and usually it works pretty well. Only sometimes the SVG points seem to fold and flip and turn inside out. They are supposed to be very simple animations, and I try to keep the exact same number of points and move those around, but then there is a mixup. Understandable, granted, but maybe there is a solution to my problem?

I am sorry, I tried to add a Codepen, but apparently this is the plugin overview. How can I use morphSVG in a Codepen and have a working link?