advice for react project with gsap

[diogob93]

Hello. 

Im building a website in react and im learning GSAP rn, id like to ask some advices for you of how could I start an animation in begining of website with this transition: 

 

 

basically i want the main page start with white background  and a section with the title and then i start scrolling down and the text split and become vertical and then both words move for left and right side and then a box with img inside (the box that says 16:9) appears and starts to stretch up to 100vw and 100vh  and the title disappears. all of this on scrolling down and in fixed position. and after all of this i scroll to the next section bellow.

 

my question is how should i start i know i need scroll trigger and animation. another question, this text can be font or should be in svg? is it possible someone can help on this paid process? thanks!

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi @diogob93 and welcome to the GSAP Forums!

 

You should explore the Flip plugin, it was made for stuff like that:

https://gsap.com/docs/v3/Plugins/Flip/

 

See the Pen abPjLXM by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!