Jump to content
Search Community

GSAP + Canvas Particle animations

Bartonsweb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Most questions usually get a response within a couple of hours. Maybe longer on the weekends.

 

What you're trying to do makes more sense after looking at that site. And it looks like they are also using GSAP to animate those particles.

 

That's a pretty advanced animation, but the basic idea is that you animate a particle along a path, and rotate the particle around its position on the path while scaling it. Easier said than done if you've never worked with canvas before. The hardest thing to understand is probably transforms, which that animation uses extensively. 

 

Here's a very quick and dirty demo showing how that animation could work. 

 

See the Pen baLJvz by osublake (@osublake) on CodePen

 

 

And be sure to check out that thread I posted above for some tips on getting started with canvas and GSAP.

 

  • Like 5
Link to comment
Share on other sites

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.

 

See the Pen baLyJw by bartonsweb (@bartonsweb) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Hey @Bartonsweb

 

Nice job on expanding what I did. The thing that trips most people up on canvas is that they are expecting it to work like the DOM, but canvas is just a graphics API, providing with you a bunch of different drawing commands.

 

So to animate canvas, all you need to do is create an object with properties that describe how you want to draw something. Once you have an object, animating it with GSAP works exactly like the DOM. However, there's an extra step involved as you have to render that object. That's what GSAP's ticker can be used for. If everything is going smoothly, it should call the callback at around 60fps.

 

Here's a good article and video that explains the pros and cons of the DOM and canvas.

https://www.kirupa.com/html5/dom_vs_canvas.htm

 

 

 

That Kirupa site has a lot of good tutorials on canvas.

https://www.kirupa.com/canvas/index.htm

 

And so does MDN, although some of the stuff is outdated.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

 

And I'll make another version showing how to do the particles flying in later. Is a pentagon the only shape you're going to be using? I'll also show you how to make polygons that start at 12 o'clock instead of 3 o'clock. That's why the bottom of your polygons aren't completely horizontal.

  • Like 2
Link to comment
Share on other sites

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:

 

See the Pen mpxxWe by bartonsweb (@bartonsweb) on CodePen

 

  • Like 1
Link to comment
Share on other sites

20 hours ago, Bartonsweb said:

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

 

That is so true. I've noticed that a lot of people think GSAP is only for HTML and SVG, even from long time users. That needs to change.  Somewhere on my todo list is to make some tutorials showing how to use GSAP + canvas. It's hard enough trying to find a decent canvas tutorial, let alone one that uses GSAP.

 

To get a regular polygon to start at 12 o'clock, you just need to swap the sin and cos calls, and negate the y value.

 

// To start at 3 o'clock
var x = centerX + radius * Math.cos(angle);
var y = centerY + radius * Math.sin(angle);

// To start at 12 o'clock
var x = centerX + radius * Math.sin(angle);
var y = centerY - radius * Math.cos(angle);

 

And to draw your particles, canvas has a new feature called Path2D that will allow you to create and combine reusable paths, so you could use the same path for all your particles.

 

Here's a quick fork of your last demo using Path2D with the corrected angles.

 

See the Pen GydrjR by osublake (@osublake) on CodePen

 

 

The formula used for a regular polygon is based on a circle, so it seems that the center of a polygon should be the same as the circle that circumscribes it, but look at what happens when the polygons has an odd number of sides. 

 

 

6kLsztW.jpg

 

 

It's not symmetrical going up and down, so the top is further away from the center than the bottom. That means the center needs to be moved down a little if you want to have it perfectly centered inside a container. So we need to calculate the bounds of the polygon, find the difference between the height of the circle and the polygon, and then offset it half of the difference. 

 

And to make the shape and your animations responsive, it will be easier if we calculate the points of a polygon with a radius of 1, and then scale those points based on some desired scale/radius. That's basically how an SVG works. 

 

Check out how everything is nicely centered and responsive in this demo. I'll incorporate that in another version of your demo, which I'll have to do later as I gotta run.

 

See the Pen mpLrZx by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

@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 :)

Link to comment
Share on other sites

@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.

 

See the Pen baPQEP by bartonsweb (@bartonsweb) on CodePen

 

 

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!

Link to comment
Share on other sites

I have figured out how to get the resizing to work:

 

See the Pen WdVvVW by bartonsweb (@bartonsweb) on CodePen

 

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...