Multiple Scrolltrigger items on one page

[the_gmo]

I'm trying to achieve an effect where a container stops in the center of the screen until all its content has scrolled through. As long as there is only one such element on a page it works great. However, I will need several of those elements on the same page and can't figure out how to do it.

Any pointers what I need to change to enable this effect for multiple elements would be greatly appreciated.
 

var autoscroll = gsap.utils.toArray(".autoscrollContainer");
    
autoscroll.forEach(panel => {

    var ratio = panel.querySelector(".ratio");
    var ratioHeight = ratio.offsetHeight;

    var image = panel.querySelector(".scroll-image");
    var imageHeight = image.offsetHeight;

    var difference = imageHeight - ratioHeight;
    var distance = (difference / imageHeight) * -100;

    var tl = gsap.timeline({
    	scrollTrigger: {
        	trigger: autoscroll,
            start: "center center",
            end: "+=3500",
            scrub: true,
            snap: 0,
            pin: true,
            //markers: true
        }
    });
  
    tl.to(image, {
    	yPercent: distance,
    });
});

 

See the Pen yLEBVzy by the_gmo (@the_gmo) on CodePen

[Rodrigo]

Hi,

 

The issue is that you are setting the array of elements as the trigger for each ScrollTrigger instance:

var autoscroll = gsap.utils.toArray(".autoscrollContainer"); // <- Array
    
autoscroll.forEach(panel => {
  var tl = gsap.timeline({
    scrollTrigger: {
      trigger: autoscroll, // <- SAME ARRAY
      start: "center center",
      end: "+=3500",
      scrub: true,
      snap: 0,
      pin: true,
      //markers: true
    }
  });
});

The trigger element can't be, for obvious logical reasons, more than one element. This seems to work the way you expect:

var autoscroll = gsap.utils.toArray(".autoscrollContainer");
    
autoscroll.forEach(panel => {

  var ratio = panel.querySelector(".ratio");
  var ratioHeight = ratio.offsetHeight;

  var image = panel.querySelector(".scroll-image");
  var imageHeight = image.offsetHeight;

  var difference = imageHeight - ratioHeight;
  var distance = (difference / imageHeight) * -100;

  var tl = gsap.timeline({
    scrollTrigger: {
      trigger: panel,
      start: "center center",
      end: "+=3500",
      scrub: true,
      snap: 0,
      pin: true,
      markers: true,
    }
  });

  tl.to(image, {
    yPercent: distance,
  });

});

Let us know if you have more questions.

 

Happy Tweening!

[the_gmo]

That's it thanks!
Thought I tried this, but must've been in a previous setup. Works perfectly now.