How can I increase the speed of ScrollTrigger snap?

[sagexiang]

Please tell me how to increase the snap speed. Capture is too slow now. And how to limit the user to move only one block to the left at a time when the user slides the page quickly?

See the Pen VwRQXxr?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen

[GreenSock]

For the speed, just use an object for the snap and define a duration: 

See the Pen OJqQwZo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Just beware that it has to wait until natural scrolling stops for a brief moment before it begins the snapping motion. Otherwise, it could interfere with user interaction. 

 

4 hours ago, sagexiang said:

And how to limit the user to move only one block to the left at a time when the user slides the page quickly?

I'm not sure what you mean here. Are you saying you literally want to FORCE the user to not be able to drag the scrollbar in past certain amounts? That sounds like a terrible UX, sorry. As the user, I'd hate it if a web site did that to me. But perhaps you want to eliminate the scrollbar altogether and instead just use scroll-like events to trigger animations. That's what the Observer plugin is for. 👍

[sagexiang]

11 hours ago, GreenSock said:

对于速度，只需使用一个对象进行捕捉并定义持续时间： 

 

 

 

请注意，它必须等到自然滚动停止一小会儿才能开始捕捉运动。否则，可能会干扰用户交互。 

 

我不确定你在这里的意思。您是说您确实想强制用户无法拖动滚动条超过一定的量吗？抱歉，这听起来像是一个糟糕的用户体验。作为用户，如果网站对我这样做，我会讨厌的。但也许您想完全消除滚动条，而只使用类似滚动的事件来触发动画。这就是观察者插件的用途。 👍

I really like scroll-snap-stop: always in CSS Scroll Snap~ But I think you are right. Having to capture pauses one by one may not be liked by users~ Thank you so much! The United States is really great, we are very envious of it. When I develop my product, I will definitely thank you very much and buy premium membership~❤️👍👍👍👍👍I want to add a small dot to the switch to indicate the current one. Is there any good way to implement it? As shown in the picture~

[sagexiang]

I want to know: There are 4 panels in total, why do only 3 move to the left? Is this dictated by the underlying code?

[sagexiang]

12 hours ago, GreenSock said:

Just beware that it has to wait until natural scrolling stops for a brief moment before it begins the snapping motion

Can the natural scrolling stops response time be controlled?

[GreenSock]

No. It literally has to fully stop before ScrollTrigger can safely begin its snapping. It's not a deficiency in ScrollTrigger - it's a logic thing. 

[GreenSock]

21 minutes ago, sagexiang said:

I want to know: There are 4 panels in total, why do only 3 move to the left? Is this dictated by the underlying code?

I don't understand the question. Are you saying you want the 4th panel to fly off the screen to the left at the end too? So the screen would be totally empty? You can get almost any effect that you want...I'm just not clear on what you're asking. If there are 4 panels, you'd naturally only want 3 of them to move off-screen so that you're never left with an empty screen, right? 

[GreenSock]

35 minutes ago, sagexiang said:

I want to add a small dot to the switch to indicate the current one. Is there any good way to implement it?

Sure, lots of people do that. It's beyond the scope of help we can provide for free in these forums. Maybe look around in the CodePen collections at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. Give it a shot and if you get stuck, you can post a minimal demo here with a GSAP-specific question. Good luck!

[sagexiang]

Is this code written correctly? Is there a better way to write it?

 

tl.to(".items li .item:first-child", {
        duration: 1,
        xPercent: 100,
        yPercent: -20,
        stagger: 1,
      })
      .to(".items li .item:last-child", {
        duration: 1,
        xPercent: -100,
        yPercent: 20,
        stagger: 1,
      }, "<");

[sagexiang]

2 hours ago, GreenSock said:

我不明白这个问题。您是说您希望第四个面板在最后也从屏幕左侧飞出吗？那么屏幕会完全空白吗？你几乎可以获得任何你想要的效果......我只是不清楚你在问什么。如果有 4 个面板，您自然只希望其中 3 个移出屏幕，这样您就不会留下空屏幕，对吗？ 

What you said is right, I just want to know the reason~

 

why is not this?

snap: 1 / (sections.length - 1) = 1 /3 

[GreenSock]

17 minutes ago, sagexiang said:

Is this code written correctly? Is there a better way to write it?

 

tl.to(".items li .item:first-child", {
        duration: 1,
        xPercent: 100,
        yPercent: -20,
        stagger: 1,
      })
      .to(".items li .item:last-child", {
        duration: 1,
        xPercent: -100,
        yPercent: 20,
        stagger: 1,
      }, "<");

I don't understand what you're asking. If you need help, please provide a minimal demo (like a CodePen) and be very specific about your question. 

 

Isn't each of those only selecting one element? If so, why do you have a stagger applied? It doesn't hurt anything - it just seems pointless. 

14 minutes ago, sagexiang said:

What you said is right, I just want to know the reason~

 

why is not this?

snap: 1 / (sections.length - 1) = 1 /3 

Again, I don't understand what you're asking. Yes, if sections.length is 4, then 1 / (sections.length - 1) would be 1 / 3.