[Parallax effect for a DrawSVG + ScrollTrigger animation]

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. 

[Parallax effect for a DrawSVG + ScrollTrigger animation]

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

[Parallax effect for a DrawSVG + ScrollTrigger animation]

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?

[DrawSVG + ScrollTrigger pin path to middle of page]

@mvaneijgen
Thats exactly what I just did 😎 all good now
 

[DrawSVG + ScrollTrigger pin path to middle of page]

Hi, I am trying to use DrawSVG and ScrollTrigger in conjunction but I don't know how to keep the head of the path in the centre of the page. It seems to be moving down the page faster than the scroll. 

Any pointers? 

https://codesandbox.io/s/funny-heyrovsky-0u4c5k?file=/src/App.js

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

Update: it broke a lot of animations and wasn't as easy as wrap it and go.
So I've decided to remove it all together and go back to being without SmoothScroller.

Hopefully a few versions down the line these problems will be patched

 

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

Cassie I tried this in my local project and the error persists.
However, when I removed the fromTo() animation most of it started working, but it did break a few other things.
1. My navbar doesnt seem to want to be sticky anymore even though its position: fixed
2. Some of my other animations broke too. 

I am going to try to patch it up and see why they are breaking, but the errors are gone at least

 

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

Damn I thought it was autosaving.

this is it
https://codesandbox.io/s/optimistic-einstein-4svhd2?file=/src/Home.js

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

I thought I already forked Cassies and saved it. 
try this: https://codesandbox.io/s/mutable-frog-u6mhxo

 

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

Managed to recreate the same error in this Sandbox:

Its rushed and not stylised 😋

https://codesandbox.io/s/lucid-cherry-oiuo11?file=/src/Home.js

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

[ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations]

I have a bunch of ScrollTrigger animations that work, but when I wrap my content in a smooth-wrapper for ScrollSmoother, the ScrollTrigger animations wont work and I just scroll to the end of the page without the animations working.
This is how I am using ScrollSmoother, and this is the error I get.
My gsap + ScrollTrigger animations are inside my Home component in a useEffect hook.