[Scroll Animation with ScrollTrigger, DrawSVGPlugin, MotionPathPlugin]

Thank you so much again @mikel, @ZachSaucier

I was able to solve the problem and (almost) complete the project with your help. There’s just one more thing that I am stuck at and haven’t been able to figure out since 2-3 days. Could you please help me one last time please? I just want to understand how can I control the amount of pixels to be drawn on a single scroll? For 90% of the distance, the line and scroll move perfectly in sync but then suddenly the line moves ahead and breaks the flow. Can you suggest how to correct it? It’ll help me close the project!

[SVG line drawing]

Thank you so much @mikel.

 

I was having a big trouble solving these issues.

[SVG line drawing]

Hi guys,

 

I am sharing a very close example to my current work which I am doing with GSAP using ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. When you scroll down you will see a SVG line drawing there which is going fine but just when you reach half way on Section 9, you will notice that the SVG line goes on drawing before reaching next section. In other words, it draws ahead of the scrolled section. Also, when I scroll up and down, the entire line starts shaking.

I am stuck on these 2 issues. Can anyone please help me solve this?

 

See the Pen eYzJVLe by Swooshant (@Swooshant) on CodePen

[Scroll Animation with ScrollTrigger, DrawSVGPlugin, MotionPathPlugin]

Hi @ZachSaucier,

Thank you so much for your help.
Yes, the line is moving in the right direction now. However, I see 2 issues that I would request your inputs on. Firstly, the ball is little ahead of line, I want to keep it at the end of the line. Secondly, when I scroll a little ball isn’t visible and line drawing speed is very fast.

[Scroll Animation with ScrollTrigger, DrawSVGPlugin, MotionPathPlugin]

Hi guys!

 

I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin.

I did it but I really can't understand why it is drawing in reverse order.

When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom.

I don't know if the problem is with line, css or any other thing.

 

Can someone please help me with this. I really don't know how to fix it.

 

@GreenSock

See the Pen eYZJwKW by Swooshant (@Swooshant) on CodePen

[Animate SVG on click]

Thank you again @akapowl for your help.

[Animate SVG on click]

Thank You so much @akapowl for your help and could you tell me how I can hide this svg on load, so that it only shows when click.

 

[Animate SVG on click]

Hi guys!

 

Please click once in codepen demo.
I am trying to make a very simple sparkling animation on clicking anywhere in the window but unfortunately I am not able to do it.
It runs only once. I want it to run whenever I click.

Please help me.

See the Pen MWyBPNj by Swooshant (@Swooshant) on CodePen