zIndex Boost with GSAP Observer?

[pietM]

Hey everyone, 

Is there a simple way to boost z-index of active element with GSAP Observer? 

I thought I could achieve this will class shift and function. 

Any ideas are appreciated. Thank you!

 

See the Pen XWQjWRY by evryali (@evryali) on CodePen

[Rodrigo]

Hi,

 

How about this?

let zIndex = 1000;
gsap.utils.toArray(".item").forEach((item) => {

  let observer = Observer.create({
    type: "touch,pointer",
    target: item,
    onPress(self) {
      onMove(self);
      isPressed = true;
      updateCursor();
      // Increase the z-index value and apply it to the target element
      zIndex++;
      gsap.set(item, { zIndex });
    },
    onRelease() {
      isPressed = false;
    },
    onMove,
    onDrag(self) {
      // we're dragging the item
    }
  });
});

I removed most of the code that is not needed to illustrate my point. Here is a fork of your demo:

See the Pen ExJgaBy by GreenSock (@GreenSock) on CodePen

 

Also you can use Draggable, it has z-index boosting baked right into it so you don't have to worry about that. You'll have to deal with the resizing bit but it mostly works the way I forked your demo:

See the Pen MWRjYZN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[pietM]

Thanks for taking the time, @Rodrigo!

This is very helpful and appreciated. I know about Draggable's built-in boosting, but was unclear about how to achieve this using the GSAP Observer.  This is what I needed:

 

// Increase the z-index value and apply it to the target element
      zIndex++;
      gsap.set(item, { zIndex });

 

Thank you!!