Function-based values on staggerTo

[ninmorfeo 6 Likes (Newbie)]

the upadate method of the variables I used in tweenMax.to does not seem to work well with the stagger method, perhaps because it is called only once and therefore does not have a control index (it would seem).

In fact, if I try to use console.log in the following function for the X property, it always returns the value 0.

 

Unable to rely on index, is there another way to calculate different X values for each iterated object?

      var a_c_f = new TimelineMax();
        a_c_f.staggerFromTo(chi, 1, {
                x: function (index, target) {
                    console.log(index)
                    new_x=200+((index+1)*35); 
                    return new_x
                    },
                y: 250,
                rotationX: 10,
                rotationY: 0,
                rotationZ: 0,
                scale:1,
                opacity: 0,
                boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
                ease: Elastic.easeOut.config(1.1, 0.6)
            
            }, {
                x: function (index, target) {                        
                     new_x=200+((index+1)*35);                  
                        return new_x
                    },
                y: 140,
                rotationX: 10,
                rotationY: 0,
                rotationZ: 0,
                scale:0.7,
                boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
                opacity: 1,
                ease: Elastic.easeOut.config(1.1, 0.6)
            
            }, 0.3)

[OSUblake 9,990 Likes (Superhero)]

54 minutes ago, ninmorfeo said:

the upadate method of the variables I used in tweenMax.to does not seem to work well with the stagger method, perhaps because it is called only once and therefore does not have a control index (it would seem).

 

Yes, it's called only once. For stagger you need to use cycle. Check out the docs for cycle... (at the bottom)

https://greensock.com/docs/TimelineMax/staggerTo

 

And this...

https://greensock.com/cycle

 

Also, be sure to check out the learning section. 

https://greensock.com/learning

 

 

[ninmorfeo 6 Likes (Newbie)]

thanks a lot

[ninmorfeo 6 Likes (Newbie)]

it work great!

 

function init_x_pos() {
            var valore = [];
            var new_x = 150;
            for (i = 0; i <= n_carte_totali; i++) {
                new_x += 35;
                valore.push(new_x)
            }
            return valore;
        }

        var a_c_f = new TimelineMax();
        a_c_f.staggerFromTo(chi, 1, {
                cycle: {
                    x: init_x_pos()
                },
                y: 250,
                rotationX: 10,
                rotationY: 0,
                rotationZ: 0,
                scale: 1,
                opacity: 0,
                boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
                ease: Elastic.easeOut.config(1.1, 0.6)

            }, {
                cycle: {
                    x: init_x_pos()
                },
                y: 140,
                rotationX: 10,
                rotationY: 0,
                rotationZ: 0,
                scale: 0.7,
                boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)',
                opacity: 1,
                ease: Elastic.easeOut.config(1.1, 0.6)

            }, 0.3)