Text animation which looks like 3D.

[jd19]

Please help me out. I'm working on a project which contains a complex animation like mentioned below and screenshot attached.
They are the steps to add animations 
1. Particles start to appear from the corners
Blurred
2. Particles become clear
They start to gain quantity and movement
3. it’s becoming more and more of them
4. They become many enough to start forming an abstract shape (a wave of particles) that move randomly around the screen
5. Wave keeps moving randomly around gaining more and more particles 
6. Wave keeps moving randomly around gaining more and more particles 
7. After that the wave starts to gather all particles in  the centre
8. After that the wave starts to gather all particles in  the centre
9. After it separates again 
10. Forming a circle
11. And eventually forming 2 lines of text 
12. Creating more vivid shape of letters

Screenshot of the animated states attached for reference. 
Please suggest the technology where this kind of animation is possible. Your answer will be very helpful for me. 

 

[GreenSock]

Wow, that looks like a VERY aggressive thing to try to accomplish in the browser. Particles can be very CPU-intensive to drive around the screen in mass quantities. Obviously you can animate anything with GSAP, but this looks to me like something you might want to just do in After Effects (video) or something. Otherwise, you could try using something canvas-driven like Pixi.js for the rendering technology at least. 

 

Good luck!

[jd19]

Is there any other way possible to make this kind of animations. 

 

[Cassie]

I'd take a look at the codrops archive for any articles mentioning particles.

https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/

Also the coding train on youtube
 

I'm not going to lie though. This isn't a simple animation. It would be a pretty complex undertaking even for an expert.

 

Fun though! Certainly a fun challenge. If you give it a go, report back, we'd love to see the results.

[WalterHarper]

  

On 5/10/2023 at 2:38 PM, Cassie said:

I'd take a look at the codrops archive for any articles mentioning particles.

https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/

Also the coding train on youtube
 

I'm not going to lie though. This isn't a simple animation. It would be a pretty complex undertaking even for an expert.

 

Fun though! Certainly a fun challenge. If you give it a go, report back, we'd love to see the results.
 

Thank you so much for the video Cassie, you made my day  I really appreciate you for sharing the video.