Horizontal Scroll prevent and then allow

[Mental Republic]

Hi, i have set up a codepen, we are using both scrollmagic and tweenmax to achieve the following. 

 

There is a line that is drawn while horizontally scrolling, the idea is to prevent the image carousel from moving at the start of the horizontal scroll (only letting the line to be drawn) until the line reaches a point, at that very  same point the line keeps on drawing and we can move the carousel horizontally. 

See the Pen RezvBP by ivanguinea (@ivanguinea) on CodePen.

[PointC]

I'm not sure I follow the question. It kinda sounds like you may want to pin the image carousel until the line gets to it? But I'm really not sure I understand the desired outcome here. Could you be more specific about the desired behavior and how GSAP plays a role in it?

 

Thanks and happy tweening.

 

[Mental Republic]

yeah! You pointed me in the right direction, however i still have some issues with the code. 

 

I updated the codepen add add the setpin to the images for period of time:

 

See the Pen RezvBP by ivanguinea (@ivanguinea) on CodePen.

The thing now I cannot scroll over the images because they are set as display fixed, so i cannot scroll horizontally over them. Dunno what i am missing here...

[PointC]

Sorry, I'm still confused about what this should be doing. I'm also not seeing any images. Just a yellow box. 

 

Are the images part of the scroll animation? Or does the line animate to the images and then the user can navigate the images? If the images are not part of the scroll, how does the user control it?

 

 

[Mental Republic]

Sorry about that, the whole thing is letting the line be completed before the images (i just changed the images for yellow bricks) gets moved. The line gets completed when the images are not set as set pin, but i need those images to be fixed when the lines start drawing.