LauraS

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

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?

@Jack -- thanks!

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 ...that worked.

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?

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?

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

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.

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: https://codepen.io/lschneiderman/pen/BapvaOp

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

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 }); });