sagexiang Posted January 31 Share Posted January 31 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 31 Solution Share Posted January 31 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. 👍 Link to comment Share on other sites More sharing options...
sagexiang Posted January 31 Author Share Posted January 31 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~ Link to comment Share on other sites More sharing options...
sagexiang Posted January 31 Author Share Posted January 31 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? Link to comment Share on other sites More sharing options...
sagexiang Posted January 31 Author Share Posted January 31 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? Link to comment Share on other sites More sharing options...
GreenSock Posted January 31 Share Posted January 31 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. Link to comment Share on other sites More sharing options...
GreenSock Posted January 31 Share Posted January 31 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? Link to comment Share on other sites More sharing options...
GreenSock Posted January 31 Share Posted January 31 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! Link to comment Share on other sites More sharing options...
sagexiang Posted January 31 Author Share Posted January 31 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, }, "<"); Link to comment Share on other sites More sharing options...
sagexiang Posted January 31 Author Share Posted January 31 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 Link to comment Share on other sites More sharing options...
GreenSock Posted January 31 Share Posted January 31 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now