ScrollTo plugin - callback on interrupted tween

[EngageDevs]

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

[Dave Stewart]

You should just be able to listen to the window scroll event then .kill() the tween, no?

var tween = TweenLite.to(window, 2, {scrollTo:{y:400}, ease:Power2.easeOut});

$(window).on('scroll', function(){ tween.kill(); } )

I haven't tested that, but that would be my first thought.

[EngageDevs]

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

[Dave Stewart]

I'd probably just fork it on GitHub and see about adding my own:

 

https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/ScrollToPlugin.js#L75

 

This is how TweenMax handles callbacks, so just copy / amend that:

 

https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L325

 

...using something like onInterrupt, onInterruptScope, and onInterruptParams.

[Rodrigo]

Hi Will and welcome to the GreenSock forums.

 

Dave is completely right, the best approach would be to use the scroll event to check if the tween is active and then attach the code you want to execute if the tween is killed (as you mention, automatically by the ScrollTo plugin). That has the cost of executing that conditional logic on every scroll, shouldn't be too much though. You could bind the scroll event handler when the tween starts and remove it when is finished/killed.

 

Dave's second approach would be mi choice, create your own callback and since what you're after is quite simple, it shouldn't be too much work.

 

On a side note you're the first user that comes with that particular request (that I can remember at least), and if the cost in conditional logic, performance and file size isn't too much, perhaps Jack could include it in the next release of the plugin.

 

Rodrigo.

[EngageDevs]

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

[Dave Stewart]

if the cost in conditional logic, performance and file size isn't too much, perhaps Jack could include it in the next release of the plugin

 

I suspect that you'd only ever have one tween managing a page scroll, rather than

See the Pen gBplw by davestewart (@davestewart) on CodePen.

like you might have in a game, so couldn't imagine a single object check for a vars.onInterrupt property would be a killer!

 

Unless of course you're building the latest in hardware-accelerated page-scrolling games

[Dave Stewart]

Also, I'd probably opt for an event named "onScroll", as that's what's actually happening.

[Rodrigo]

Also, I'd probably opt for an event named "onScroll", as that's what's actually happening.

 

If you already have an instance with the ScrollTo plugin, an onUpdate callback does the same job:

TweenLite.to(window, 2, {scrollTo:{y:1500}, onUpdate:yourFunction});

// yourFunction gest called on every engine update while the instance is running

[Dave Stewart]

Sorry, that's exactly what I meant - 

 

- onUpdate: fired by the plugin on every update

- onScroll: fired by the plugin in response to a user scroll

 

Maybe it's a little ambiguous then

 

Maybe onCancel? My thoughts were that "onInterrupt" feels a little wordy.

 

Anyway. Ignore me

[Rodrigo]

Ahh, ok now I get it

 

Well Jack could chew on it and see what could be done

 

Happy Tweening!!

[GreenSock]

Good conversation, guys. 

 

Since we named that feature "autoKill" (you can disable it with autoKill:false), how about something like onAutoKill:yourFunction? 

 

I have attached a preview of the upcoming version. Does this work well for you? 

ScrollToPlugin_1.7.4_preview.zip

[EngageDevs]

Hi Jack,

 

Thanks for this, works a treat!