alaric

BusinessGreen
  • Content count

    9
  • Joined

  • Last visited

Community Reputation

18 Newbie

About alaric

  • Rank
    Newbie
  • Birthday 06/25/1992

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Paris
  • Interests
    All web related stuff, wish I had time to learn everything !

Recent Profile Visitors

395 profile views
  1. alaric

    Perfs amelioration on multiple stroke animation

    Hi @OSUblake Thank you ! They contacted me after seeing my initial bike animation ( the one on top of this topic ). I understand your theory and it seems like a good idea ! Feel free to reuse my SVG as much as you want ! I don't feel like I'm able to contribute enough for the canvas part because of my current skill on this technology. So if I can help by editing the SVG with illustrator tell me. I remember you suggested reusing as much as possible the same paths. I tried that a bit but gave up half way in this new SVG because this kind of design was new to me and the delay was short. Would it help if I send you an edited SVG using a set of path that only differs in scale / position / rotation ( with a list of the "template" paths ) ? Let me know, I'd love to help ! .
  2. alaric

    Perfs amelioration on multiple stroke animation

    Hi @GreenSock, I totally understand. I have set the repo as pivate in my Git account and notified Codrops about this issue. I'll be more careful now and thank you for your understanding !
  3. alaric

    Perfs amelioration on multiple stroke animation

    Hi @Sahil I'm quite embarrassed here .... I thought the responsibility was on the end user to not resell the plugin without purchasing his own license and mentioning that to them... Since I used this in my previous codepen animation which is also public without any problem I don't see the difference ( since they can get the plugin from there too unless i'm wrong ). Isn't a mention on the repository enough ? Or if i add an alert on demo launch of the repo with a message about the license ? Thanks for your answer. Alaric
  4. alaric

    Perfs amelioration on multiple stroke animation

    Hi everyone ! I've been quite busy recently but I found some time to improve the perfs for this animation and create something more usable in production. For those interested in seing the code you have a public git repository here DELETED Since it's from an article in Codrops I can't share a codepen of it. The biggest improvement is in the SVG itself. I drew my own and went from 941 to 386 paths in total for a similar visual effect ! Reducing the amount of path was primordial as it has been suggested here. Then we came to the conclusion that it's not the kind of animation you leave animating forever as in my original pen. So we leave it animating just long enough to enjoy the effect and then we freeze it. You can see the result here https://tympanus.net/Development/AnimatedStrokes/ There may be some possible improvement to make by using the canvas technology. But right now I personally think that it's something usable and relatively performant enough If I manage to do something with a canvas I'll come back here to share it with you ! @OSUblake Thank you for the help, I'll try to finish this experiment !
  5. alaric

    Perfs amelioration on multiple stroke animation

    Hi @OSUblake, First of all thanks a lot for all those informations and this amazing pen ! Unfortunately I've a bit more work than what I expected this week and I lack time to fully understand what you did there. I'll take the time to understand well how you improved the perfs and what you're using before posting another pen. For your question about the svg I didn't really made it. It's a vector illustration from shutterstock that I edited on Illustrator before exporting it to svg. But I think you're right when you say that most of the shapes are similar. It could be a good idea to just reuse one model but with different scale / position / fill it it benefits the perfs. If it helps I could redo the svg as soon as I can but this time re-using the same shape as often as possible. What do you think of that ? Thank you again for all the time you invest, i really appreciate it. I'll try to advance on this as often as I can.
  6. alaric

    Perfs amelioration on multiple stroke animation

    Hi all ! First of all thank you all for your positive feedbacks about my pen ! I played a bit with canvas today and just tried an experiment by forking one of @OSUblake pens. My goal was to see how the CPU deal with multiple stroke animation. I started from @OSUblake pen here in which he draw a path inside a canvas and animate the ( i think it's at least an equivalent ) stroke-dashoffset property . here is his pen Below is my fork with 100 path It's probably too soon to draw any conclusion but i think canvas may render my initial pen. The perf may not be very different but it's worth trying. I'll try to animate the same amount of stroke in svg while displaying fps to have a better comparison between the two methods. If anyone notice something prevaricating the comparison please don't hesitate to notify me. Also if you have any idea that could help in any way feel free to jump in the discussion. Thank you, Alaric
  7. alaric

    Perfs amelioration on multiple stroke animation

    I checked some of your links and it's helping a lot ! I think I'll start with canvas and gsap only to experiment a bit and then try with some of thoses impressive canvas libraries. I'll post each one of my experience here during the week so anyone will be able to have a look on the perf improvement or not of each method. Thanks a lot @OSUblake for your help.
  8. Hi everyone, I recently made an animation which recently had quite good feedback from the codepen community (https://codepen.io/alaricweb/pen/vWxPyp ). I too feel like there is something very cool in this animation but the perf are really bad on mobile. I don't blame GSAP for that it's pretty amazing already to be able to have such result with that few lines ! But now i want to be able to use this kind of animation in a real website but with that impact on perf it's not imaginable. I don't think i can improve the perf significantly with SVG only, if i animate less stroke, the result won't be as cool. So i'm currently looking to an alternative to have the same animation but with improved perfs ! After some research i'm starting to think that animating inside a canvas is my best option. I feel like PixiJS could be a good option with some tricks, maybe threeJS too. I saw @OSUblake pen in which we can see that he is using GSAP morphing inside the canvas and the perf are just incredible compared to mine. You can see for yourself here. So if any of you know if it's possible to have my animation inside a canvas and with what method i could try to make it better i'd be thankful for some guidelines. Alaric