How to create sticky text slider with GSAP

Question

I need to implement scrolling list animation. When a block with list enters the viewport, the first item appears from the bottom. While we scroll a little bit, element is freeze on the screen, and then it goes up. Then We scroll a little bit, there is nothing on the screen, and then the next element appears from the bottom and everything repeats.It is important that the appearance of a list element depends on the position of the scroll, and not on a time delay.

List is inside block with parallax effect. Animation looks like vertical slider.

May be you met the example of this animation? This example is looks like what I need but there is time delay, i need the same but depending on scroll: https://p.bdir.in/p/Vertical-Text-Slider-with-GSAP/10346 Steps:

Answer 1

Try something like this. Keep in mind that in your example all ul is affected by animation, and this is not best approach. All what you have to tweak are start and end values, and set proper duration.

gsap.registerPlugin(ScrollTrigger);

const texts = document.querySelectorAll('.text');

texts.forEach((text, index) => {
  gsap.fromTo(text, {
    opacity: 0,
  }, {
    opacity: 1,
    duration: 0.5,
    scrollTrigger: {
      trigger: text,
      start: 'top 80%',
      end: 'bottom 10%',
      scrub: true,
      toggleActions: 'play none none none',
    }
  });

  gsap.to(text, {
    opacity: 0,
    duration: 0.5,
    scrollTrigger: {
      trigger: text,
      start: 'top 30%',
      end: 'bottom 10%',
      scrub: true,
      toggleActions: 'none none none reverse',
    }
  });
});

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 400vh;
}

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  opacity: 0;
  font-weight: bold;
  font-size: 2rem;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  position: absolute;
  transition: opacity 1s ease;
}

<div class="text-container">
  <div class="text" alt="Text 1">Text 1</div>
</div>
<div class="text-container">
  <div class="text" alt="Text 2">Text 2</div>
</div>
<div class="text-container">
  <div class="text" alt="Text 3">Text 3</div>
</div>
<div class="text-container">
  <div class="text" alt="Text 4">Text 4</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>