Bartonsweb

I have figured out how to get the resizing to work: I understood the need to .clear() the timeline on each resize, but it was confusing me how to fix the animation as particles would randomly fly from mid-way through other lines on the polygon. I fixed this by immediately setting the start point of the animation to the last point of the shape (Where the last path ends), which has done the trick. Took me some time to figure it out but I got there It could probably be a little neater but it works! Now all I need is to initially fly the particles in from the edges of the canvas, any help achieving this would be much appreciated as I have no idea how to go about achieving it.

@OSUblake Have you had a chance to look at this again? No need to apologize, I am grateful for any help I have been playing around and learning a lot, however I am stuck on the same issues still. I have it somewhat resizing however I know I am doing it wrong, I haven't been able to figure out how to properly resize the animation as you can see: I know it's because I am calling the Animate() function on resize which is just adding 5 more points to Tween, but I haven't been figured out how else to go about doing it yet. I have no idea how to go about flying the particles in yet either, so any help would be much appreciated. I feel like I have come a long way since starting this project though, I've learnt a lot about canvas and JavaScript!

@OSUblake Hi Blake, I've been doing a lot of playing around with canvas and GSAP and having a lot of fun. Have you had a chance to look into the scale/responsiveness and flying the particles in? I've been trying to incorporate your scaling polygon with the rest of the animation so far but having no luck, it starts becoming very complicated to me lol. Any help would be much appreciated

That is quite impressive, thank you Blake! Path2D makes a lot of sense and is something I was originally looking for when I began this project, thank you for referring me to that. Making the entire animation responsive (As screen size changes) was giving me something of a headache. Your approach makes a lot more sense, I've learnt a lot from this thread. Thank you for all your help, I look forward to seeing your demo later on responsiveness and flying the particles in (Still scratching my head at that). I hope there are more tutorials and resources in the future regarding GSAP + Canvas. GSAP is a really great tool for animation, before I discovered GSAP I didn't really get too much into complex animation sequences, I'm happy to say that has changed now

Yes the pentagon should be the only shape. The 3 o'clock thing was giving me a headache. I did another version with the rotation centered in the screen and with a for loop calculating the path of the large pentagon, but have been having difficulties starting at 12 o'clock and also sizing the pentagon to fit the screen height and width. But I have been having some fun learning canvas, it is a totally different way to work with graphics on the web. Something I noticed is there is not a lot about GSAP + Canvas together, which is a shame, hopefully this thread will serve as helpful to others in the future Thanks for all your help, I'll wait to see your version later. For now, here's what I have come up with today:

That's a great help, thank you Blake! From that I have achieved somewhat what the client is asking for: The only part I am not sure how to achieve, is starting the particles out of the canvas and flying them in to form the shape. Your example helped me to understand canvas a lot more, as well as the thread you provided. It was difficult to understand the difference between canvas and normal DOM, once I got that down it becomes a little easier to understand, every single frame is a completely blank slate. I can see why it is much better for high performance.

Hi @OSUblake Thanks for the speedy reply! I wasn't expecting a response until tomorrow. I do not have an exact mockup, however the client referenced http://claudiocalautti.cc/ to me when they described the animation they want. The way the polygons move into the canvas and then rotate around the logo is the effect the client wishes to have on their product, I have no idea how to achieve this. I've done quite a bit of work with GSAP over the past few weeks, but nothing with canvas or anything as complex as this.

I have been diving into GSAP animation for the past few weeks, it really is quite an amazing tool that makes animation in the browser very easy. A client has tasked me with something quite complex, I have no idea where to begin to achieve the desired outcome. The client would like on page load for particle polygon shapes to fly into the screen from every direction and begin rotating around a point. Each particle/polygon should rotate around a second point within its original rotation path. I have no idea how to go about achieving this, the psychics make my brain hurt. Any tips or pointers for a new-ish GSAP animator?