TimelineMax sequences wokflow

[ninmorfeo]

I have always used velocity.js for my animations and being new to the gsap world I still have to get used to how the animation sequences are linked.

I had already created this animation with velocity, but now I'm trying to replace the code using the gsap libraries.

So my current problem is that I have a series of cards that enter the table in sequence with a delay of 0.3 seconds one from the other.

In practice, the first line of the function I report below. I wish that once all the cards have entered the table, start the second statement that flip card one by one ( again with an associated delay).

What is the best way to proceed?

   function anim_card_shuffle (chi, time, time2) {
        var a_c_f = new TimelineMax();
        a_c_f.to(chi, 1, { top:150, opacity:1, ease: Elastic.easeOut.config(1.1, 0.6) }, "in_card").delay(time)
        .to(chi, 1.5, { rotationY:180, ease: Power4.easeOut }, "flip_card").delay(time2)
        return a_c_f;
    }

  $.each(carte_dorso, function (index) {
            time += 0.3;
            time2 += 0.5;
            
            anim_card_shuffle($('#id_' + index + '_card'),time,time2)

});

 

I think that once I understand the workflow I can go with my project: P    

[PointC]

I think you'd benefit from this post:

 

https://greensock.com/position-parameter

 

Happy tweening.

 

[GreenSock]

Another article I'd highly recommend is: 

https://css-tricks.com/writing-smarter-animation-code/

 

Let us know if things are still fuzzy. We'd be happy to help.

 

Enjoy!

[PointC]

Yeah that article is fantastic. I highly recommend it. ?

 

 I also hear the SVG Wars demo in that article will change your life because the guy that made it is so awesome. ?

[OSUblake]

9 hours ago, ninmorfeo said:

So my current problem is that I have a series of cards that enter the table in sequence with a delay of 0.3 seconds one from the other.

In practice, the first line of the function I report below. I wish that once all the cards have entered the table, start the second statement that flip card one by one ( again with an associated delay).

What is the best way to proceed?

 

 

I think what you might be looking for is some type of stagger e.g. staggerFrom, staggerFromTo, staggerTo.

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

 

 

See the Pen RzKdGa by osublake (@osublake) on CodePen

 

 

[ninmorfeo]

ok I understood that it is better to create objects first, assign a class and then decide whether to animate them in groups or singularly rather than refer to the ids of objects and iterate the animations as I did with velocity