DrawSVG + ScrollTrigger pin path to middle of page

[eo33]

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

[Cassie]

Heya! 

The default ease is applied so the line won't be drawn at the same speed throughout the animation. If you want a consistent speed you need to set the ease to 'none'

Hope this helps! Is this for the codesandbox challenges 👀

 

https://codesandbox.io/s/magical-colden-0n4ikn?file=/src/App.js:341-366

[mvaneijgen]

That is why it's always smart to turn on the `markers: true` then you can see what is happing and when.

 

You can also change `end: "bottom bottom",` too `end: "bottom center",` and it will stay even more centered, but you then will need to add some spacing to the bottom of the page otherwise the end trigger will never reach its destination. 

 

https://codesandbox.io/s/damp-violet-orj6u7?file=/src/App.js:458-479

[eo33]

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