loader Split initial loading video in two parts and revel hero section

[Femil]

I have a React application in which I want to set the initial video loader, and then I want to split the loader or video section from the centre so that one part goes up and another goes down, and then the main site is ready to be used by users.

See the Pen xxMmOzG by kul32 (@kul32) on CodePen

[GSAP Helper]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools! Right now there is no GSAP/JS code please show us what you've already tried that way we can dive directly into the code and help you debug.

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

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

[Femil]

1 hour ago, GSAP Helper said:

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools! Right now there is no GSAP/JS code please show us what you've already tried that way we can dive directly into the code and help you debug.

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

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

I have updated the codepen

[mvaneijgen]

HI @Femil welcome to the forum!

 

There are a few properties like height, width, margin, padding, top, left, ect you're better of not animating, this because they case a repaint when they change. And there are so many other CSS properties that are more performant and do exactly what you're looking for. 

 

I've used https://bennettfeely.com/clippy/ to create a clipPath that has its points in the middle of the screen. In CSS I've set it to animate from a full box and in GSAP set the .to() to the effect you want. When working with clip-path, make sure that you animate between the same amount of points and make sure that every values is suffixed with a % sign. Hope it helps and happy tweening! 

 

See the Pen YzBdVjm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen