Parallax effect for a DrawSVG + ScrollTrigger animation

[eo33]

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?

[GreenSock]

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. 

[eo33]

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

[Cassie]

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

[eo33]

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. 

[OSUblake]

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.