tibo78 Posted September 26, 2021 Share Posted September 26, 2021 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 More sharing options...
Cassie Posted September 26, 2021 Share Posted September 26, 2021 Hi Thibaut, Could you put together a minimal demo on codepen for us please? It's unclear what you're trying to scroll and when. We need the context of markup and styles to be able to advise. Thanks! 1 Link to comment Share on other sites More sharing options...
tibo78 Posted September 26, 2021 Author Share Posted September 26, 2021 Hello, I am just asking if I can replace window by my ID "#section-4-10" ? I just want that y:400 scroll from the ID and not from the top. Sorry if it was not clear. Thank you. Thibaut Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2021 Share Posted September 26, 2021 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2021 Share Posted September 27, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now