javascript - Animating SVG elements with GSAP -

i tasked creating interactive svg infographic few slides browser game, has 5 steps total. when click prev / next buttons or specific step, whole svg should animate correct step.

in terms of code, have:

function slide() {      // cache top-level svg elements 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 shared timeline across slides, there no overlapping tweens     this.tween = new timelinelite(); }  function slide2 () {      // inherit main slide     slide.call(this);      // each slide has own supporting explanatory text     this.html = [         '<h3>preflop</h3>',         '<p>amet sit lorem ipsum dolar</p>'     ].join('');      // main openslide method     this.openslide = function() {         // find cards need animated 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 cards trying get:

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

i able this.hands.find('.card').hide() , change css using jquery, why timelinelite doesn't work here? tried approach:

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

but still no success... interesting thing when attach oncomplete callback on tweens, fired, absolutely nothing moves on screen. can check out here.

thanks in advance, suggestions more welcome.

i think might misunderstanding how timelines work (or perhaps i'm misunderstanding intent). tweens, timelines start playing default. if you're using 1 timeline , shoving tweens in there based on user interaction (meaning time elapses between when create , when populate it...and populate more...), playhead have advanced. bet that's causing tweens jump end state immediately. that's not bug - it's how things supposed work, although there's logic in gsap adjust behavior in circumstances make more intuitive.

i see several options:

1. just use tweenmax instead of timelinelite. tweenmax.staggerto(...) , tweenmax.to(...).
2. or create timelinelite each user interaction (instead of 1 of tweens globally). way you'll populate right away , it'll play expected.

you use 1 global timeline if want to, might need manage playhead if you're going inserting tweens on each user interaction rather @ once.

if you're still having trouble, don't hesitate post in gsap-dedicated forums @ http://greensock.com/forums/ , it's super helpful if included codepen or jsfiddle reduced test case can tinker , see what's going on , how changes affect result.

happy tweening!