Jump to content
Search Community

Pause the set method

lee989 test
Moderator Tag

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

I used the superscrollorama plugin, but hopefully you can help.

 

The way the superscrollorama plugin works, is that when you "add a tween", it immediately pauses that tween. Obviously it works fine when you doing animation, as it can pause the tween quickly enough that it doesn't run.

 

However TweenMax.set() runs immediately and cannot therefore be paused.

 

Unfortunately (as annoying as it is), the plugin doesn't allow me to hook into the scroll watcher to manually fire the tween when i want to, so i have to use what the plugin provides.

 

I was thinking about making the "to" method just run very quickly that no one would notice, but i guess then you get into a gambling game of whether the plugin can call the pause method before the tween executes and does the "set", and of course having the duration low enough so that it appears like a "set".

 

Hopefully that describes my problem well... Can someone advise on how best to work around the issue? If all else fails i'll just modify the plugin to allow me to hook into the scroll watcher and run non tween functions, but i'd rather keep the vendor script un-modifed.

Link to comment
Share on other sites

HI and welcome to the Greensock forums.

 

The issue is not superscrollorama, just the way set() instances work.

 

A set() instance is a shorthand method for a zero duration tween, like this:

//a zero duration to() instance
TweenLite.to(element, 0, {vars});

//a set instance
TweenLite.set(element, {vars});

Both instances are equal and they're both completed, so to speak, as soon as the JS code is executed.

 

What you can do is use the immediateRender property in the vars in order to avoid the set instance being completed as the code is executed. Like that the instance will be completed upon scroll:

controller.addTween('#elementId',
  TweenMax.set(element, {vars, immediateRender:false})
);

Rodrigo.

Link to comment
Share on other sites

Hey rodrigo, didnt see that var property in the docs, must have missed it in my various scrolls through!

 

Thanks, that solved the problem (although i had to add a 0 pixel span marker for the position, as the css class re-positions the element, which was then causing it not to fire! took me a while to work that one out :P)

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...