5 ms·

Performance is disastrous on my machine. Janks more often than not. Looks like most time is spent computing styles and parsing CSS.

dagurp 4y ago
Same here. It doesn't use any GPU. The creator should check out this video https://www.youtube.com/watch?v=bEoLCZzWZX8& https://www.youtube.com/watch?v=bEoLCZzWZX8&
- asddubs 4y ago
  haven't watched the video but it seems to me that in this case the solution would be as simple as using canvas + requestAnimationFrame instead of the DOM
  - neontomo 4y ago
    That's a great solution. I've been trying to wrap my head around canvas manipulation but it just gives me a headache and I prefer making quick prototypes. I need to learn it one of these days.
  - dagurp 4y ago
    That certainly would improve it but as the video points out, it can be simply about choosing the right CSS properties to update in each animation step. You can see in the examples[0] that instead of changing the "left: x" value you can use "transform: translateX(val)" for a huge performance boost. 0. https://lonekorean.github.io/animation-workshop/ https://lonekorean.github.io/animation-workshop/
    - asddubs 4y ago
      Hence "using canvas"
      - dagurp 4y ago
        What do you mean? There's no canvas in those examples.
neontomo 4y ago
That's too bad. I'm sure it can be optimised quite a bit. I tried to make it so it renders different amount of fish based on your screen size, but that's not a good enough way of determining resources available unfortunately. Suggestions are welcome.
- mikojan 4y ago
  The video dagurp referenced is literally precisely what you are looking for. TL;DW: Use CSS transform instead of left/top/width.
  - neontomo 4y ago
    I did that at first, but if I remember correctly, it caused a lot of difficulties because I was also skewing the images to create a swimming effect (with transform). But you've motivated me to look into it more, it's possible I overlooked the solution.

dagurp 4y ago

Same here. It doesn't use any GPU. The creator should check out this video https://www.youtube.com/watch?v=bEoLCZzWZX8& https://www.youtube.com/watch?v=bEoLCZzWZX8&

asddubs 4y ago
haven't watched the video but it seems to me that in this case the solution would be as simple as using canvas + requestAnimationFrame instead of the DOM
- neontomo 4y ago
  That's a great solution. I've been trying to wrap my head around canvas manipulation but it just gives me a headache and I prefer making quick prototypes. I need to learn it one of these days.
- dagurp 4y ago
  That certainly would improve it but as the video points out, it can be simply about choosing the right CSS properties to update in each animation step. You can see in the examples[0] that instead of changing the "left: x" value you can use "transform: translateX(val)" for a huge performance boost. 0. https://lonekorean.github.io/animation-workshop/ https://lonekorean.github.io/animation-workshop/
  - asddubs 4y ago
    Hence "using canvas"
    - dagurp 4y ago
      What do you mean? There's no canvas in those examples.

neontomo 4y ago

That's too bad. I'm sure it can be optimised quite a bit. I tried to make it so it renders different amount of fish based on your screen size, but that's not a good enough way of determining resources available unfortunately. Suggestions are welcome.

mikojan 4y ago
The video dagurp referenced is literally precisely what you are looking for. TL;DW: Use CSS transform instead of left/top/width.
- neontomo 4y ago
  I did that at first, but if I remember correctly, it caused a lot of difficulties because I was also skewing the images to create a swimming effect (with transform). But you've motivated me to look into it more, it's possible I overlooked the solution.