Mlnto Posted October 19, 2022 Share Posted October 19, 2022 Hello, i`m trying to create such a a split screen, but with fixed layers and free to extend. It should be some kind of a "mask"?! The amount of section should be variable, perhaps just 2 or 10. The section itselfs should be fixed in a layer view, and the 2 cols should scroll invers. Lleft from the bottom to the top, right form top to bottom. In best case, one Section should be fixed after coming in viewport an the other one should have more scrollable content. Does anyone has an idea? Many thanks in advanced. See the Pen bGEeeBr by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 19, 2022 Share Posted October 19, 2022 Hi, The best approach I can think of is to get the height of each column and animate one to the height minus the container height and the other from that position. Here is an example: See the Pen vYjqXLm by GreenSock (@GreenSock) on CodePen Also is always a good idea to remove ScrollTrigger completely when creating scroll based animations, especially if we're not completely sure of how the animation works. @Cassie made a great short tutorial giving a few great tips on how to implement ScrollTrigger: Let us know if you have any other question. Happy Tweening! 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