DrawSVG with ScrollTrigger adapt to speed of scroll?

[eblohm93]

So just a heads up, I wasn't able to get my Codepen DrawSVG to work and I'm not sure why, but my local dev has the exact same code and it works (to an extent).

 

I'm trying to set up the DrawSVG plugin with ScrollTrigger so that the SVG draws as you scroll down the page. The issue I'm having is that because of the wild shape of the line, if the line is at a point where it's more vertical than horizontal, the SVG gets drawn too quickly and the animation leaves the screen and finishes too fast. Is there any way I can force the SVG to draw at like...a variable speed so that the animation is always happening on screen?

 

Thanks for any help!

See the Pen VwNOpzg by eblohm (@eblohm) on CodePen

[Rodrigo]

Hi @eblohm93 and welcome to the GSAP Forums!

 

Your codepen is not working because you didn't wrap the ScrollTrigger config into an object:

// Wrong
gsap
  .timeline({
  scrollTrigger: ".container",
  start: "top center",
  end: "bottom bottom",
  markers: true,
  scrub: true,
  pin: false
})
  .from("#svg-line-mask path", { drawSVG: 0 });

// Right
gsap
  .timeline({
  scrollTrigger: {
    trigger: ".squiggle",
    start: "top center",
    end: "bottom bottom",
    markers: true,
    scrub: true,
    pin: false
  }
})
  .from("#svg-line-mask path", { drawSVG: 0 });

Here is a fork of your demo with those corrections:

See the Pen poBmwGj by GreenSock (@GreenSock) on CodePen

 

Also there is a helper function that solves some issues with easing in these cases, here is a fork of that codepen with it:

See the Pen bGJyRZX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!