How to Develop Stunning and Engaging Website Animations

I have 3+ years of experience in Frontend Development and besides integrating basic animations (using for example AOS or Framer Motion for React) I've never tried anything else.

I see everywhere stunning websites, with absolutely amazing animated hero, animations on scroll that even analyzing the code it's difficult to fully understand what's happening behind the scene.

I know that most uses Three.js, I've looked into it but it seems very complex and it requires months of studying to understand it fully and create a custom scene.

I read also that GSAP is the best library out there to create the best custom animation.I saw also Lenis, there are a lot of solutions and libraries and I really don't know where to start.

My goal is to make classic boring websites an experience for the user, maybe integrating 3d animations, interactive elements at scroll/hover/moving the mouse and so on.

An example:https://seacat.rossinavi.it/ (maybe this is a little bit too much, but just to give you an idea)

I would like to start mastering GSAP, but a few questions:

- What do you use to create and integrate your best animations?

- Which libraries?

- Where can I start mastering animations? GSAP tutorials are enough?

- I'm currently using Framer Motion for my animations, do you think is better than GSAP and why?

- Regarding Three.js, anyone using it for React (react-three-fiber) ? If yes, how?

Thanks a lot!