I am new in using gsap i am trying to use this code pen in my project while also adding other section at the top and bottom of this section but i am not able to do.

[Yuvraj Bokhre]

I am new in using gsap i am trying to use this code pen in my project while also adding other section at the top and bottom of this section but i am not able to do.
https://codepen.io/cassie-codes/pen/vYWvwXV

See the Pen vYWvwXV by cassie-codes (@cassie-codes) on CodePen

[mvaneijgen]

Hi @Yuvraj Bokhre welcome to the forum! That demo looks cool, nice job @Cassie!

 

This demo uses the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ which kinda 'eats'  your scroll (because of preventDefault: true, on line 111. So you have to find a way to break out (and in) to this effect at the moment you want! Below a demo that does this, this is not really simple logic, but if you're up for a challenge it is certainly possible. 

 

I would advice first making some demo's, Codepen is a great place for that, so you don't have to worry about your real project or your framework trowing errors. Also I would check out this awesome getting started guide https://gsap.com/resources/get-started/ just to get a feel for the basics, you have to learn to walk before you can run, right?

 

If you still need help be sure to fork one of the demos and show us what you already have tried, that way we can see your thought process and thus better help you understand the tools!

 

Hope it helps and happy tweening! 

 

See the Pen oNQPLqJ?editors=0010 by GreenSock (@GreenSock) on CodePen