gsap draw path with horizoontal scroll

[initium]

Hey,

i am using horizontal Scroll like so:
 

<template>
  <div class="outer">
    <div class="container">
      <svg class="how-does-it-work-path-stroke" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10 25 C 30 5 32 39 58 39 Q 81 39 90 23 T 50 5 Q 1 3 31 38 Q 53 61 114 27 T 179 18 T 133 41 T 197 31 L 479 25 L 596 25"
          fill="none"
          stroke="rgba(var(--v-theme-primary))"
          stroke-width=".05"
          stroke-dasharray="1"
        />
      </svg>
      <div class="panel red"><HowDoesItWork /></div>
      <div class="panel orange"><StepOne /></div>
      <div class="panel purple">THREE</div>
      <div class="panel green">FOUR</div>
    </div>
  </div>
</template>

<script> 
  gsap.registerPlugin(ScrollTrigger);

  let sections = gsap.utils.toArray(".panel");
  let container = document.querySelector(".container");

  // Set the width of the container
  container.style.width = `${sections.length * 100}vw`;
    gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".container",
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      end: () => `+=${container.offsetWidth - window.innerWidth}`,
      markers: true,
    },
  });

        
</script>

i am trying to have a svg path from the first panel red until the last panel green. 

the svg should also move to the left like the panels do. 

Can anyone help me?

[Cassie]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

I've started you off here but we're missing the styling.

 

See the Pen KKrNONP?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Could you update this demo and make sure it's clear from the explanation what you're intending to do and what the current issue is? 

Thanks!

[initium]

sorry i am not familiar with this forum here.

See the Pen LYXbwjO by Nico-Gensheimer (@Nico-Gensheimer) on CodePen

so what i want to try is to draw an svg Path from panel one to panel four so that the path also grows on scroll. How would i do that with with the drawSVG Plugin?

Thanks!

[Cassie]

No worries,

 

So first you'll need to position your path where you want it in your container with CSS, then you can use a timeline to animate the path with drawSVG

I started you off here! Hope it helps.

See the Pen gOQLVdE?editors=1011 by GreenSock (@GreenSock) on CodePen

[initium]

aah wow thats almost what i needed! Thank you so far.

But is there a way to follow the path? So that the path is moving with the sections?

Thank you

[Cassie]

Sure, something like this?

See the Pen OJaWLWy?editors=0010 by GreenSock (@GreenSock) on CodePen

[initium]

it think your example is a little broken.

See the Pen LYXbwjO by Nico-Gensheimer (@Nico-Gensheimer) on CodePen

i have made another example of mine. As you can see that the path is not always in the center of the viewport. Well i mean it shouldnt be always centered but it should not get out of viewport. Is there a way i can handle this?

Thank you

[Cassie]

I don't know what you mean by a little broken, broken how? (sometimes demos don't look right in iframe view, you may have to open them)

 

1 hour ago, initium said:

i have made another example of mine. As you can see that the path is not always in the center of the viewport. Well i mean it shouldnt be always centered but it should not get out of viewport. Is there a way i can handle this?

If you have a straight line it's nice and easy to map that over, at 50% of the progress of the scroll you need to be 50% of the way through the line,

But If the line has lots of curves it's not so easy, it doesn't map directly over. That's why I chose a power2.out ease, we needed to get through about 50% of the line animation by around 20% of the way through the animation's progress. That's just an approximation though.

If you want more control it might helps to you to look into custom easing and try to draw out a curve that maps over relatively well to the shape of your line animation? 

 

[initium]

oh damn. Sounds not so easy