Lichay Posted July 17, 2020 Share Posted July 17, 2020 when I use pin it isn't pin to entire component I wanna my pic will be in entire page when i scrolling down See the Pen oNbQbxW by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 Hey Lichay. By pin: true pins the trigger element. You can pass a target into the pin instead and pin any element that you'd like, including the body: pin: "body" I think it'd really help if you read the documentation more thoroughly and/or took @Carl's course on ScrollTrigger. The documentation can get you answers much more quickly than posting in the forums every time you have a question 1 Link to comment Share on other sites More sharing options...
Lichay Posted July 24, 2020 Author Share Posted July 24, 2020 On 7/18/2020 at 1:40 AM, ZachSaucier said: Hey Lichay. By pin: true pins the trigger element. You can pass a target into the pin instead and pin any element that you'd like, including the body: pin: "body" I think it'd really help if you read the documentation more thoroughly and/or took @Carl's course on ScrollTrigger. The documentation can get you answers much more quickly than posting in the forums every time you have a question it don't work as you see Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 9 minutes ago, Lichay said: it don't work as you see That pen works precisely as it's supposed to work. How are you expecting it to work? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 Maybe you're wanting to set pinSpacing: false? If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger. 1 Link to comment Share on other sites More sharing options...
Lichay Posted July 24, 2020 Author Share Posted July 24, 2020 1 minute ago, ZachSaucier said: That pen works precisely as it's supposed to work. How are you expecting it to work? as I said above 'I wanna my pic will be in entire page when i scrolling down' pin to all body/parallaxContainer Link to comment Share on other sites More sharing options...
Lichay Posted July 24, 2020 Author Share Posted July 24, 2020 1 minute ago, ZachSaucier said: Maybe you're wanting to set pinSpacing: false? If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger. i don't want fixed because it will be as container Link to comment Share on other sites More sharing options...
Lichay Posted July 24, 2020 Author Share Posted July 24, 2020 6 minutes ago, ZachSaucier said: Maybe you're wanting to set pinSpacing: false? If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger. it work 'pinSpacing: false' how much space it gave me? and what the diffrance between pin - 'body' to true TY Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 It's not clear what you're asking. The amount of pin spacing that's given if pinSpacing is true is equal to the amount scrolled for that ScrollTrigger. It is completely different than pin: 'body' so I can't answer that question. Link to comment Share on other sites More sharing options...
Lichay Posted July 24, 2020 Author Share Posted July 24, 2020 14 minutes ago, ZachSaucier said: It's not clear what you're asking. The amount of pin spacing that's given if pinSpacing is true is equal to the amount scrolled for that ScrollTrigger. It is completely different than pin: 'body' so I can't answer that question. it never end when i add 'pinSpacing: false' it add this space under another component or something like that all blue area (body area) need to be remove Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 25, 2020 Share Posted July 25, 2020 That is because you gave parallaxContainer a height of 3000px. 1 Link to comment Share on other sites More sharing options...
Lichay Posted July 25, 2020 Author Share Posted July 25, 2020 8 hours ago, ZachSaucier said: That is because you gave parallaxContainer a height of 3000px. yes I want it be that size for scrolling Link to comment Share on other sites More sharing options...
mikel Posted July 25, 2020 Share Posted July 25, 2020 1 hour ago, Lichay said: yes I want it be that size for scrolling I guess you mean '3000px beyond where the start is'. That means: end: "+ = 3000" gsap.to(".background", { scrollTrigger: { trigger: ".parallaxContainer", pin: true, start: "top top", end: "+=3000", markers: true, } }); 3 Link to comment Share on other sites More sharing options...
Lichay Posted August 23, 2020 Author Share Posted August 23, 2020 On 7/25/2020 at 2:55 PM, mikel said: I guess you mean '3000px beyond where the start is'. That means: end: "+ = 3000" gsap.to(".background", { scrollTrigger: { trigger: ".parallaxContainer", pin: true, start: "top top", end: "+=3000", markers: true, } }); its do the same problem and i delete it from css ``` .parallaxContainer { position: relative; /* height: 3000px; */ } ``` Link to comment Share on other sites More sharing options...
Lichay Posted August 23, 2020 Author Share Posted August 23, 2020 On 7/25/2020 at 2:55 PM, mikel said: I guess you mean '3000px beyond where the start is'. That means: end: "+ = 3000" gsap.to(".background", { scrollTrigger: { trigger: ".parallaxContainer", pin: true, start: "top top", end: "+=3000", markers: true, } }); 'new component 1' isn't show Link to comment Share on other sites More sharing options...
mikel Posted August 23, 2020 Share Posted August 23, 2020 Hey @Lichay, Try .parallaxContainer { position: relative; height:100vh; /* height: 3000px; */ } .height { position:relative; height: 100vh; background-color: pink; } if that is what you want. Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
Lichay Posted August 23, 2020 Author Share Posted August 23, 2020 7 minutes ago, mikel said: Hey @Lichay, Try .parallaxContainer { position: relative; height:100vh; /* height: 3000px; */ } .height { position:relative; height: 100vh; background-color: pink; } if that is what you want. Happy scrolling ... Mikel wow it work perfectly have a reason why I need to add it? ``` .parallaxContainer { position: relative; min-height:100vh; -> this } ``` Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now