Gsap 3d slider positioning between elements

[iotron 9 Likes (Newbie)]

hello, I have made this slider with draggable. I am having difficulty positioning the slider between the sections. I have tried adding position: relative to the outer div, but it won't work. Kindly help.

See the Pen poKEgzZ by iotronlab (@iotronlab) on CodePen

[Rodrigo 5,436 Likes (Superhero)]

Hi,

 

Basically you have to set a dimension for the container since it's descendant has a position absolute set to it.

 

This seems to work:

HTML

<div class="section">section 1</div>
<div class="box">
  <div class="stage" id="stage">
    <div class="wrapper" id="wrapper">
      <div class="ring" id="ring">
        <div class="card-item"></div>
      </div>
    </div>
  </div>
</div>
<div class="section">section 2</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  width: 100%;
  height: 100vh;
  background: blue;
}

.box {
  position: relative;
  width: 100%;
  height: 100vh;
}
.stage,
.ring,
.card-item {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.stage {
  overflow: hidden;
  position: absolute;
}

.ring,
.card-item,
.wrapper {
  position: absolute;
}

.wrapper {
  perspective: 2000px;
  width: 310px;
  min-height: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Happy Tweening!