Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
will@engage

ScrollTo plugin - callback on interrupted tween

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

Ahh, ok now I get it :D

 

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

 

Happy Tweening!!

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×