Jump to content


Animating a box to centre of a DIV and then back again

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


I have a grid of 6 boxes. I'm trying to get it so that when you click on a box it scales up and centres itself in the middle of the parent div. 


Here is what I have so far:

See the Pen yJIBn by hrk (@hrk) on CodePen


I think I can get the current position of the box using .offset()

I'm fairly new to JS and tweenMax - Can anyone point me in the right direction?


Link to comment
Share on other sites

Hi, I have managed to get this to work by setting all the DIVs as being absolute then using TweenMax.set to manually place the boxes in a grid.

Thanks anyway!

Link to comment
Share on other sites

Hi. Thanks for providing the example.


I have to admit I'm not an expert by any means on jQuery or what gets taken into consideration with its postion methods as far as borders, margins and all that stuff. 


I simplified your example even further by getting rid of some borders and margins and got it so that each box when clicked will move horizontally to the center.


I'm sure you could take the same approach along the y and then figure out how to account for the margins, padding and offset of the container element.


This is the best I can do right now:

See the Pen 74542a37108e39eadf0cffbec5e955f3 by GreenSock (@GreenSock) on CodePen


Hope it helps a bit.

Link to comment
Share on other sites



Another chance is to use outerWidth and outerHeight because with those properties you're considering padding and borders of the elements, so if for any reason they change, the function gets the new value immediately.


It would be something like this:


var cont = $("div#container"),
	contWidth = cont.outerWidth(),
	contHeight = cont.outerHeight(),
	div1 = $("div#div1"),
	div1Width = div1.outerWidth(),
	div1Height = div1.outerHeight(),
	div1CenterLeft = ( ( contWidth - div1Width )/2 ),
	div1CenterTop = ( ( contHeight - div1Height )/2 ),
	elemClick = false,
	tn1 = new TweenMax.to(div1, 1, {left:div1CenterLeft, top:div1CenterTop, scale:1.4, paused:true, boxShadow: '0px 5px 5px rgb(0,0,0)'});

Here you can see it in action:




Hope this helps,



  • Like 2
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.