SVG Animations, what I did

[Androlax 10 Likes (Newbie)]

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

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

[ZachSaucier 7,130 Likes (Superhero)]

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. 

[Androlax 10 Likes (Newbie)]

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?

[ZachSaucier 7,130 Likes (Superhero)]

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.

[Androlax 10 Likes (Newbie)]

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?

[ZachSaucier 7,130 Likes (Superhero)]

9 minutes ago, Androlax said:

How would you have done that?

Still modular, but more along the lines of this approach: https://css-tricks.com/writing-smarter-animation-code/

[OSUblake 18,475 Likes (Superhero)]

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");