eo33 Posted April 19, 2022 Share Posted April 19, 2022 I have a DrawSVG ScrollTrigger animation and I want to scrub through the animation much much slower than scroll speed. It takes up 100vh and I would like it to scroll through 100% after 500vh of scrolling. I tried wrapping the document in a ScrollSmoother wrapper and set data-speed for the containing div but it didn't work. Any pointers? Link to comment Share on other sites More sharing options...
GreenSock Posted April 20, 2022 Share Posted April 20, 2022 Sounds like you just need to adjust your end value: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub If you still need some help, please provide a minimal demo and we'll take a peek. Link to comment Share on other sites More sharing options...
eo33 Posted April 20, 2022 Author Share Posted April 20, 2022 @GreenSock Heres a minimal demo: https://codesandbox.io/s/funny-heyrovsky-0u4c5k?file=/src/App.js:1040-1051 I would like it to scroll with the same centering at 70% BUT I would like it to scroll much slower when it hits the viewport, this way the scroll lasts longer. Link to comment Share on other sites More sharing options...
Cassie Posted April 20, 2022 Share Posted April 20, 2022 Not sure what you mean by 'scroll with the same centering at 70% ' but you can pin and adjust the end value: https://codesandbox.io/s/objective-wilbur-mdx338?file=/src/styles.css 1 Link to comment Share on other sites More sharing options...
eo33 Posted April 20, 2022 Author Share Posted April 20, 2022 By setting: start: "top 70%" , end: "bottom 70%", ease: "none" the svg will always draw at 70% viewport height. Pinning + using once: "true"creates a tonne of space above which I suppose I could change with an onComplete callback function (I think) but I really don't want to use pinning as I'd prefer the scroll speed of the element to change, thus meaning the SVG path draws slower. Link to comment Share on other sites More sharing options...
OSUblake Posted April 20, 2022 Share Posted April 20, 2022 You really can't slow scroll speed down without pinning. I think your original idea of using ScrollSmoother might be the better option, like using a speed less than 1. 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