remove pin onLeaveBack

[doughnut-hole]

ScrollTrigger.create({
  trigger: ".trigger-ele",
  pin: ".pin-ele",
  start: "top top",
  end: "bottom bottom"
});

I have a simple scroll trigger & pin function like above. Normally, it pins the element as well on scroll-up a page from bottom to top.

So I want to fire pin function only on enter a section, and do not on leave back, just want it to scroll back like a normal, "position: static" element.

 

How can I achieve this? Does anyone have an idea?

[doughnut-hole]

const elementPin = ScrollTrigger.create({
  trigger: triggerEle,
  start: "top top",
  end: "bottom bottom",
  pin: pinEle,
  onLeave: () => {
    elementPin.disable(true)
  },
})

I just figured it out. just disable or kill it on leave. I'm not sure this is the best way though.

[OSUblake]

Or you can try using the once property.

 

Quote

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".