Is this possible to create easily with GS?

[Robbor]

Hi there, 

I'm new to svg animation and started my research on what (js library) I need for my project.  And if I even need one. 

I want to rebuild something like the link below. Basically just using another path. I saw the path is not an svg but created using javascript. I would prefer to just export my illustrator path as svg and then animate it.  But thats details. I played around with some basic js. Im not new to js or vector graphics. So drawing an svg path connected to scrolling is not the problem. But what I did not understand or know how to solve are things like: length of drawn line, red dot positioning, fade in objects fill, keeping focus when the line draws vertical objects and the craziest part when the dot and the line ends in the heart at very bottom. 

 

Final:

https://www.lemonade.com/giveback-2019

 

Very first basic approach

 

Excuse my poor english fellas. 

 

Cheers 

robbor

See the Pen bGbaGeY by robbor (@robbor) on CodePen

[mikel]

Hey @Robbor,

 

Welcome to the GreenSockForum.

 

Here are two examples that might help you.

 

See the Pen BXdbjQ by mikeK (@mikeK) on CodePen

 

See the Pen QREjpr by mikeK (@mikeK) on CodePen

 

Great project - happy tweening ...

... und Grüße aus Hamburg

Mikel

[Robbor]

Hi Mikel, 

thanks for the demos. 

 

Gruß nach Hamburg

[ZachSaucier]

Hello Robbor and welcome to the forums!

 

2 hours ago, Robbor said:

what I did not understand or know how to solve are things like: length of drawn line,

This is easy with GSAP's DrawSVG's .getLength() method.

 

2 hours ago, Robbor said:

red dot positioning

This is done using the same path layered on top of the path that you're drawing. But a different stroke is used, including stroke-linecap: round; and stroke-linejoin: round; to make it circular. It has the class of .ksqlFD in that live page.

 

2 hours ago, Robbor said:

fade in objects fill

Again, this is done using layering. The heart (and things in it) are separate from the line drawing, just layered behind it. SVG keeps them lined up easily. At that point in the page, they just fade in the heart.

 

Hopefully that is helpful. Mikel's demos show a basic way of how to implement this with and without ScrollMagic.

 

Happy tweening!

[Robbor]

Hi Zach, 

thanks for your help. 

 

Do you guys think I even need a complex library like GS or is it possible with some basic javascript?

 

 

[ZachSaucier]

29 minutes ago, Robbor said:

Do you guys think I even need a complex library like GS or is it possible with some basic javascript?

We might be a little biased on this forum  

 

It mainly boils down to: how much time do you want to have to worry about the implementation details vs how much time do you want to spend implementing the effects? GSAP can handle a lot of the details for you, leaving you to mostly the creation of the animation itself. You technically can do everything that GSAP can do without GSAP, but GSAP will likely save you a bunch of time (and therefore likely money in the long run). 

 

I’m pretty confident you’ll find that the license pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. 

[Robbor]

Quote

We might be a little biased on this forum  

I see

Thanks for your thoughts. Makes sense. Ill start with the project tomorrow so I ll check how easy it is to get started with GSAP as a noob

 

[ZachSaucier]

Our learning page is a good place to start. And you'll likely want to read the documentation on DrawSVGPlugin as well. Other than that, I'm guessing some existing forum posts will help you out.