Horizontal scroll snap with different width and different scroll animation

[Subhankar]

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.

 

 

See the Pen gOEdjMV by subho0777 (@subho0777) on CodePen

[mvaneijgen]

Hi @Subhankar welcome to the forum!

 

I wanted to offer you some quick advice about how to get the most out of these forums... Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

I've written a guide how to create a card stacking effect. It. explains the thought process how you could go about creating the setup to create any effect you want, so also this effect. Check it out. Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

This demo by @Carl could be a good starting point:

 

Happy Tweening!

[Subhankar]

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. 

[mvaneijgen]

That is the biggest people have when working the tools. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Check out this demo from my guide. It already is 80% what you want, you can even uncomment the ScrollTrigger code to see how it would work on scroll. Then it will be just the fact of laying out all the elements like you want and building the animation. And this guide walks you through how you could do this 

 

 

There is not going to be a demo that is 100% what you want, that is where you as he developer come in and have to tweak the properties to get them to do what you want. 

 

See the Pen ExMYQyO by mvaneijgen (@mvaneijgen) on CodePen

 

[Subhankar]

On 2/12/2024 at 1:41 PM, mvaneijgen said:

That is the biggest people have when working the tools. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Check out this demo from my guide. It already is 80% what you want, you can even uncomment the ScrollTrigger code to see how it would work on scroll. Then it will be just the fact of laying out all the elements like you want and building the animation. And this guide walks you through how you could do this 

 

 

There is not going to be a demo that is 100% what you want, that is where you as he developer come in and have to tweak the properties to get them to do what you want. 

 

 

 

 

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.

[GSAP Helper]

Have you enabled ScrollTrigger by uncommenting the code as suggested? Just fork the pen and start building your project to do what you want, if you get stuck be sure to post back here and we're are happy to take a look at your code.

 

See the Pen ExMYQyO by mvaneijgen (@mvaneijgen) on CodePen

 

We love to help you with your project, but we are not here to build it for you. If you're just looking for someone to build it for you,  you're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[Subhankar]

1 hour ago, GSAP Helper said:

Have you enabled ScrollTrigger by uncommenting the code as suggested? Just fork the pen and start building your project to do what you want, if you get stuck be sure to post back here and we're are happy to take a look at your code.

 

 

 

 

We love to help you with your project, but we are not here to build it for you. If you're just looking for someone to build it for you,  you're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

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.