Share Posted February 25, 2021 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 More sharing options...
Share Posted February 25, 2021 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/ 4 Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now