Leaderboard

Hello, I made a little animation with gsap, and i really like how easy it is. But while it look great on y computer (gtx 1080), my coworker has heavy performance issues (imac 2007). Be both use the same browser (chrome), and he has better performances with last firefox build. I saw some people switching to canvas/paperjs, but i look like painfull. I'd like to know if the performance issue is about the number of animated elements (~432) or the way i build the timelinemax (in loop). Here is the pen : https://codepen.io/kaliel/full/XVbGvY/ Thanks

Hi @kaliel I was in the middle of making a demo for you, when I noticed a problem, so hopefully you can help me out. I modified the SVG from your demo so everything is positioned in the top-left corner, and that works great. But I need another SVG. The problem is that most of the logos are so close together, that the frames are overlapping, so the edges of others logos are visible in a lot of the sprites. You can see what I have so for. It's more noticeable on the larger logos. And I still have a little work to do, like making it responsive, but the performance gains should be pretty obvious. So I need 2 svgs. The current one, with everything in the final 2018 position, and one where the bounding boxes of the different logos won't overlap with each other. How that is setup really doesn't matter. I just need to be able to cross reference the positions for each element on the different SVGs. Ideally, the data from that could just be converted into something like a json file so you don't have to parse the SVG at runtime. cc @alaric I'm still going to get to your SVG doing something very similar to this using, so I'm thinking I will need the same thing from you.

Hey guys, just an FYI. We're going to be resetting everyone's posts and likes counts soon. The logs are getting too big. I think a fresh start will be nice and will even the playing field for those that came in a little late. Happy helping in 2018! just kidding of course Looking forward to #1000

Having a good understanding of arrays will make this easier to understand. Beforehand, I create an array of arrays that hold the different path variations. So the structure looks kind of like this. var pathLists = [ [ [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], ], [ [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], ], [ [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], ], [ [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], ] ] The random alternate paths are shuffled, so there will only be 1 circle going down a certain path at a time. However, that will only happen if the duration/speed is the same for each circle for every path variation. By using a random duration for each circle/variation, there is a possibility that a fast moving circle could catch-up to a slow moving circle, and head down the same path. Eliminating that possibility completely would require more code and logic, but we can reduce that possibility by reducing the range of the random duration. Instead of using a large range, like random(1, 5), use a smaller range like random(1.5, 2).

Actually, running requestAnimationFrame like that is bad as you could be queuing up a bunch calls on the next frame. You need to make sure there isn't an active request already. http://jsfiddle.net/OSUblake/eryrhrn7/