Jump to content
Search Community

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

iammarkmulvey test
Moderator Tag

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

 

 

 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
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.
×
×
  • Create New...