Jump to content
GreenSock

kingcrimson

make the "end" value the bottom of the container

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 



 

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?

 

image.png

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×