Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Combustion

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

Recommended Posts

Hi, 

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?

Thanks
Neil

Link to post
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 post
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 post
Share on other sites

Hi,

 

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:

 

http://jsfiddle.net/rhernando/v85Zp/

 

Hope this helps,

Cheers,

Rodrigo.

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

×