Jump to content
Search Community
Stagnax 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

Well a pretty advanced demo if you are just getting started with animation and GSAP but for good reasons. The demo you posted uses HTML elements to create those stars and without any other content or animation it is struggling to run at 30FPS, now imagine using other animations on top of it and freezing your user's browsers. So it makes a lot of sense to use Canvas for it.

 

I have left a lot of comments explaining almost every bit of the code that will explain all the math and tricks behind animation. You can reference docs for anything that you don't understand related to GSAP or google stuff related Canvas. But feel free to ask any questions.

 

See the Pen NyVrjY?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

If you have done any canvas related animation there are many things worth noting in terms of performance. Like all paths are being drawn at once before they are painted on the canvas. It helps because all particles are of same color. If they were of different colors then it will take a lot more processing but I believe it will still easily animate 500 particles of different colors.

 

For better performance, use a plain div tag with background image or gradient instead of trying to paint it on canvas.

 

I know it is advanced demo and may not be what you expected though still give it a try and try to go through the code it. If you feel like you won't able to understand it, I have planned post a video tutorial in couple of days.

  • Like 4
Link to comment
Share on other sites

Hi Sahil,

Thank you for the insight relation between of canvas and GSAP.

As I said earlier I'm a beginner and have been trying on the features and putting them into practice.

However I'm still having problem to  understand all of it .

You have mentioned that you could explain it in a video which I think would be really helpful 

Thank you again for your effort :)

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