Jump to content
Search Community

Particle

Baris Dogan 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

Hi Guys

 

How are you? I hope all is well 

I need your idea/help about the particle system 

First please check the image that I attached 

 

How can I do this animation 

- First, particles create 1. Object then 

1. Object create the 2.Object 

 

I really appreciated if you give me an idea or example 

Many Thanks 

 

 

 

 

 

example.jpg

Link to comment
Share on other sites

With a bunch of particles flying around forming circles, shapes or grids, you'll almost certainly want to use canvas. It would just be a matter of coding the Math to create the desired shapes. That's beyond the scope of this forum as we try to keep the focus on GSAP related questions and problems.

 

Here's an article I recently read about particles. You may find some of the demos helpful.

https://speckyboy.com/particle-animation-code-snippets/

 

You can also take a look at Pixi.js (WebGL with a canvas fallback)

http://www.pixijs.com/

 

GreenSock also has a Pixi plugin

https://greensock.com/?product-plugin=js-pixiplugin

 

If you have any GSAP related questions on any part of your project, we're happy to help.

 

Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Hello,

 

Some time ago I was looking for info on how to animate particles and found it is not something easy to find.

After doing some experimentation I was able to learn a little bit on my own.

Also GSAP documentation is great, make sure you are looking at the right version!

 

Here is a working demo using React + GSAP 3 on github: https://github.com/npinos/cloud-animations-react-gsap

 

Live demo: https://oaklandev.com/projects/particle-cloud-animations-react-gsap/index.html

 

Edited by Nico.dev
Add live demo link
  • Like 1
  • Thanks 1
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...