containerAnimation scrollTrigger

[Emmamiumiu]

Hello ! I've been lurking around the forum for awhile but it's actually my first time posting.

 

The website i'm trying to create is website using the "fake" horizontal scrolling for the whole content. 

But one of the section as content(box) for which i'm trying to create a vertical scroll using containerAnimation. 

 

The title projects stay fixed and only boxes move.

At the start of animation, box1 should be in the middle with a bit of box2 at the edge of the window and at the end i would like to have box3 centered, with box2 at the top edge.

But i would also like for the animation to be centered so it can only see purple background during the vertical scroll. I feel like i need to dynamically changed the width of the purple section and stick the project elements in the middle of window so the animation can last longer(?).

I've found a website doing something that seems to be the solution but looking at the source code didnt help me much (i dont know if im allowed to post the link of the website as a reference, if yes i will share!)

I spend two days on it but i'm still lost. 

 

I've created a demo here:

 

See the Pen ExqNoWq by Emma-miu (@Emma-miu) on CodePen.

[Rodrigo]

Hi,

 

Horizontal pinning is not supported when using vertical scroll for obvious reasons, the thing you can do is create a timeline to move the elements horizontally and pause that timeline in order to move the other elements, as shown in these demos:

See the Pen NWzgrQQ by GreenSock (@GreenSock) on CodePen.

 

See the Pen WNyJQjN by GreenSock (@GreenSock) on CodePen.

 

Another option is to create a single timeline that handles the horizontal animation and at certain point add the vertical animation to it and then continue the horizontal animation.

 

Hopefully this helps

Happy Tweening!