Multiscroll with Splitscreen, 2 columns, position fixed as layers invers

[Mlnto]

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

[Rodrigo]

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!