Jump to content
Search Community

ScrollToPugin

tibo78 test
Moderator Tag

Recommended Posts

Hello,

 

Is the following possible with ScrollToPlugin? cannot achieve it through the docs.

 

Once it arrives to a section, it scrolls 400px one way then 800px the otherway.

 

let de = gsap.timeline({scrollTrigger: {trigger:"#section-4-10"},});
de.to("#section-4-10", {duration: 2, scrollTo: {y:-400, autoKill: true}, delay:5});
de.to("#section-4-10", {duration: 2, scrollTo: {y:800, autoKill: true}, delay:5});

 

I just replaced myDiv with my section reference.

 

Sorry for the naive question and dirty code.

 

Thank you

 

Thibaut

Link to comment
Share on other sites

To tween the content of a div, make sure you’ve set the overflow: scroll on the div and then:

//scroll to 250 pixels down from the top of the content in the div
gsap.to('#myDiv', {duration: 2, scrollTo: 250});


You can specify the container to be scrolled like so - so potentially yes?

I hope this helps.

  • Thanks 1
Link to comment
Share on other sites

Without a minimal demo, it's tough to know for sure but I wonder if you're just looking to do a relative tween:

de.to("#section-4-10", {duration: 2, scrollTo: {y:"-=400", autoKill: true}, delay:5});
de.to("#section-4-10", {duration: 2, scrollTo: {y:"+=800", autoKill: true}, delay:5});

I noticed you've got your scrollTrigger set to the default values which means when that trigger element's top hits the bottom of the viewport but perhaps you meant when the top of the element hits the top of the viewport?:

scrollTrigger: {
  trigger:"#section-4-10",
  start: "top top"
}

If you still need some help, please provide a minimal demo and we'd be glad to assist with any GSAP-specific questions. 

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