Second image pin not working

[LauraS]

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.

[LauraS]

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.

[GreenSock]

That's just because you were feeding in a number which is interpreted as an absolute scroll number (from the very top). So I think you meant to do this: 

end: () => "+=" + (window.innerHeight * 2)

I'm using a function-based value so that it updates automatically if the viewport resizes. And the "+=" means to interpret it as relative, so that many pixels PAST where the start of that ScrollTrigger is. 

 

Happy tweening!

[LauraS]

@Jack -- thanks!