how do I make a simple pin that never lets go?

[LauraS]

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

[GreenSock]

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? 

[LauraS]

@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?

[LauraS]

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

[akapowl]

 

Hey Laura,

 

setting pinSpacing to false should do the trick there.

 

See the Pen 941b6f7940c8864660bcd4fb02a28774 by akapowl (@akapowl) on CodePen

 

[LauraS]

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.

[akapowl]

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

 

[LauraS]

Sorry, Paul! But thank you for the solution and the links!