How to increment variable in timeline?

[ninmorfeo]

Ok, I'm making progress, but i need your help one more time....now I'm stuck on the last instruction you see in the timeline.
i have ten cards and I would like all the cards to go simultaneously to the specified x position (animating the left property) but with an offset of 10px in y from each other (animating the top property).

how do i increment the distance_y variable?
 

var distance_y = 10;    
    
    function anim_card_shuffle(chi) {
        var a_c_f = new TimelineMax();
        a_c_f.staggerTo(chi, 1, {
                top: 150,
                opacity: 1,
                ease: Elastic.easeOut.config(1.1, 0.6)
            }, 0.3)
            .staggerTo(chi, 1.5, {
                left: '-=70',
                rotationY: 180,
                rotationX: -10,
                boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)',
                ease: Power4.easeOut
            }, 0.05)
            .staggerTo(chi, 0.5, {
                left: '+=50',
                ease: Power4.easeOut
            }, 0.05, "-=2.2")
        
           .to(chi, 0.5, {
                left: 550,
                top: '-='+distance_y,
                ease: Power4.easeOut
            }, "-=0.5")
        
        return a_c_f;
    }
    

anim_card_shuffle('.empty')

can you help me ?

[ninmorfeo]

or I asked a stupid question or is it more complicated than when I thought
can anyone help me?

[OSUblake]

Please provide a demo whenever you have a question. It's very hard to understand animation related questions without seeing it.

 

 

First, I would never animate left and top. It's much better to use x and y instead.

 

I think you want to use a function based value.

https://greensock.com/function-based

 

[PointC]

Yeah, I was gonna say the same thing about the demo. We know everything is new and exciting for you with GSAP and we're not trying to be harsh, but it is so much easier to provide assistance with a basic demo. Looking at a block of code usually doesn't provide the context we need to offer the best solution.

 

Thanks and happy tweening.

[ninmorfeo]

it was exactly what I was looking for(function based value) ... sometimes clues are enough for me: P
next time I'll try to use codepen thanks a lot for now