LauraS Posted April 22, 2021 Share Posted April 22, 2021 I want to pin something on my screen when the website first comes up and just have that pin stay in place forever, but the next elements will scroll over it. I'm completely new to ScrollTrigger -- was using ScrollMagic before -- so I'm a real newbie here. Here's what I have (below). I want #head1 to be pinned about 1/4 of the way down the screen and just stay there. What happens is, when I come to the website, #head1 is about a 1/4 of the way down the screen. When I scroll, #head1 jumps about 200px down and is unpinned. What am I doing wrong? (I have attached a codepen, but also being new to codepen, I don't know why my codepen isn't working.) html: <div class="screen" > <img class="" id="tower" src="img/tower.jpg"> <div class="head1" id="head1">head1</div> </div> css: .screen { position: relative; width: 100%; height: 100vh; margin-top: -2px; clear: both; } #tower { width: 100%; position: absolute; left: 0; top: 0; height: auto; } .head1 { color: white; font-family: 'Roboto', sans-serif; font-size: 6rem; font-weight: 600; text-align: center; } jquery: gsap.registerPlugin(ScrollTrigger); $(document).ready(function() { ScrollTrigger.create({ trigger: "#head1", start: "top 200px", pin: true }); }); See the Pen BapvaOp?editors=1111 by lschneiderman (@lschneiderman) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 22, 2021 Share Posted April 22, 2021 3 hours ago, LauraS said: I want to pin something on my screen when the website first comes up and just have that pin stay in place forever I'm curious - is there a reason you don't want to just use CSS position: fixed to pin it there? Why use any JS at all? 3 hours ago, LauraS said: I'm completely new to ScrollTrigger -- was using ScrollMagic before Don't feel bad - a lot of people have been in a similar position. Once you get your bearings, you're gonna love ScrollTrigger...trust me. 3 hours ago, LauraS said: I want #head1 to be pinned about 1/4 of the way down the screen and just stay there. Then you'd want to change your "start" value: // OLD start: "top 200px", // NEW start: "top 25%", That means "when the top of the trigger element hits 25% down from the top of the screen". 3 hours ago, LauraS said: When I scroll, #head1 jumps about 200px down and is unpinned. What am I doing wrong? I'm not seeing that. It looks like your CodePen had some funky space characters in the CSS which was breaking things (I've never seen that before). Here's one I copied for you with some tweaks: See the Pen 63ac27fb4bee99c5ee48f82063d138f8?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
LauraS Posted April 23, 2021 Author Share Posted April 23, 2021 @Jack, yes, perfect! Thank you! I didn't know "max" was a value I could use for the end. Is there a spot that lists all the possible values for start/end please? Link to comment Share on other sites More sharing options...
LauraS Posted April 23, 2021 Author Share Posted April 23, 2021 But...if I add another header, #head2, to this codepen and try to pin it in a similar manner, #head2 doesn't show up anywhere: See the Pen BapvaOp by lschneiderman (@lschneiderman) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 23, 2021 Share Posted April 23, 2021 Hey Laura, setting pinSpacing to false should do the trick there. See the Pen 941b6f7940c8864660bcd4fb02a28774 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
LauraS Posted April 23, 2021 Author Share Posted April 23, 2021 That's great!! Thank you, Jack! Is there a spot that specifies all the values that to/from can have and explains pinSpacing, etc.? The documentation I saw seemed not to give all possible values, but I could have missed something. Link to comment Share on other sites More sharing options...
akapowl Posted April 23, 2021 Share Posted April 23, 2021 19 minutes ago, LauraS said: That's great!! Thank you, Jack! 😅 Ha, yeah, I wish I could do the things he does. 14 minutes ago, LauraS said: Is there a spot that specifies all the values that to/from can have and explains pinSpacing, etc.? 🤔 Maybe you're looking for something like Usage & special properties in the docs? That section lists all the properties for ScrollTrigger. If you're looking for things related to .to() / .from() / .fromTo() tweens you can search for those in the lefthand panel in the docs. Or you take a look at the getting started article that contains links to all those sections of the docs in its respective sections. Cheers, Paul 2 Link to comment Share on other sites More sharing options...
LauraS Posted April 23, 2021 Author Share Posted April 23, 2021 Sorry, Paul! But thank you for the solution and the links! 1 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