Creating a section before the section with fixed and the scroll will not repeat to the 1st section

[Louienator]

Hello GSAP friends, good day. is there a way to make this loop not repeating it will just up to the last section. And also make the section before the with the fixed element contain?

here's my fiddle: https://jsfiddle.net/mwzokrh0/115/

 

Cheers

[Rodrigo]

Hi,

 

I'm not completely sure about what you're trying to do here, maybe something like this:

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

 

One issue I can see in your code is this:

tl.fromTo([outerWrappers[index], innerWrappers[index]], { 
  yPercent: i => i ? -100 * dFactor : 100 * dFactor
}, { 
  yPercent: 0 
}, 0)
  .fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0)
  .from( headings, {
  // HERE
  scrollTrigger: {
    trigger: sections,
    onEnter: function() {
      gsap.set( headings, {
        y: 140
      });
    },
    onLeave: function() {
      gsap.set( headings, {
        y: 140
      });
    }
  }
});

You have a ScrollTrigger config inside a Timeline child instance, that is a logical problem as explained in our Learning Center:

https://gsap.com/resources/st-mistakes/#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Also I'm fuzzy about why you need/want a ScrollTrigger config in there since everything is being ran by the Observer Plugin.

 

Happy Tweening!