Jump to content
Search Community

I want to make Sparks/Particles

joshuawalker test
Moderator Tag

Recommended Posts

So I want to make a website for a friend that does welding for a living, I want to have sparks coming out the side of his site like this one;

 

https://ironvelvet.studio/

 

Now I don't want someone to make this for me, I just want to know what tools within GSAP would get the job done the most efficiently, I see he is using a PNG image as a sprite for each of the individual particles. I am only interested in this element of the animation. The particles.

 

Thanks 

Link to comment
Share on other sites

 

Hey @joshuawalker - welcome to the forums.

 

The sparks-animation on that site is most certainly based on WebGL - I think they make use of three.js.

You can certainly use GSAP to animate those particles through the 3D space, but building something like that is not what GSAP is built for in the first place.

 

Probably some of the examples for particles could be helpful to get you started

https://threejs.org/examples/?q=particles#webgl_points_sprites

 

Also there are some other quite useful ressources for something like that

https://aerotwist.com/tutorials/creating-particles-with-three-js/

 

 

  • Like 4
Link to comment
Share on other sites

Hi @joshuawalker :)

 

Welcome to the forum.

 

Here are a couple examples where I used PixiJS.

 

See the Pen RyaJmj by PointC (@PointC) on CodePen

 

See the Pen devBRB by PointC (@PointC) on CodePen

 

The 2000 post demo just uses PixiJS graphics for the sparks and confetti. The popcorn demo uses a .png sprite. These are a little older and I haven't yet had time to upgrade them to GSAP3 but they may give you some ideas.

 

Happy tweening and welcome aboard.

:)

 

  • Like 4
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...