make the "end" value the bottom of the container

[kingcrimson 1 Likes (Newbie)]

how can I make the end value the bottom of the container?

 

The default value seems to be 100vh, which is great, but the container is sized at 300vh.

 

The main thing I want is for an image, to scroll down with the user all the way to the bottom of the container.

[PointC 14,102 Likes (Superhero)]

You can set the end to anything you want. If I'm understanding your desired result correctly, you'd use something like:

end: "bottom bottom"

If that isn't what you meant, could you please provide a minimal demo? Thanks.

[Cassie 4,833 Likes (Superhero)]

Heya!

 

From the ScrollTrigger docs about 'END' -
 

String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example, "bottom center" means "when the bottom of the endTrigger hits the center of the scroller". "center 100px" means "when the center of the endTrigger hits 100px down from the top of the scroller" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is". "max" is a special keyword indicating the maximum scroll position. Number - An exact scroll value, so 200 would trigger when the viewport/scroller scrolls by exactly 200 pixels.

A lot of docs aren't very friendly but we do try to make ours accessible!

 

Does this answer your question? If not could you post a minimal demo? Thanks 



 

[kingcrimson 1 Likes (Newbie)]

Here's a video showing the issue.

 

The grey container is the one I want to pin something to scroll in, and I want the image residing within it to hit the bottom of the container - that's all.

 

But whenever I try "end end", it completely messes the spacing up

 

Again, I'm not sure WHICH container should be the long one.

    gsap.registerPlugin(ScrollTrigger)



    let timeline = gsap.timeline({paused:true})
		.to(".scroll-container #analytics-one", {opacity:1,})

    ScrollTrigger.create({
      animation: timeline,
      trigger: '.scroll-container',
      scrub: true,
      pin: true, 
      markers: true,
    })

 

I have also given the "scroll Container", some length, to allow it to be long enough to scroll

 

  .scroll-container {
    height: 105vh;
  }

 

[PointC 14,102 Likes (Superhero)]

Could you put that into a minimal demo for us? 

[kingcrimson 1 Likes (Newbie)]

Thanks

 

I managed to put it into a simple enough pen

 

See the Pen YzeKRwL by kingcrimson69 (@kingcrimson69) on CodePen

[OSUblake 18,453 Likes (Superhero)]

Hi kingcrimson,

 

I'm not exactly sure what mean by hitting the bottom. Are you trying to get the bottom of img to unpin when it hits this red line?