Split div into columns and rows and transform?

[ajhalls]

Can I use this to take apart a div that has sub content and then manipulate it in the same ways as https://greensock.com/splittextfield but not with text?

 

I am building a web slider application and would like to know if I can use Greensock to acheive these types of effects on this page between slides?

http://wowslider.com/

 

I would love to be able to not have to flatten the slide manually, but can using this http://cburgmer.github.io/rasterizeHTML.js/ and then chop the image into a bunch of individual items that can be manipulated individually like the splitText does with letters.

 

Alan

[Carl]

Hi and welcome to the GreenSock forums.

That's an interesting utility you found. I'm sure that once you use it to create tiles you could animate them, but 3D effects might be tricky unless you are using a library that handles that for you.

 

Typically the image grid effects are created by using a single image as an offset background image in many many divs like:

http://codepen.io/rhernando/pen/azNBom

 

And yes, once things are split into the grid, animating them is no problem with GSAP.

 

To be clear though, regardless of whether you use html flattened to canvas or the background image technique, GSAP does not do any of the splitting into rows and columns.

[ajhalls]

Thanks Carl, I saw something here: http://jsfiddle.net/zvdnzx0f/ that would help do the division, I am hoping once I come up with the grid of objects I can animate them. The Codepen you linked looks great as well, I will look into that as well.