Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mathias5

z-sorting

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,

 

trying to get this z-sorting to work proper.

What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again.

 

Really like an carousel but z-wise. Any ideas?

 

fiddle: http://jsfiddle.net/EjpSu/8/

 

Link to comment
Share on other sites

Hi Mathias,

 

How this looks?:

 

http://jsfiddle.net/EjpSu/10/

 

One other thing, if this is related with the flipping cards app you're building there's a couple of extra comments:

 

1.- This may not be the perfect solution for that scenario, in that case the change of the z-index should be triggered by the drag event and once you drag another element remove the z-index from the previous one.

 

2.- Please keep your questions related to the same issue in the same post, even if the original issue is not related with the new one, is the same app so it is related if you follow the thread. This comes in handy if in the future another user comes across a similar issue, all the answers reside in the same post.

 

3.- Due to obvious reasons we tackle the issues related with GSAP, so try to keep your questions in that area, although we'd love to help all the folks with all the questions they have the day still has 24 hours, so ultimately we can't. This time your issue was very simple, so it is resolved, but if you look in the forums not every non-GSAP issue is resolved.

 

4.- It strikes me as unusual that you're using JQuery's draggable instead of Greensock's draggable class, any particular reason for that?. So you know GSAP's draggable DOES handle the z-index issue and in a very elegant and efficient way, also has callbacks and, like the rest of the engine, is very robust and easy to use, you could give it a try.

 

If this is not related, please DO IGNORE everything I wrote above :D

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

just to understand what your trying to achieve..

  • is the actual divs having their order in the DOM changed? ..
  • or is just the z-index being changed to adjust the stacking order of the div's?

but like Rodrigo said if you are using jQuery Draggable, i would opt to use GSAP Draggable which is a great utility. And has support for z-index boost:

 

zIndexBoost : Boolean - by default, for vertical/horizontal dragging, when an element is pressed/touched, it has its zIndex set to a high value (1000 by default) and that number gets incremented and applied to each new element that gets pressed/touched so that the stacking order looks correct (newly pressed objects rise to the top), but if you prefer to skip this behavior set zIndexBoost:false.

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

if you are set at using jQuery Draggable.. jQuery Draggable has a property for z-index and stack

 

http://api.jqueryui.com/draggable/#option-zIndex

http://api.jqueryui.com/draggable/#option-stack

 

also the jQuery css() method has function allows you to pass a function as the property value:

var $area = $(".area"),
    count = $area.length;

$area.css("zIndex", function (i) {
    return count - i;
});

http://api.jquery.com/css/

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Sorry for bringing this old topic up but I'm looking for the same thing.

I've got this piece of code where I simulate a parallelepiped with four divs, but when the parallelepiped rotates they overlap in the wrong way

Here is the example

http://jsfiddle.net/5341j9jg/1/

 

How can I sort my elements correctly?

thank you!

Link to comment
Share on other sites

Hi Miroku_87  :)

 

in your case you dont need z-sorting ,  i think it's better way that make a container div  and only tween that .

 

pls check this out , i just changed your code a bit :

 

http://jsfiddle.net/68ftd6zw/

Link to comment
Share on other sites

Hey Diaco!

Sorry for answering so late, but THANK YOU.

 

It works great =D

 

Just one thing: I'm trying to use relative values for the tween (fiddle updated) but it gets them as absolute. What am I doing wrong?

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.

×