pin instead of position:fixed.

[rimedtades]

in this example, I want to use a pin instead of position:fixed.

 scrollTrigger: {
    pin: "#hero-lightpass",
    scrub: 0.5
  },

I can't Center the pictures when I do this.

 

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

[OSUblake]

48 minutes ago, rimedtades said:

in this example, I want to use a pin instead of position:fixed.

 scrollTrigger: {
    pin: "#hero-lightpass",
    scrub: 0.5
  },

I can't Center the pictures when I do this.

 

Do you have any more code to share? A minimal demo would help, but this sounds more like a CSS issue.

 

[rimedtades]

yes, it's a css topic. I wanted to get help because I couldn't. Normally it needs to be centered with this code

 

left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);

 

images do not appear when I use these codes, when I change these codes, it's not responsive.

See the Pen RwpRGxv by rimedtades (@rimedtades) on CodePen

 

it happens partially when I use flexbox, but mobile seems problematic

body {

  height: 1000px;

  background: #000;

  display: flex;

  justify-content: center;

}

[Cassie]

You don't really have to remove those lines. If you want to pin that canvas section you could wrap the canvas section in a div, set that div to position:relative  (so that you can position the canvas within it using position absolute) and then pin that section.

A lot of scrolltrigger issues I see seem to boil down to issues with styles, or HTML structure, don't underestimate putting in the time to get those bits right! Web animation is 90% setup and then a sprinkling of the magical GSAP fun stuff.

So layout-wise, as you mentioned - You could also use flexbox, but some children of a flex container without intrinsic width/height will collapse unless you've either set widths/heights or the correct flex grow/flex shrink values on them. Which is probably what's happening to you.

A canvas doesn't inherit the height of anything you paint within it, it's just a little JS box with a mush of pixels inside.

Here - tweaked positioning.

See the Pen de61f688129e58cc05378af6a65f585d by cassie-codes (@cassie-codes) on CodePen

[rimedtades]

you saved my life again.thank you