Pin issue with overlapping

[Uros787]

Hi everyone, i am in need of little help. Trying to achieve the same effect as this one: https://codepen.io/inf3cti0n95/pen/WwrVYo

The problem i am getting is that picture from next scene is overlapping on pin trigger with the previous one(picture bellow). Any input will be helpful, thanks.

Html:

`<div className="leftSide">
        <div className={`${styles.event} ${styles.event1} event1`}>
          <div className={`${styles.pinWrapper}`} id="pinWrapper1">
            <div className={`${styles.image}`}></div>
          </div>
        </div>
        <div className={`${styles.event} ${styles.event2} event2`}>
          <div className={`${styles.pinWrapper}`} id="pinWrapper2">
            <div className={`${styles.image}`}></div>
          </div>
        </div>
        <div className={`${styles.event} ${styles.event3} event3`}>
          <div className={`${styles.pinWrapper}`} id="pinWrapper3">
            <div className={`${styles.image}`}></div>
          </div>
        </div>
        <div className={`${styles.event} ${styles.event4} event4`}>
          <div className={`${styles.pinWrapper}`} id="pinWrapper4">
            <div className={`${styles.image}`}></div>
          </div>
        </div>
      </div>`

Javascript:

`var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
  triggerElement: ".event2",
  triggerHook: "onEnter",
  duration: "100%",
})
  .setPin("#pinWrapper1", {
    pushFollowers: false,
  })
  .addTo(controller);

new ScrollMagic.Scene({
  triggerElement: ".event2",
  triggerHook: "onEnter",
  duration: "200%",
})
  .setPin("#pinWrapper2", {
    pushFollowers: false,
  })
  .addTo(controller);

new ScrollMagic.Scene({
  triggerElement: ".event3",
  triggerHook: "onEnter",
  duration: "200%",
})
  .setPin("#pinWrapper3", {
    pushFollowers: false,
  })
  .addTo(controller);

new ScrollMagic.Scene({
  triggerElement: ".event4",
  triggerHook: "onEnter",
  duration: "100%",
})
  .setPin("#pinWrapper4", {
    pushFollowers: false,
  })
  .addTo(controller);
`

Css:

`.leftSide {
  overflow: hidden;
}
.event1 {
  background-color: #4d0e7c;
}
.event1 .image {
  top: 50%;
  background-image: url(//inf3cti0n95.github.io/img/overclock.svg);
}

.event2 {
  background-color: #900b34;
}
.event2 .image {
  background-image: url(//inf3cti0n95.github.io/img/quiz.svg);
}

.event3 {
  background-color: #8f3e0e;
}
.event3 .image {
  background-image: url(//inf3cti0n95.github.io/img/onthespot.svg);
}

.event4 {
  background-color: #148c3c;
}
.event4 .image {
  background-image: url(//inf3cti0n95.github.io/img/treasurehunt.svg);
}

.image {
  top: -50%;
  left: 50%;
  background-size: contain;
  position: absolute;
  margin-top: -375px;
  margin-left: -375px;
  height: 750px;
  width: 750px;
}
.pinWrapper {
  height: 100%;
  width: 100%;
}

.event {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.scrollmagic-pin-spacer {
  position: absolute !important;
  clip: rect(auto, auto, auto, auto);
}`