Jump to content
Search Community

How can i move scroller-end position ?

szyablo test
Moderator Tag

Recommended Posts

hi i would like to move scroller-end position but i don't know how to do it.

I have tried doing this way :

 

end : "+30%" but it doesn't work , seems like it is moving the content end position 

i would like to move it to the blue line here

QRpMbhn.png

for now my scroller trigger looks like : 

  myScrollTrigger.current = gsap.to(contentRef.current, {
        scrollTrigger: {
          trigger: triggerRef.current,
          start: " +=70%",
          end: "bottom center ",
          scrub: true,
          markers:true
        },
        yoyo: true,
        repeat: 1,
        opacity: 1,
        y: 0,
      });
Link to comment
Share on other sites

Hey there! For future reference, we can usually help more effectively if you provide a minimal demo, codepen is great for this.

If you haven't used codepen before, here's a post explaining how.

What your code is currently saying is 'end when the bottom of the element hits the center of the viewport'. If you want to move the end position up higher in the viewport you could say 

end: 'bottom 20%'

This is saying - 'end when the bottom of the element hits 20% of the way down the viewport'

demo...

See the Pen 3a4e504f3715095c7191026b24a7979f by cassie-codes (@cassie-codes) on CodePen

  • Like 2
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.
×
×
  • Create New...