Scroll trigger - Change content when scrolling on pinned element

[_elizabeth]

Hello everyone, I'm very new to gsap and I am trying to achieve a similar effect to this codepen: https://codepen.io/GreenSock/pen/XWzRraJ. However, I don't want the contents to repeat. I just want to scroll to the next element. Following the example in the code pen I added above, the content is pinning and changing on scroll, but it keeps repeating. I know there's something I'm missing; I don't know how to go about it. Also, the elements are not updated in the correct order. Any help will be appreciated

 

See the Pen LYXwQzy by leezee (@leezee) on CodePen

[Rodrigo]

Hi @_elizabeth and welcome to the GreenSock forums!

 

Is not the same setup to mix Observer and ScrollTrigger. The example you linked from the GreenSock collection uses only Observer.

 

This example seems to do what you're trying to achieve:

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

 

Hopefully this helps.

Happy Tweening!

[_elizabeth]

Hi, @Rodrigo Thank you for your help! I'm trying to animate content without a background, but the text is stacked on top of each other. I want the previous content to disappear when I scroll to the next section, so the contents are readable. Here's my current update.

[Toso]

if you want to make your demo work with minimal effort, just create a timeline with keyframes  and  hook them to scrolltrigger it won't be the same result as the demo since its created with observer but you can have really cool transitions with keyframes 

[_elizabeth]

Thank you for the suggestion @Toso that actually works better for me