drawSVG with arrows

[Alexandra Spalato]

Hello,

I'm working on a project in gatsby that will need drawSVG, https://falconlab.netlify.app/ , the second slide with the arrows, somebody has done this animation from scratch, the problem is that it's not really compatible with gatsby, I have successfully integrated it putting inside the static folder, but I have already seen that it can break, so I want to do it with gsap

I'm trying the drawSVG plugin in the pen  on one arrow (I also tried with projects https://codepen.io/alexadark/project/editor/DKKpmL#0 , but it doesn't work)

so the problem I have here is that the arrow is not part of the path so it's already there before the line is drawing

how can I solve that

then I will use it with the ScrollTrigger plugin

Another question, is it possible to test plugins in codesandbox with a gatsby ptroject ?

And finally I would like to know if gsap it's the best way, or if I could keep the animation from scratch, and in this case is there a way to integrate it properly in gatsby (it's an html file, that's why I had it in static, it's the only way I found, I join it here)

the guy who made it told me that gsap takes a lot of CPU+GPU poer causing animations to stutter on slower laptops, and that'brandAnimation.htmls why he prefers to do things from scratch...what can you tell about this

See the Pen gOPbLWo by alexadark (@alexadark) on CodePen

[ZachSaucier]

18 minutes ago, Alexandra Spalato said:

so the problem I have here is that the arrow is not part of the path so it's already there before the line is drawing

how can I solve that

I'd create a timeline. At the start of the timeline, fade in the arrow. Then (or at the same time) draw the line.

 

19 minutes ago, Alexandra Spalato said:

is it possible to test plugins in codesandbox with a gatsby ptroject ?

Yep! The links used on CodePen work on CodeSandbox as well. See the below thread for more info:

 

20 minutes ago, Alexandra Spalato said:

I would like to know if gsap it's the best way, or if I could keep the animation from scratch

I think you know what we're going to say to that  GSAP is easier to change, update, and gives you added flexibility. We recommend GSAP all the time!

 

 

21 minutes ago, Alexandra Spalato said:

the guy who made it told me that gsap takes a lot of CPU+GPU poer causing animations to stutter on slower laptops, and that's why he prefers to do things from scratch...what can you tell about this

I think that claim is absurd. GSAP is incredibly fast at what it does. Taking a quick look at the code used in the html file you provided, not only does that look terribly hard to maintain and update but it does essentially the same thing as GSAP. I'd like to hear why this person said what they said.

[Alexandra Spalato]

Great!

in codesandbox I would like to try with a gatsby project as this is my usual tool

so how can I have it, as normally it works with npm modules

also why didn't it work with codepen project

[ZachSaucier]

46 minutes ago, Alexandra Spalato said:

in codesandbox I would like to try with a gatsby project as this is my usual tool

Cool, so set one up then import GSAP. GSAP has its own NPM module  For club files, import the DrawSVG file (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js) as an external resource.

 

47 minutes ago, Alexandra Spalato said:

why didn't it work with codepen project

Looks like you're attempting to load the v2 version of the plugin which is not compatible with the v3 version. Load the v3 version (link above) instead and I think it should work.

[Alexandra Spalato]

Hi, I have successfully done it in codesandbox https://codesandbox.io/s/gsap-playground-86s1u

but compared to what the other guy did, my arrows are drawing to fast https://falconlab.netlify.app/

basically I would need something to slow down the scroll...

how can I accomplish that

I tried to put a longer duration on the draw svg but didn't work

 

and the other point is that I'm repeating the same code for each element, is there a way to user stager here ?

[ZachSaucier]

I like your speed better  

 

But the solution is simple: just make .slideTwo taller.

 

 

59 minutes ago, Alexandra Spalato said:

the other point is that I'm repeating the same code for each element, is there a way to user stager here ?

Yes but with your current setup it'd be kind of a pain to target all of the elements because you have to list each one individually still.

 

What I'd recommend instead is putting the related paths in a group (<g>) and then iterating through each group and creating the animation for that section more dynamically. That way you don't have to have and ID for each path, you can do it based on classes or just the order in the DOM. I talk more about how to iterate through containers to create animations in my article on animating efficiently. 

