Jump to content
Search Community

image spliting

Fahim test
Moderator Tag

Go to solution Solved by Fahim,

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

Hi and welcome to the GreenSock forums.


This particularly is not exactly a GSAP related question, more of a JS-CSS issue, but this subject has a special meaning for me (more on that later).


Basically this can be solved by creating a loop, add a bunch of DOM elements and set the background position according to the element's position in the grid. This can get a little messy though, because of the amount of DOM elements involved in your case (200), but you can take advantage of the performance enhancements introduced since version 1.12:




Here's a simple example I made some time ago, is not 200 pieces but the concept is the same, regardless of the number:


See the Pen euAvI by rhernando (@rhernando) on CodePen


Regarding the meaning this has for me. Turns out that my first ever post in this forums (back in the good ol' flash days) was about a grid animation and the first incredible support I got from a certain Carl Schooff, was in that post as well. Once the JS part of GSAP was released one of the first things I did was port that into JS. If anyone want's to go to the past here's the link for the original post:





  • Like 4
Link to comment
Share on other sites

I thought it was a pretty cool example... but if you're having trouble recreating the effects you want based off of Rodrigo's advice, I'd recommend that you consider just picking up that layerslider plugin. It uses GreenSock to power all of its fancy animations anyway =D, seems to be well supported, and would surely be less expensive than the time it would take to implement and maintain it by yourself.


Unfortunately creating a slider with advanced effects like that isn't trivial, and cloning these effects for you is a bit beyond the support we usually provide. If you would like some feedback/assistance with what you've built so far then we'd be glad to take a look.


Here's a few card flipping examples that may also be of help:

See the Pen JtljL by chrisgannon (@chrisgannon) on CodePen

See the Pen IJfAy by rhernando (@rhernando) on CodePen

See the Pen vGEDm by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to comment
Share on other sites

Might be worth mentioning here... JQuery UI has an "explode" effect like this:




Personally, I don't really like how it is implemented because it always gave me problems and wasn't very flexible. It's probably better to just write your own function in a loop like Rodrigo describes. I always thought it was a cool effect for my personal game project because I could make it look like a monster exploded. It's not an effect you see around the web often.

Link to comment
Share on other sites

Great examples Rodrigo and Jamie!




Thanks for sharing about your first-post experience. 

When I went back to read it with that massive block of code you posted  I was thinking... "wow, I actually helped this guy?" ;)


Out of my 4500 posts here, I can honestly say that taking the extra few minutes to help you was the best decision I made. So glad you stuck around. You've returned the help 1000 times over and have become a good friend.


I still look back on my first post as a bit of a turning-point too: http://forums.greensock.com/topic/3172-some-new-tweenmax-tutorials-hopefully-they-help-you/?hl=tutorial as it led to many great things. The only downside is that to this day Jack still demands that I refer to him as Exalted GreenSock*. 





* kidding about that last part

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...
  • Solution

I have written it. Yes its a JS and css thing and nothing to do with GSAP.


See the Pen oseBG by osricmacon (@osricmacon) on CodePen




see the above code pen if anyone is still interested.


I have updated the code pen and its more awesome with background-position getting calculated in %. The splitting is also responsive.

Now it can be used for animation

Edited by Fahim
  • Like 1
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...