Animate a modal in/out from the click point of origin

[iammarkmulvey]

Hi. I am trying to figure out how to animate a modal from the click point of origin.  I can animate in a modal from top, bottom, left, right - no problem, but would love to figure out how to animate it in by clicking a button regardless of where the button is on the page, and regardless of the size of the browser window.

 

Here's a decent example someone created but using bootstrap.  http://jsfiddle.net/jschr/B584D/

 

Thanks in advance.

[mikel]

Hi @iammarkmulvey,

 

I'm not sure what you want exactly.
But there is a cool CodePen from @OSUblake:

 

See the Pen eNrQqV by osublake (@osublake) on CodePen.

 

Happy tweening ...

Mikel

 

 

[iammarkmulvey]

Thanks Mikel. Yes the behavior is correct in that regardless of where you click the animation transition appears to originate from where you clicked. Now how would I apply that behavior to a button transitioning into a a centered modal regardless of where the button is?  Here's an example of what I have now.

 

See the Pen pawjzd by markmulvey (@markmulvey) on CodePen.

 

[Sahil]

Something like this?

 

You can get position and dimension of element relative to viewport by using getBoundingClientRect method. A lot of your code can be reduced and simplified but I wasn't sure about exact effect you are looking for so I just made the change to button click. Also, you were using version 1.17.0 which is really old version of TweenMax, current version is 1.20.3.

 

See the Pen OQgXjp?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[iammarkmulvey]

Sahil thanks for your response and helping with any of my bad coding.   Actually its the white box not the black transparent overlay that I would like to look like its animating from the button point of origin.

[Sahil]

Ya that was trickier than I expected because you are using flexbox. So the solution is going to be little more complex. In both click events I am first updating height and width and using the new boundingClientRect to calculate the difference between positions. Feel free to ask any questions if you have doubts with the demo. Also, Power1.easeOut is default ease on all tweens so you don't need to use explicitly.

 

 

See the Pen zRzQPd?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

Update: I made some changes to the demo and wrote a function that will take two arguments, element which you wanna animate and target element to which you want to animate. Function will first change height and width to the height and width of target element, calculate the new position, reset element to original height and width and then return new position and dimensions.

[iammarkmulvey]

Absolutely brilliant!  Thank you Sahil.  You rock!

 

How would I apply this behavior to other buttons?  I tried changing tradeButton to a class rather than an ID so I could apply that class to other buttons. I must be missing something because that didn't work?  So I just duplicated the functions and created unique buttons for each one which worked but I ma sure there's a better, cleaner way. Thanks again fro your help.

 

See the Pen pawjzd by markmulvey (@markmulvey) on CodePen.

 

 

 

[Sahil]

That's pretty simple, just pass 'this' to  function as target and keep track of last clicked element. I also noticed small issue where modal would get visible despite clicking on overlay when you click too quickly. I have fixed that by killing the ongoing tweens on modal.

 

See the Pen ddzYjy?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

@GreenSock any other way to get around this behavior? Following is reduced case demo. If you fast click, at some point element will stay visible when it should be hidden.

 

See the Pen paryYR?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[GreenSock]

@Sahil Yes, if I understand correctly, that's expected behavior. If it's invisible and you click twice quickly, you set it up so that the fade in doesn't start for 0.5 seconds, but the fade out starts immediately, thus part-way through the fade out, your fade in begins and it overwrites the fade out. 

 

Just a logic issue in the code, that's all. See what I mean? 

 

You could manually kill the old/outdated tween (which it sounds like you did) or you could use fromTo(), though that could be jarring if it happens in the middle of a fade. 

[Sahil]

Ah it was too easy to figure out. I just didn't realize that I was working with two different elements and expected new tween to overwrite previous one which already completes before previous one can start. Thanks Jack.

[GreenSock]

No problem at all, @Sahil. Thanks for jumping in to help.