Side note: we encourage people to put the duration inside of the vars parameter. I see that you did that for the tweens of duration 10 but not with the duration of 1.

[Alexandra Spalato]

Thanks,

I tried doing slideTwo taller (here from 100vh to 300vh) but then once the animation has finished we have to still scrolling and that's not good

so I tried adding pinSpacing: false

but then the content after (here I made a third slide) never appears, and the animation doesn't finish

So here I reduce the height of slideTwo to 100vh at the end of the animation , but then we have blank space between slideTwo and slideThree...what is the solution?

 

About the duration, why do we need to write them like that? and what their utility when the duration is droven by the scroll ?

 

By the way, if I buy the smaller licence, can I upgrade later?

I'm building premium themes for gatsby and if I use it there I will need the business green licence

For the premium themes, do I need the licence for any use of gsap, or only for club plugins ?

[ZachSaucier]

You want to pin the ".svgContainer" not the section itself. You should also change the end to "bottom bottom" so it doesn't overlap with the third section. https://codesandbox.io/s/gsap-playground-edsh7?file=/js/main.js

[ZachSaucier]

28 minutes ago, Alexandra Spalato said:

why do we need to write them like that?

Including them in the vars parameter lets you use GSAP's defaults (which are really handy). For more info see this post

 

29 minutes ago, Alexandra Spalato said:

what their utility when the duration is droven by the scroll ?

The duration when scrubbing an animation affects the timing of the animations. So if you have two tweens sequences where one tween runs 1 second and the other runs 3 seconds, when scrubbing the first tween would animate for 1/4 of the total distance while the second would animate for 3/4 of the distance.

 

30 minutes ago, Alexandra Spalato said:

if I buy the smaller licence, can I upgrade later?

Yep! Anytime.

 

30 minutes ago, Alexandra Spalato said:

For the premium themes, do I need the licence for any use of gsap, or only for club plugins ?

If you're going to be selling themes that use GSAP you need a commercial license that comes with Business Green. That is true whether or not you use the Club plugins. However, a Business Green membership gets you access to all the Club GreenSock plugins and you can use GSAP and its plugins on an unlimited number of projects (themes in your case) at no additional cost. It's a steal!

[Alexandra Spalato]

Thank you so much!

It's now really good   https://codesandbox.io/s/gsap-playground-86s1u and I'll implement it tomorrow in the real project!

I have to say that I'm amazed by the quality of support you are providing! so good and so fast!

Thank you again !!! 😍

[Alexandra Spalato]

Last thing, unfortunately my client required IE11 support at the last moment, and it seems that it doesn't support the scroll trigger this is what I see in browserstack   https://share.getcloudapp.com/yAuYxLvk

Also the svg images are looking bad, don't know what to do, I hate IE

[GreenSock]

ScrollTrigger 3.3.1 (just released) should work just fine with IE. Would you mind updating and letting us know if that resolves things for you? 

[Alexandra Spalato]

yes, it works now! you're the best 😍

I just have the svg looking like that https://share.getcloudapp.com/X6uoJ86D but this is not because of gsap, however if you know why please tell me!

[ZachSaucier]

41 minutes ago, Alexandra Spalato said:

I just have the svg looking like that https://share.getcloudapp.com/X6uoJ86D but this is not because of gsap, however if you know why please tell me!

That's pretty interesting. Does it look like that only in IE11? 

[Alexandra Spalato]

Yes, but it's on browserstack as I don't have a PC

the designer is preparing a fallback with svg if we don't have another solution

[ZachSaucier]

I'd suggest that you find a developer who is able to test that for you on a real PC. They can likely debug it more easily as well.

[Alexandra Spalato]

The people I work with are all on mac...a part one bit he is on linux so no IE

anyway not a big deal, in the beginning I didn't wanted to support IE, the the client realize that 15% of new visitors came from IE

I will suggest to have a something suggesting this people to switch to a modern browser