Jump to content
Search Community

SVG Animations, what I did

Androlax test
Moderator Tag

Recommended Posts

Hello,

 

I don't know if this is common here to do that, I would like (if you have time, and if it's possible for you), to have a first experience return, it's the first time I do something with GSAP and I would like to know if I did it well ? If I couldn't do better ? 

 

Here is what I made

 

 

I guess it's pretty simple for someone who is really good with GSAP, but I'm proud of what I made for now aha, I feel like it's cool :D:D

 

Thanks for the help some gave me :D

See the Pen oNNKpmB by th-o-benoit (@th-o-benoit) on CodePen

Link to comment
Share on other sites

Hey Androlax, we're happy to help where we can. 

 

A few thoughts after looking at it: 

  • The hover animations are very  subtle. I might try to make them stand out a bit more somehow. 
  • The large amount of gradients that you're using make performance a bit hard. It might be good to use less gradients or convert the ones that you can to images/canvas to avoid the performance hit.
  • I would include the duration inside of the vars parameter of your tweens, not as the second parameter like you did occasionally (looks like you forgot to do it a few times on lines 94, 112, and 133).
  • Overall your structure is a bit different than how I would structure it (I've never seen a a huge object and all of this nesting that's not trying to be a generic class or something) but it's not bad. 
  • Like 2
Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

Hey Androlax, we're happy to help where we can. 

 

A few thoughts after looking at it: 

  • The hover animations are very  subtle. I might try to make them stand out a bit more somehow. 
  • The large amount of gradients that you're using make performance a bit hard. It might be good to use less gradients or convert the ones that you can to images/canvas to avoid the performance hit.
  • I would include the duration inside of the vars parameter of your tweens, not as the second parameter like you did occasionally (looks like you forgot to do it a few times on lines 94, 112, and 133).
  • Overall your structure is a bit different than how I would structure it (I've never seen a a huge object and all of this nesting that's not trying to be a generic class or something) but it's not bad. 

 

Hello,

 

Thanks again for your reply.

 

The large amount of gradients that you're using make performance a bit hard. It might be good to use less gradients or convert the ones that you can to images/canvas to avoid the performance hit. ---> What do you mean ? How I can do achieve that ?

 

Overall your structure is a bit different than how I would structure it (I've never seen a a huge object and all of this nesting that's not trying to be a generic class or something) but it's not bad. ---> I chose to do this because the animations I do are not really usable for other things than maybe the leaves? (animateLeafs), how would you have proceeded, for example?

Link to comment
Share on other sites

6 minutes ago, Androlax said:

What do you mean ? How I can do achieve that ?

Don't use <svg> for a bunch of gradients, especially for ones that you're animating. If you export them to raster form, it will perform better. Alternatively, use a tool that converts SVG to canvas because canvas performs better.

 

7 minutes ago, Androlax said:

I chose to do this because the animations I do are not really usable for other things than maybe the leaves?

Your animations are fine, I just meant how you structured the whole project in this super large object. I've never seen such an approach.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Don't use <svg> for a bunch of gradients, especially for ones that you're animating. If you export them to raster form, it will perform better. Alternatively, use a tool that converts SVG to canvas because canvas performs better.

 

Your animations are fine, I just meant how you structured the whole project in this super large object. I've never seen such an approach.

 

Yeah, I wasn't talking about the animations, I was talking about how I made it (in the super large object), what would have been your approach ? 

For me, it was the most modular thing (a bit like OOP in php (I go more backend than frontend)). Then maybe it's stupid, I don't know. How would you have done that?

Link to comment
Share on other sites

4 hours ago, Androlax said:

Yeah, I wasn't talking about the animations, I was talking about how I made it (in the super large object), what would have been your approach ? 

For me, it was the most modular thing (a bit like OOP in php (I go more backend than frontend)). Then maybe it's stupid, I don't know. How would you have done that?

 

I used to do that back in the day. There's nothing technically wrong with that approach. It keeps everything scoped, and could easily be turned into a factory.

 

What I typically do now is use classes, even if I'm not going to creating multiple instances. 

 

class App {

  constructor(el) {
    this.el = el;
    
    if ($(this.el).length) this.animate('millWheel', 'stroller', 'farmhouseSmokes', 'laboratoryBubbles', 'laboratoryLeafs', 'leafs', 'harvestBubbles', 'harvestLeaf');
  }
  
  animate(...animations) {
    ...
  }
}

const app = new App("#svg-module");

 

 

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