Femil Posted December 5, 2023 Share Posted December 5, 2023 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 5, 2023 Share Posted December 5, 2023 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. Link to comment Share on other sites More sharing options...
Femil Posted December 5, 2023 Author Share Posted December 5, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 5, 2023 Share Posted December 5, 2023 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now