Jump to content
GreenSock

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

TimelineMax sequences wokflow

Recommended Posts

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    

Link to comment
Share on other sites

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. ?

  • Haha 2
Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

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

 

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.
×