Jump to content
GreenSock

fagan

Treemap like 3x3 grid using GSAP

Recommended Posts

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! 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

Diaco,

 

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

 

Carl

  • Like 1
Link to comment
Share on other sites

Great sample man!!!

 

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

  • Like 3
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.
×