initium Posted June 25, 2023 Share Posted June 25, 2023 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? Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2023 Share Posted June 25, 2023 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! Link to comment Share on other sites More sharing options...
initium Posted June 25, 2023 Author Share Posted June 25, 2023 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! Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2023 Share Posted June 25, 2023 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 1 Link to comment Share on other sites More sharing options...
initium Posted June 25, 2023 Author Share Posted June 25, 2023 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 Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2023 Share Posted June 25, 2023 Sure, something like this? See the Pen OJaWLWy?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
initium Posted June 25, 2023 Author Share Posted June 25, 2023 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 Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2023 Share Posted June 25, 2023 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? Link to comment Share on other sites More sharing options...
initium Posted June 25, 2023 Author Share Posted June 25, 2023 oh damn. Sounds not so easy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now