Jump to content
GreenSock

lemonetti

DrawSVG + ScrollTrigger - How to start second line after first one finished

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

first of all I'm in love with GSAP and everything that it can do!

 

I need a bit of help with the DrawSVG Plugin though. As you can see in the Codepen I provided I have three lines. So the first one (yellow) should draw itself on page load. The other two should draw with scrolling, but the third one should only start after the first one is finished. How do I accomplish this with scrolltrigger and drawSVG. Would be very thankful about every help provided!!

 

Thank you!

See the Pen JjZLEZB by clmsftsw (@clmsftsw) on CodePen

Link to comment
Share on other sites

Hi @lemonetti welcome to the forum! 

 

It's a bit counter intuitive to call your first line .c and your last line .a, that tripped me up a few times while working on your pen 😂,  but that said what I've done is create an animation for your first line and when that completes initiate your ScrollTrigger timeline, which I've wrapped in a function, so that it doesn't start automatically.

 

In your ScrollTrigger timeline you'd set the position parameter to 0 which made them both start at the same time, I've removed that and now they start one after each other. 

 

If you want the lines to stay in view while they are animating you could set pin: true to your ScrollTrigger object, right now the animation scrolls away while it still animating, but that is personal preference. Hope it helps and happy tweening! 

 

See the Pen eYKMvBj by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

Thank you so much! That's exactly what I wanted!
 

I have one more question though. Is it possible to add a different class to the wrapper div everytime the line "hits" one of the circles? (e.g. the line meets the first circle, so the wrapper div would get the class "circle-1", on the second cricle "circle-2" and so on.


Also is it possible to add another circle to the front of the line, which disappears after the line ends? A bit like here: 

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

 only that the circle disappears in the end and that I have basically three different lines...

I hope that was understandable.

 

Anyway thank you already for the help! Very much appreciated.

Link to comment
Share on other sites

So that's how far I got:

See the Pen JjZLEZB by clmsftsw (@clmsftsw) on CodePen

 

I am quite happy now. One more thing I could not figure out yet. So I add a class after the completion of the line and hide the dot after the last line in completed. Is there any way to reverse this again? To remove the classes and show the circle again when I scroll back up.

Thanks in advance!

Link to comment
Share on other sites

Hi,

 

Just add a show method using the onEnterBack callback of the ScrollTrigger configuration:

const tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    trigger: ".line-hero",
    scrub: true,
    start: "top top",
    end: "+=400",
    markers: true,
    onEnterBack: () => jQuery(".circle-line").show(".circle-line"),// <- Show circle again
  }
});

Hopefully that is what you're looking for. Let us know if you have more questions.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hey!

That is the solution for the problem with the circle in the end. Thank you!

 

Unfortunately it doesn't solve the issue with the added classes. I add classes in the following way:

tl.from(".b", {
drawSVG: 0, onComplete: () => {
jQuery(".hero-wrapper").addClass("line-2");
}
})
So there is a class added when the path ".b" is completed. What I want now is that the class gets removed when I scroll back again. Unfortunately I didn't manage to do that yet. 

 

 

 

Link to comment
Share on other sites

  • Solution

I'm not sure what timing you want, but maybe use an onReverseComplete callback to remove the class.

  • Like 1
Link to comment
Share on other sites

Perfect! That's it thank you so much!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×