GSAP to create interactive 3D bubbles?

[rumOldFashioned]

Hi community, I'm a self-taught React developer and have made it quite far in creating decent '2D' web-apps. I'd like to take my skills to the next level by adding some 3D elements to my sites, and have an upcoming project in which a visualization similar to the one shown in the below website example would come in handy. Essentially, to be able to create 3D objects like these bubbles that one can interactive with via hover/ scroll. I wonder if GSAP can help me achieve such things, or if there may be better options for me to look into? Any advice would be appreciated!

https://peptone.io

[Rodrigo]

Hi @rumOldFashioned and welcome to the GreenSock forums!

 

Mixing GSAP ScrollTrigger and THREEJS is definitely doable. Unfortunately I don't have almost any experience with THREEJS so I can't give you a lot of advice. But based on a simple Google search you can find a lot of resources

 

https://www.google.com/search?q=scrolltrigger+threejs&oq=scrolltrigger+three&aqs=chrome.1.69i57j0i19i512.9528j0j7&client=ms-android-motorola-rev2&sourceid=chrome-mobile&ie=UTF-8#ip=1

 

Also give a follow to Louis Hoebregts (@Mamboleoo) on codepen. If someone has experience with both GSAP and THREEJS that's him

https://codepen.io/Mamboleoo

 

Hopefully these links are enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[rumOldFashioned]

Hi Rodrigo, thank you for the helpful advice! Three JS certainly sounds like something I should look into more closely