Recreate an effect using GSAP

[AlexCali]

Hello everyone,

 

I am new to using GSAP, so I need a little bit of help here because I am lost on where to start.

 

I found this cool effect (https://rpj.bembi.dev/) that uses this package: react-particles-js. Can anyone instruct me on how to replicate this effect in React using GSAP please?

 

Thank you!

[OSUblake]

Hi AlexCali,

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. 

 

Quote

What topics should be avoided?

As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free:

• Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. 
• Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo.
• “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site.

 

That said, that type of animation is really not something GSAP is designed for. GSAP is a tweening engine, which means it animates between a known start and end value. That animation is just a continuous physics-like one using requestAnimationFrame.

 

If you're really curious about that effect, it's pretty old, and there are numerous versions of it on CodePen if you search around. There is also a book that goes over a bunch of that, like the demos in Chapter 12.

 

http://lamberta.github.io/html5-animation/