[Scrubbing through timeline not working on website but does work on codepen]

I believe the problem is that I didn't set the height of the .screen element to "auto".

[Scrubbing through timeline not working on website but does work on codepen]

I have a series of animations that I put in a timeline. I then use ScrollTrigger to "stick" my interaction near the top of the screen and run through the animations using scrub. This works perfectly on codepen, but on my webpage, the animation stops working when the scroll reaches the end of the webpage. I just want the timeline to play to the end, but have it synched up with scroll. Should I be doing something differently please?

See the Pen QWoKYEa by lschneiderman (@lschneiderman) on CodePen

[Second image pin not working]

@Jack -- thanks!

[Second image pin not working]

I found out the reason -- I was pinning using a variable "height" to represent the height of the screen for the end property. Somehow, that didn't work. When I used

Quote

end: "+=600" 

...that worked.

[Second image pin not working]

I set up two pins that work fine. One pins a container that holds an image, the other pins a container that holds some text. But lower down, I have a second image container. I used the same code to pin it, and yet it doesn't pin. What am I doing wrong, please?

See the Pen OJBJZmm by lschneiderman (@lschneiderman) on CodePen

[Play video when user first begins to scroll on page]

This would seem to be a simple issue, but I'm having trouble getting an exact answer. Also, I'm a newbie at ScrollTrigger.

 

When the user comes to my page, I have a video at the top. When the user first begins to scroll, I want that action to trigger the video to play.

 

Can anyone help with this please?

See the Pen vYxNKRb?editors=1111 by lschneiderman (@lschneiderman) on CodePen

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

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

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

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.

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

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

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

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

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

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