Need some time of empty scroll or delay in horizontal scroll.

[Yagnik Patel]

Hello guys, Hope you all are well. I need some help with the horizontal scroll animation, I have used the same logic given in the codepen but I need some empty scroll time for each horizontal slide or more pin time while scrolling so that each slide can be seen properly. Hope you get it. Thanks in advance.

See the Pen oNVGjMm by Yagnikpatel (@Yagnikpatel) on CodePen

[mvaneijgen]

I see two horizontal sections D1 and D2 and you use a single tween to move the elements to some other position. I don't know where you would want to add a pause (empty scroll time) for your effect, but personally I would always create a timeline instead of a single tween. You never know if you want to add tweens in the future and separating the ScrollTrigger from the tweens make things so much easier to read. Right now I've just add an empty tween to the end of the time line of 0.5 seconds, so now your animation and the pause take up the same amount of scroll distance. 

 

See the Pen eYXGJOK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've written a guide how you could setup such animations. I called it stacking cards, but with the logic you can easily also create your effect, but have much more control. See example below. Hope it helps and happy tweening! 

 

 

See the Pen yLwzYdp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[codechirag]

Yes, I think mvaneijgen is right, you should use timeline mostly.

[Yagnik Patel]

17 hours ago, mvaneijgen said:

I see two horizontal sections D1 and D2 and you use a single tween to move the elements to some other position. I don't know where you would want to add a pause (empty scroll time) for your effect, but personally I would always create a timeline instead of a single tween. You never know if you want to add tweens in the future and separating the ScrollTrigger from the tweens make things so much easier to read. Right now I've just add an empty tween to the end of the time line of 0.5 seconds, so now your animation and the pause take up the same amount of scroll distance. 

 

 

 

 

I've written a guide how you could setup such animations. I called it stacking cards, but with the logic you can easily also create your effect, but have much more control. See example below. Hope it helps and happy tweening! 

 

 

 

 

Hi @mvaneijgen , Thanks for your response. I want to add delay for both horizontal screens D1 and D2, like delay after reaching D1 and also the same after reaching to  D2 screen. while I reach on each screen and it should be pinned for a few seconds or a few scrolls, Hope you got my point.

[mvaneijgen]

1 hour ago, Yagnik Patel said:

ike delay after reaching D1 and also the same after reaching to  D2 screen

Then check out this resource with the last pan I've shared. If you still need help please post a new minimal demo with what you've tried and where you are stuck.