Jump to content
Search Community

ScrollTo plugin - callback on interrupted tween

EngageDevs test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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.

Link to comment
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

Link to comment
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
Link to comment
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.

Link to comment
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 ;)

Link to comment
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
Link to comment
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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...