Once scroll then cover the full screen section

[Narendra Verma]

Hello,

 

I am using scrollTrigger. What I am doing is, once the user scroll then i have to scroll the below section at the top. As of now if I half scroll then it's automatically cover the screen.

See the Pen MWyQeOd by Narendra_verma (@Narendra_verma) on CodePen

[Richard1604]

hello Narendra,

 

it looks like you are using the snap option in your scrollTrigger.

You can find a full description of the snap option in the scrollTrigger documentation.

I'm not sure what you want to achieve but you can either modify the snap or remove it as needed.

 

 

 

[Narendra Verma]

@Richard1604, When user scroll one then notice below section reach the top.

Edited September 8, 2020 by Narendra Verma
I removed the example link

[Richard1604]

hi again,

does this post help?

 

 

[Narendra Verma]

@Richard1604, Actually What I am doing is, I have to scroll the first 5 section  from bottom to top then once the sixth section reaches on view port then I have to scroll his rows horizontally. Once complete all the rows then start again  reaming section from bottom to top.

 

I updated the codepen.

[Richard1604]

hello again Narendra,

I suggest that you read the ScrollTrigger documentation and look at the some of the many codepen examples which are available which include horizontal scolling, pinning and snapping.

 

[Narendra Verma]

@Richard1604, I found one example here

See the Pen JjGMzdm by emanboogie (@emanboogie) on CodePen

 

I am trying same like this but there are lots of code in this

 

[Richard1604]

hi Narendra,

yes there is a lot of code here.

As I suggested earlier I advise you to look at the Greensock documentation and Learning center for basic examples on how to configure scrollTrigger.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

You can also search google for "codepen ScrollTrigger" if you don't find the examples and demos sufficient.

I always like to be helpful but I just don't have the time to build out a complex requirement for you. 

[Narendra Verma]

@Richard1604, Yes, I started learning. I can understand this is not a easy requirement. I develop the vertical scroll now I am learning to the pin one of the section and then scroll horizontally.

[Narendra Verma]

@Richard1604, I tried and i found the solution but it's not 100%.

 

I mean when I reach sixth section then rows will come from right to left. Now I have two issues

1) I have to scroll multiple times then it's reach on left side.(I want in one scroll)

2) I am getting only four rows but I have five rows.

 

Can you help me out with this issue?

 

 

Edited September 8, 2020 by Narendra Verma
I forgot to add the codepen link but this is the same link which i added first time when I ask the question

[Narendra Verma]

Would you help me out in this issue?

[ZachSaucier]

@Narendra Verma Is there something conceptually that you don't understand? A demo has already been provided for how to do what you're trying to do. Unfortunately we don't have the capacity to help out with every aspect of your project.

[Narendra Verma]

@ZachSaucier, I checked the Richared1604 demo link. That link is only for vertical scroll. I am trying vertical and horizontal both. I am getting two issues which I shared in the above comment. I am trying to learn scrollTrigger.

 

I haven't found the solution that's the reason I ping here