Jump to content
Search Community

Greensock.js Version of Metafizzy Isotope.js (Masonry)

chrisalexander55 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

First off, let me say that I love working with GSAP. It is intuitive, has excellent documentation and has allowed me to be productive from day #1. I hope to be joining you in Brooklyn, NY for training. On to my question...

 

Is there an equivalent Greensock implementation or plugin that has similar behaviors to Metafizzy's Isotope.js (Masonry layout). Specifically, I have implemented a series of card and card promotion animations in isolation. I am now at the point of merging these into a single prototype. I am working behind a colleague who put together a separate prototype using Isotope that supports card shuffling even with cards "growing" to different states. I am unifying both internal efforts. Before I engage on GSAPifying Isotope, I would like to know if there is an existing or similar implementation that I can leverage.

 

Thanks in advance for your time!

 

Chris

Link to comment
Share on other sites

Very happy to hear you're enjoying GSAP and the docs allowed you to be productive from day 1. Means a lot. 

 

As for GSAP-ifying Isotope, we don't have a particular tool that does that automatically for you, but from what I gather it should be as simple as recording the offsetTop and offsetLeft for each element first, then reflow them immediately and figure out the difference between their new offsetTop/Left and their old one, and do a simple fromTo() x/y tween for the state transition (and of course fade in/out the new/exiting ones). Sound about right? 

 

Of course you can do some more fun stuff during the transition if you want (like a little spin, scale up/down as if they're lifting off the screen a bit and landing back down, etc.) Don't go too crazy ;)

 

OSUblake in the forums here may have some additional insight - he has done some nifty stuff like this, including making them draggable. 

 

We'd love to see what you come up with. 

  • Like 3
Link to comment
Share on other sites

Thanks Jack! I was able to search and discover prior threads by OSUblake that discuss draggable grid tiles. Excellent conversation and CodePens (

See the Pen RNLdpz by osublake (@osublake) on CodePen

). However, this solution only supports tiles of the same height with varying width (mentioned in code comment). My prototype use case needs to support "active" tiles that are 2X larger than "inactive" tiles, allowing the "inactive" tiles to shuffle and stack up to 2 tiles high adjacent to an "active" tile. Still reviewing the code. Nevertheless, if this is something discussed in the forums or common knowledge, please point me in the appropriate direction. 

Link to comment
Share on other sites

I'm very interested in more GSAP code or other info on this topic as well. I'd like to display a mixed set of photo's in portrait as well as in landscape format. The display should be responsive and 'isotopic' with a minimal amount of gaps in the rows. So it must intelligently (re)order the inputted sequense.

Something like this: http://isotope.metafizzy.co/layout-modes/packery.html

The Isotope packery mode uses this code: https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.js

Wow, what a bunch! Too much and too difficult for me to dive in...

Link to comment
Share on other sites

Hi chrisalexander55

 

My sortable demo uses a very simple layout engine, but it could easily be modified to handle what you are trying to do. Of course this all depends on your JavaScript skills. I've come up with an algorithm to handle this in my head, but have yet to put it into code. Sorry, my to-do list is a little backed up at the moment, so I don't have a solid solution for you  :-(

 

The hardest part of sorting elements with different widths and heights is how to deal with filling holes (voids, empty space, whatever you want to call it). If you use mutli-dimensional arrays, it's easy to find and fill holes, but that might come with a speed penalty because manipulating arrays can be slow.

 

Isotope does an excellent job of sorting, but it also uses a complicated bin packing algorithm to achieve this. The code that @violacase links to is only a fraction of the code involved with Packery. You will probably have a hard time getting GSAP to play nicely with it because of how many moving parts are involved with getting Isotope to work. I think you can achieve the same results with a much smaller footprint by using GSAP and a little bit of custom code.

 

jQuery Nested does a good job of sorting, and I don't think it would be too hard to adapt its layout engine to work with my demo.

Demo: http://suprb.com/apps/nested/

Source: https://github.com/suprb/Nested

 

jQuery Gridly is another library that might be pretty easy to port over to work with GSAP, although it doesn't handle filling holes as well as jQuery Nested.

Demo: http://ksylvest.github.io/jquery-gridly/

Source: https://github.com/ksylvest/jquery-gridly

 

If filling holes isn't an issue, the grid list used in the Angular Material library would be very easy to adapt. 

Demo: https://material.angularjs.org/#/demo/material.components.gridList

Source: https://github.com/angular/material/blob/master/src/components/gridList/gridList.js (starts at around line 573)

 

If you need help understanding any of my code, just let me know, and I can walk you through it.

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