Animating SVG elements with GSAP

Question

I am tasked with creating an interactive SVG infographic with few slides for a browser game, it has 5 steps total. When you click prev / next buttons or a specific step, the whole svg should animate itself to the correct step.

In terms of code, this is what I have:

function Slide() {

    // Cache all top-level svg elements for later use
    this.el = $('svg#betfair-slider');
    this.hands = this.el.find('#hands_8_');
    this.cardsDesk = this.el.find('g#center-cards');
    this.textContainer = $('.step-text');

    // Use a shared timeline across all slides, so there are no overlapping tweens
    this.tween = new TimelineLite();
}

function Slide2 () {

    // Inherit from the main slide
    Slide.call(this);

    // each slide has its own supporting explanatory text
    this.html = [
        '<h3>Preflop</h3>',
        '<p>Amet sit lorem ipsum dolar</p>'
    ].join('');

    // the main openslide method
    this.openSlide = function() {
        // find the cards that need to be animated for this specific slide
        var cards = this.hands.find('.card');
        // fade out each card
        this.tween.staggerTo(cards, 0.2, { opacity: 0 }, 0.2);
        // Render supporting text
        this.textContainer.html(this.html);
    };

}

Here are the cards I am trying to get:

I am able to fetch them using the this.hands.find('.card'); jquery method (I can see them in the console), but I just can't animate them. I have tried animating different attributes (opacity, x, y, left, etc), but nothing happens - nothing moves on the screen.

I am able to do this.hands.find('.card').hide() and change the css using jQuery, but why TimelineLite doesn't work here? I also tried this approach:

var cards = this.hands.find('.card');
for (var i = cards.length - 1; i >= 0; i -= 1) {
    var card = cards[i];
    this.tween.to(card, 0.2, { opacity: 0 });
}

But still no success... The interesting thing is that when I attach an onComplete callback on the tweens, THEY ARE fired, but absolutely nothing moves on the screen. You can check out everything here .

Thanks for the help in advance, any suggestions are more then welcome.

Answer 1

I think you might be misunderstanding how timelines work (or perhaps I'm misunderstanding your intent). Like all tweens, timelines start playing immediately by default. So if you're using one timeline and shoving all your tweens in there based on user interaction (meaning time elapses between when you create it and when you populate it...and populate it more...), its playhead will already have advanced. I bet that's causing your tweens to jump to their end state almost immediately. That's not a bug - it's how things are supposed to work, although there's some logic in GSAP to adjust behavior in certain circumstances to make it more intuitive.

I see several options:

1. Just use TweenMax instead of a TimelineLite. Like TweenMax.staggerTo(...) and TweenMax.to(...).
2. Or just create a TimelineLite for each user interaction (instead of one for ALL of your tweens globally). That way you'll populate it right away and it'll play as you expected.

You could use one global timeline if you really want to, but you might just need to manage its playhead if you're going to be inserting tweens on each user interaction rather than all at once.

If you're still having trouble, don't hesitate to post in the GSAP-dedicated forums at http://greensock.com/forums/ and it's be super helpful if you included a codepen or jsfiddle reduced test case so that we can tinker and very quickly see what's going on and how the changes affect the result.

Happy tweening!