Section pinning not working

[Policsek]

Hello,

 

I'm trying to achieve sections pinning animation, exactly like here https://futuregreensteps.com/?ref=lapaninja 

Please notive that every section will have a different height, I don't know if that matters.

 

Thank you!

See the Pen MWXgjpP by bogdan-florin (@bogdan-florin) on CodePen

[Rodrigo]

Hi,

 

In your codepen example ScrollTrigger is working as expected. Perhaps you could use scrub in order to play back the animations when the user scrolls back up.

 

Is worth mentioning that the CSS setup in the example you posted is quite unique, since the developer is moving the entire content. If you inspect that with devtools you'll find a div with a content class that contains all the elements. That particular container is being translated and then each section is being pinned and scaled down when the bottom reaches the bottom but also there is no pin space being applied.

 

Also I can swear that the site you set as an example is using the ScrollSmoother Plugin, the DOM structure, some of the styles being applied and the way the content animation happens have all the tells of a ScrollSmoother setup. The plugin is a Club GreenSock benefit.

 

This seems to work a bit closer to that site:

gsap.utils.toArray(".section").forEach((section, i) => {
  gsap.to(section, {
    scale: .9,
    scrollTrigger: {
      trigger: section,
      start: "bottom bottom",
      scrub: 1,
      pin: true,
      pinSpacing: false,
    },
  });
});

You can check this example for inspiration, is not exactly the same approach but the effect is also nice:

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

 

Finally there is an entire section of very nice examples using ScrollTrigger here:

https://greensock.com/st-demos/

 

Let us know if you have more questions.

 

Happy Tweening!