Jump to content
Search Community

drawSVG with arrows

Alexandra Spalato test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

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.
×
×
  • Create New...