EngageDevs

Hi everyone, Thanks so much for replying. I'll have a proper read through everything and let you know where I end up! Cheers, Will

Hey everyone! I have come across a small issue and was wondering if someone could help me sort it out. To quickly give some background: I'm building a simple app which randomly picks a person by spinning a wheel of names. The wheel spins a few times before eventually resting on the target. I've found that with longer animations and more complex easing equations the end of the animation jumps a proportion of the distance / rotation. I've recorded a couple of examples below: Easing: Power0.easeNone Easing: Expo.easeOut As you can see, at the end of the animation there is a tiny little jump. For the sake of the gif I've actually shortened the tween duration and reduced the amount of rotation. If I increase it the jump is even more pronounced. Take a look at the CodePen example as well which illustrates the issue. While setting up that example I also noticed that there is a jump at the beginning of the tween. Does anyone have any ideas of how to sort this? Thanks, Will

Hi Rodrigo, I'll see if I have time to put together a demo later today. Using update is half working though. Those values are now returned, but until I have interacted with the draggable element they are all set to 0. My bad! At some point while attempting to get everything working, I had placed the code which scales the scrollbar grip after Draggable was applied so it essentially had a width of 0. I still need to use .update(true) though, so thanks for that Thanks, Will

Thanks, I think I'm getting somewhere: console.log(Draggable.get($odds.scrollbar.grip).maxX); console.log(Draggable.get($scrollbar.grip).maxX); This returns a value, which is spot on, however, it only returns that value once the draggable instance has been interacted with for the first time. Is there a way to force these values to exist as soon as Draggable has been applied?

Hi All, I could do with some help! I'm using the draggable plugin to build a custom scrollbar for a horizontally scrolling element. It works great when dragging the scrollbar, but I also need to update the scrollbar if they scroll using a mouse or swipe with a finger. I'm attempting to access a few variables stored within the draggable instance, but I'm always returned undefined. Here's a simplified version of my code: var scrollbar = Draggable .create($scrollbar.grip, { type: 'x', bounds: $scrollbar.track, cursor: 'ew-resize', onDrag: scrollContent, onThrowUpdate: scrollContent }); This is where I'm getting lost. If I access scrollbar I can see some information stored, but not the three bits I need: max x min x current x (I can work all these values out myself, but as the work has already been done, and I just don't know how to access it, I'd rather not duplicate it and instead learn the right way.) $content .on('mousewheel', function(e){ $content[0].scrollLeft += e.deltaX; console.log(scrollbar.maxX); // This is undefined e.preventDefault(); }); Any ideas? Thanks, Will

Hi Jack, Thanks for this, works a treat!

Great, thanks for your help guys, I'll let you know how I get on

That would kill the tween though right? That functionality is already built into the ScrollTo plugin as far as I can tell. If the user scrolls while the tween is running it is killed instantly. What I'm after is a callback, like onComplete which I can use if the Tween doesn't make it to completion. For example: TweenMax .to(window, .4, { scrollTo: 0, onComplete: function(){ console.log('done'); }, onInterrupt: function(){ console.log('interrupted'); } }); That would be ideal. Thanks, Will

Hi, Can anyone help: I'm using the scrollTo plugin and I need a callback that will fire if the Tween is interrupted by the user manually scrolling. Does functionality like this exist or is it possible to create it? Thanks, Will