How to 3d animate like in the video

[mr.rayhaan]

 

 

 

Hello guys, this is my first question on GreenSock.

 

I have a task of creating a transition animation between 2 sections. I have attached the video for reference. It gives a sort of 3d effect that I'm not sure how to achieve. Can anyone please help me with it using GSAP?

 

 

[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 if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

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. 

[Cassie]

Hey! Just wanted to add that you'll get more chance of help if you post a minimal demo with an attempt.

How I would approach this

1) First I would try and create these two shapes - possibly with SVG, maybe with DOM elements? - Give the layout a pass first.

2) Once you have an idea of how to create the layout, take a look at how to 'mask' the section below, this is what makes me think SVG? But it could also be DOM elements placed cleverly with absolute position ands z-index.
3) Then try and create the animation, there's a scale or skew here?

4) Once you have an animation you're happy with hook it up to scroll.

 

This sort of thing will usually not be a straightforward process, you may get through, 1 and 2 and then realise you can't animate in the way you planned and have to go back to step one and try a different approach. You'll definitely learn some things along the way though.

Good luck!