Subhankar

Yes, I tried but didn't work. Anyway, I resolved the issue with the help of ScrollTrigger.observe and created trigger events to animate section by section. Thanks for your help again. Yes, of course, I was not looking for the exact code but some guidance on the right approach but later I found myself after trying so many options.

Thanks for your awesome reference but not relevant as a solution that I am looking for. I am not getting that where is the horizontal scroll interaction in your reference but you are suggesting the same reference again and again.

Thanks for the help, but none of the solutions is relevant to me as the animation I am looking for combination of two animations while scrolling horizontally.

Hello everyone, and thanks in advance for help! I am trying to create horizontal scroll animation with 3 main section where first section should be 50% width and other 50% should be 50% of first image in second section. Right now I have created with 5 sections and same is working fine if there is not different concept for middle section. On load first div appears with 50% width and 50% of second div is visible in viewport Once middle div appears in viewport it should have 3 inner divs scrolling one by one Second div on viewport initially After scrolling one by one image should move left with text appearing left aligned After completion of the above animation, the second div should swipe left and the third div should appear. having different animations on it. https://codepen.io/subho0777/pen/gOEdjMV