How to capture fixed elements in advance?

[sagexiang]

Please tell me how to set it according to the following code: when the top of ".section" reaches 30% of the distance from the top of the window, automatically capture the top of ".section" to the top of the window ~ Thank you!

 

const tl = soshow.timeline({
  scrollTrigger: {
    trigger: ".section",
    pin: true,
    // pinSpacing: false,
    start: "top top",
    end: "+=" + (lis.length - 1) * 100 + "%",
    scrub: true,
    snap: {
      snapTo: 1 / (lis.length - 1),
      duration: 0.2,
    },
  }
});

See the Pen yLwKeGM?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen

[mvaneijgen]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

Here I've created an extra ScrollTrigger that lists your requirements and then snaps to the that ScrollTrigger progress of 1 eg 100%, the snap value has a lot more settings, so be sure to read the docs everything you ever want to know (about ScrollTrigger) is in there! https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! 

 

See the Pen gOEeNGG?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen