Jump to content
GreenSock

rimedtades

pin instead of position:fixed.

Recommended Posts

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.

 

  • Like 1
Link to comment
Share on other sites

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 {
  height1000px;
  background#000;
  displayflex;
  justify-contentcenter;
}
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×