Treemap like 3x3 grid using GSAP

[fagan]

Hi guys 

 

 

I have a basic 3x3 grid with a simple 3d hover effect using GSAP

 

http://steaklab.com.au/ctm/seven-wonders/

 

PROBLEM:

 

I want to click a box and have it transition to full screen from where it is.. that is to say, the corners of a specific box clicked on animate to the browser window and proportionally shrink the other divs in the process. 

 

I'm wondering if this is possible with GSAP. ??

 

This is link of like a treemap see here

 

http://bost.ocks.org/mike/treemap/

 

Any advise would be very welcome! 

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the link to the treemap page. Interesting stuff. 

 

Yes, that animation is absolutely possible with GSAP. Very easy in fact to animate the width and height of something (or perhaps the scale).

The GSAP part of what you need to do might be just 1 or 2 lines of code. 

 

However figuring out the best way to set up your grid and detect the coordinates that you need to move things to and how wide / tall you need to stretch certain things (while perhaps shrinking others) can be quite a bit of work. Frankly, it would probably take me an hour or two of experimenting to even come close to suggesting how you should approach it.  We have to keep focused  on helping people understand the core GSAP API functionality.

 

However, it doesn't hurt to ask and it might be interesting to hear the suggestions. Perhaps one of our community experts has some ideas to share. 

[fagan]

Thanks for your reply. During my revision process I came across exactly what I needed.

 

http://www.philippadrian.com/project/jquery-slides/

 

specifically, http://www.philippadrian.com/jquery-slides-grid-example/

 

This doesn't use greensock, but it may help someone out in the future. Cheers. 

[Diaco]

Hi fagan 

 

Anyway if you want to do that with GSAP ; that's so easy , maybe this can give you a clue :

 

See the Pen jEmpoJ by MAW (@MAW) on CodePen

[Carl]

Diaco,

 

I think that is the simplest (or least amount of) accordion code I have ever seen in ActionScript or JavaScript. Very cool.

 

Carl

[Rodrigo]

Great sample man!!!

 

Just like Carl said, is just sick how little code you used, excellent job!!