Jump to content
Search Community

StaggerTo() : duration as a function

JackIsJack44 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

Hi,

 

Is there a reason why we can't use a function instead of a number with the duration parameters in StaggerTo() ?

 

Here is a change I made in TweeMax.js to make what I wanted.

 

And here is a quick example :

https://animation-lover.glitch.me/

(click button 'Performances')

 

 

 

 

2019-06-10 20_20_37-Window.png

  • Like 1
Link to comment
Share on other sites

This just a wild guess but I think it's because you're not directly passing a function you're passing a conditional statement. Maybe try wrapping it in a function and returning the value. Something like this:

function () {
  return (ternary operator);
}

 

Link to comment
Share on other sites

You actually can do it by using the "cycle" special feature in the stagger methods. Kinda like: 

 

TweenMax.staggerTo(".box", 1, {
    x:1000,
    cycle:{
        duration:function(i, target) { //<-- this is the key. 
            return i * 1 + 0.5;
        }
    }
});

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

Thanks you Jack - and Visual-Q.

 

I am using this standard solution now :-)

 

But I don't understand why there is this extra-object 'Cycle' because

1/ we can customized 'x', 'y' by object in "vars parameters", without using cycle.

2/ this can lead to conflit between parameters (in your exemple, "1 sec" versus "i * 1 + 0.5")

3/ and why the name is 'Cycle' ? There are no repeating processes with it.

 

Anyway ! Thanks you again :)

 

 

 

 

 

Link to comment
Share on other sites

10 hours ago, JackIsJack44 said:

But I don't understand why there is this extra-object 'Cycle' because

1/ we can customized 'x', 'y' by object in "vars parameters", without using cycle.

2/ this can lead to conflit between parameters (in your exemple, "1 sec" versus "i * 1 + 0.5")

3/ and why the name is 'Cycle' ? There are no repeating processes with it.

 

  • Yes, GSAP searches the "vars" object for function-based values. However, the duration isn't in the vars object - it's a standalone parameter. 
  • "cycle" was originally intended to cycle through a set of values (as the page @mikel referred to explains) but then we added features to it to accommodate function-based values too. That pre-dated function-based values in the regular "vars" object. 
  • I'm working on GSAP 3.0 and I'll definitely make duration accommodate function-based values. Don't worry. I'm pretty excited about 3.0. It'll be several months before it's ready, though. For now, I'd recommend just using cycle.
  • Like 3
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...