Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to increment variable in timeline?

Recommended Posts

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;


can you help me ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.



  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
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.