Rasper Posted June 11, 2020 Posted June 11, 2020 How do I create a similar snapping effect like Fullpage.js? Is it possible with the snapping property in ScrollTrigger? From what I've tried, it seems snapping is always initiated when the element has passed halfway the viewport. I would like a far quicker response, when only a few pixels have been scrolled. This is the snapping-effect I would like to create with ScrollTrigger: https://alvarotrigo.com/fullPage/extensions/parallax.html I've added a codepen to show what I've tried so far. See the Pen RwraVNO by kaspervdm (@kaspervdm) on CodePen. 1
ZachSaucier Posted June 12, 2020 Posted June 12, 2020 I actually just answered practically the same question here: Given snap only affects the end position of the scroll and doesn't kill off the normal scroll, you'd be better off using the callbacks of ScrollTrigger to fire off a ScrollTo animation instead (like I did in the thread above). To handle the layering you could use position: sticky instead of pinning since pinning messes up the scroll stuff: See the Pen NWxNEwY?editors=0010 by GreenSock (@GreenSock) on CodePen. Note that I used an index and calculation of where to scroll inside of the goToSection function because otherwise the scroll position is off when scrolling up due to position: sticky. EDIT: Note that this approach is a hack and I don't really recommend using it in most cases. ScrollTrigger is not built to scroll-jack like this. See my post below for more info. 1
BMateus Posted June 12, 2020 Posted June 12, 2020 I'm also trying ScrollTrigger and can't seem to snap vertically (and I'm still kind of green with GSAP). If I understand correctly, we should use the onEnter and onLeave events to trigger a ScrollTo animation, so it moves to the correct panel? (in your reply's Codepen, the animation has some faults sometimes, either the scroll stops responding or the animation is triggered back to start when moving backwards ).
ZachSaucier Posted June 12, 2020 Posted June 12, 2020 Hey @BMateus and welcome to the GreenSock forums. Try refreshing the page/demo. I believe I already fixed the issue going backwards in an edit. Let me know if that's not the case for you. Also note that if you don't need the layering you can use the demo in the linked thread (it's very similar but uses an element reference instead of a calculated position).
ZachSaucier Posted June 16, 2020 Posted June 16, 2020 I think the only way to do this reliably would be to hide the overflow while the animation is happening. See the Pen abdmXGV by GreenSock (@GreenSock) on CodePen. But this likely causes undesired effects in browsers that always show the scrollbar if there's scrolling. So you might consider hiding the scrollbar permanently in your site or using a custom scrollbar. 1
maxyoung Posted August 3, 2020 Posted August 3, 2020 On 6/12/2020 at 10:39 PM, ZachSaucier said: I actually just answered practically the same question here: Given snap only affects the end position of the scroll and doesn't kill off the normal scroll, you'd be better off using the callbacks of ScrollTrigger to fire off a ScrollTo animation instead (like I did in the thread above). To handle the layering you could use position: sticky instead of pinning since pinning messes up the scroll stuff: Note that I used an index and calculation of where to scroll inside of the goToSection function because otherwise the scroll position is off when scrolling up due to position: sticky. Hi Zach, I also encounter issues with ScrollTo error. On my first scroll down the page, there are no error popping up on DEV TOOLS. Errors sufface as I scroll up the page. Kindly advise what should i do to remedy the situation, thanks.
ZachSaucier Posted August 3, 2020 Posted August 3, 2020 3 hours ago, hugoyong said: Kindly advise what should i do to remedy the situation, thanks. Please create a minimal demo so that we can see what's going on and explain your issue, likely in a new thread:
Ryan Dejaegher Posted October 13, 2020 Posted October 13, 2020 Hey @ZachSaucier how's it going? I've found your demos really helpful. I've got a question about your layered pinning/ScrollTo demos. I'm having trouble when there is content above/below. I forked the demo and added a div with a height of 100vh above the pinned section. In this demo when I try scrolling it just tries to snap back to the top. See the Pen ZEObrdR by ryandejaegher (@ryandejaegher) on CodePen. How would you approach this kind of layout to accommodate sections above/below a pinned area I was hoping to use the ScrollTo plugin so that it could snap to that section.
ZachSaucier Posted October 13, 2020 Posted October 13, 2020 Hey Ryan and welcome to the GreenSock forums. You could do something like this: See the Pen rNLOdbB?editors=0010 by GreenSock (@GreenSock) on CodePen. 2
Ryan Dejaegher Posted October 13, 2020 Posted October 13, 2020 @ZachSaucier Awesome that should work! Would there be any advantage to creating an array of the panels and then using that for scrollTo? var panels = gsap.utils.toArray(".panel") function goToSection(i, anim) { gsap.to(window, { scrollTo: {y: panels[i].offsetTop + firstElem.offsetTop, autoKill: false}, duration: 1 });
unvs Posted October 13, 2020 Posted October 13, 2020 First of all, thanks for this, it does what I was looking for! I just have one question: Is it possible to make it just a little less "sensitive"? So that it will stop after the first section and require a new input to move to the next? When I scroll with my touchpad, it usually scrolls multiple sections. Maybe due to the scroll inertia of the touchpad?
Maz Posted November 21, 2020 Posted November 21, 2020 On 10/14/2020 at 3:27 AM, ZachSaucier said: I answered that above in this thread: Hi Zach, I copy and paste your HTML, CSS and JS, also used the resources of your example. My problem is when I am scrolling down: - Scrolling from Description to Section 1 is ok. - From section 1 jumping to Section 2, 3 and 4 without stopping. When I scroll back to top: - Scrolling from Section 4 to 3 is ok. - Then from 3 scrolling to Section 2, 1 and to the Description div without stopping. I have this problem with all other GSAP examples of ScrollTo but not with other plugins like fullpage.js Help please! I am using Chrome, on desktop and my page running in my localhost using XAMPP.
ZachSaucier Posted November 22, 2020 Posted November 22, 2020 Hey Creative Frog and welcome to the GreenSock forums. It's impossible for us to help debugging without a minimal demo so if you're seeking help please provide one. It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 1
wpexpert Posted December 1, 2020 Posted December 1, 2020 Hi Zach, With the help of this post i have created this: See the Pen NWRqLbd by Guido-WPExpert (@Guido-WPExpert) on CodePen. So i have a section that behaves regular. Then a section with two columns and in the right column i have the colored panels that will overlap each other. Followed by a regular section again. If i scroll it works. But i wan to have the colored panels snap into place. I can't figure it out. What i am trying to do is something like this: Kati Forner - Welcome (scroll down to Featured Projects ) Would really appreciate some help Thanks Guido 1
ZachSaucier Posted December 1, 2020 Posted December 1, 2020 Hey Guido, welcome to the GreenSock forums. Again, ScrollTrigger is not built for scroll jacking like this. It's not officially supported, the demos above (and in the thread I link to below) are experiments as to what is possible. Perhaps this thread is more relevant to what you're trying to do:
digitalfrci Posted January 15, 2021 Posted January 15, 2021 On 10/13/2020 at 9:32 PM, ZachSaucier said: is this possible to do one in horizontal ? Hey Ryan and welcome to the GreenSock forums. You could do something like this:
ZachSaucier Posted January 15, 2021 Posted January 15, 2021 7 hours ago, CADS - Team said: is this possible to do one in horizontal ? Sure, you'd apply the same technique to a scroller that goes horizontally and use horizontal: true.
kevchcm Posted June 27, 2022 Posted June 27, 2022 On 12/1/2020 at 8:33 AM, ZachSaucier said: Hey Guido, welcome to the GreenSock forums. Again, ScrollTrigger is not built for scroll jacking like this. It's not officially supported, the demos above (and in the thread I link to below) are experiments as to what is possible. Perhaps this thread is more relevant to what you're trying to do: I was checking this example and using the Macbook trackpack the scroll jumps 2 panels instead of one, do you know what may be causing that issue?
akapowl Posted June 27, 2022 Posted June 27, 2022 31 minutes ago, kevchcm said: I was checking this example and using the Macbook trackpack the scroll jumps 2 panels instead of one, do you know what may be causing that issue? Already addressed over in this other thread. 1
Cristian Front Posted June 13, 2024 Posted June 13, 2024 Something similar happens to me but I can't find the solution, I look at the answers above but it doesn't work for me, also the scrolling and tabs get buggy sometimes, I don't know how to make it look more fluid See the Pen yLWPEoK by Front-end-Dev-the-looper (@Front-end-Dev-the-looper) on CodePen.
Rodrigo Posted June 13, 2024 Posted June 13, 2024 Hi @Cristian Front / @Cristian Rojas You already created a thread for the same issue with a different user account: An answer has been provided there so please, let's keep the discussion in that thread so we can focus our attention in just one of them. Finally, please do not create more accounts with the intention of getting a faster answer. We thrive in answering every thread in less than 24 hours in order to provide our users with the best possible support, so creating one thread or replying in just one, is more than enough to get support in these forums. Happy Tweening!
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