ScrollTrigger: Pin Background only

[Henning Tillmann]

Hi there,

 

I am quite new to GSAP but I think I managed to create some nice animations and I am almost "there". The only thing that doesn't work for me is to set pins correctly using ScrollTrigger. I have created a demo here:

 

 

What you see:

An SVG animation pinned in the container that has min-height: screen. I know that there is no scrolling as soon as the pin is active, so other the other sections (2b, 2c) are only visible after the animation is completed. What I'd like to achieve is that the animation plays in the background (three timelines) and the sections 2a, 2b, 2c are on top of them. If I just pin the SVG, then the scrolling doesn't match anymore.

 

It's probably just a minor thing but I wasn't able to find a solution.

 

Thank you in advance!

 

Best,

Henning

 

PS: I have read the forum guidelines but the "conmon GSAP mistakes" and "common ScrollTrigger mistakes" links trigger a 404.

See the Pen wBvZGOm by henningtillmann (@henningtillmann) on CodePen.

[mvaneijgen]

Hi @Henning Tillmann welcome to the forum and thanks for being a club member 🎉

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

 

 

Hope it helps and happy tweening! 

  
 

[Rodrigo]

Hi,

 

The main issue with pinning the SVG element is that you're using a translate for centering it horizontally. Pinning uses position fixed and the transform applied creates a new stacking context, which is why position: fixed doesn't work as expected, as mentioned in this article:

https://www-joshwcomeau-com.translate.goog/css/stacking-contexts/

 

Removing this class solves the issue: -translate-x-1/2, of course this means you'll have to find another way to center the SVG horizontally, maybe try margin: 0 auto or Flex/Grid for that. For that you can use this config:

ScrollTrigger.create({
  trigger: '#icon__transformation',
  pin: true,
  pinSpacing: false,
  markers: {
    startColor: '#ffffff',
    endColor: '#ffffff'
  },
  snap: 1/3,
});

 

Another option is to use pinType: transform:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinType

 

Hopefully this helps

Happy Tweening!

[Henning Tillmann]

Thanks, @Rodrigo & @mvaneijgen!

 

I used a combination of both answers, stacked everything with a grid and made some minor modications. Now it's the way I wanted it to be:

 

See the Pen KwKLgMp by henningtillmann (@henningtillmann) on CodePen.