Search the Community
Showing results for tags 'mousewheel'.
I thought this was a pretty straightforward question, so I didn't make a demo. Lmk if it would help. Anyways, I'm wondering if there is any recommended way to simulate dragging a draggable with throwprops+snaps using two-finger scrolling on a laptop trackpad. I don't want gesture detection, but instead want to real time control of the draggable, just like how it would be if you were to drag on a mobile device. So far the only method I've thought of is to directly read the scroll event and use those values to create a throwprops tween and update the draggable at some point so that the snap settings take effect. I'd also have to figure out how to cut off scroll values created by any client side inertial scrolling shenanigans.Later on I'd also want to figure something out for a standard mousewheel as well. I know the easy way would just be to use scroll-jacking, but that makes for a terrible user experience. Any ideas?
I’m working on a site that has full height sections. It is laid out as one big page with a few sections. The user has two options to navigate the site: They can use the mouse wheel to go back and forth to the next/previous “section”. They can quickly tween to which ever section they choose via the standard off-canvas menu on the side. Codpen Here: https://codepen.io/kreendurron/pen/ryBrLY/ The problem I'm having is that if you scroll the wheel quickly multiple mouse wheel events fire before the animation can complete its tween. This interferes with the next sections animations. You can see this in the console as shown in the attached screenshot. I hope someone can point me in the right direction as to how I can temporarily disable the mouse wheel until the entire animation has played out and is ready to accept another scroll wheel event. Thanks, Nicholas Brown
Hi, I have a bit of a unique issue that I'm having trouble solving. The site I am working on is kind of like a big page, where the user mouses around and it explores the page. I got that working (the codepen example is severely simplified). There is also a second functionality - a traditional navigation menu that when the user uses it, they tween directly to the section of the site. I have this working as hoped as well, and the user can mix up using the menu and mousing around. It comes apart in the following situation. If the user chooses to navigate with the menu and then choose a menu item, and they activate their mouse while it's still tweening, it gets very confused and jumps around. I came up with what I thought was a clever idea (turns out it doesn't work ), which was have the tweens be of #sliding .row and on opening the menu, remove that outer div. Even though it does remove the div, the timeline still moves to the next label on the mouse events. Hhhm. I'm wondering if there's any way to disable a timeline temporarily. I tried.killTweensOf, but that doesn't really work, because what I want to do is temporarily disable the timeline so it doesn't respond to the mouse event. Thank you!
Hi, I have a pageless site that I'm working on, that has a slightly unusual navigation/ flow. I've got it working almost as it's supposed to. There's two main ways for a visitor to navigate the site. Note: the pages/sections are not presented in a linear fashion. 1. By scrolling they will move on to the next "page" or section. 2. Through the navigation menu they will go directly to the section The issue I am having is can't quite figure out how to make the whole thing loop continuously. When they get to page 9 and they continue to mouse, I'm trying to get it so they just go straight back to page 1, and if they mouse up from page 1 it will take them to slide 9 Any guidance is much appreciated!