[Long animations jumping at the start/end when using easing]

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

[Long animations jumping at the start/end when using easing]

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

See the Pen OXBzWW by willblackmore (@willblackmore) on CodePen

[Accessing Draggable public methods]

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

[Accessing Draggable public methods]

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?

[Accessing Draggable public methods]

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

[ScrollTo plugin - callback on interrupted tween]

Hi Jack,

 

Thanks for this, works a treat!

[ScrollTo plugin - callback on interrupted tween]

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

[ScrollTo plugin - callback on interrupted tween]

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

[ScrollTo plugin - callback on interrupted tween]

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