GSAPを使ってSVG要素をアニメ化する

Question

私は、ブラウザゲーム用のスライドがほとんどないインタラクティブなSVGインフォグラフィックを作成することに専念しています。前/次のボタンまたは特定のステップをクリックすると、svg全体が正しいステップにアニメートされます。コードの面では

が、これは私が持っているものである：ここでは

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); 
    }; 

} 

私が取得しようとしていますカードされています

は、私は（this.hands.find('.card'); jqueryのメソッドを使用してそれらを取得することができています私はコンソールでそれらを見ることができます）、私はそれらをアニメートできません。私はさまざまな属性（不透明度、x、y、左など）をアニメーション化しようとしましたが、何も起こりません。

私はthis.hands.find('.card').hide()を実行して、jQueryを使用してCSSを変更できますが、なぜTimelineLiteがここで動作しないのですか？私もこの方法を試してみました：

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 }); 
} 

しかし、まだありません成功...興味深いのは、私はトゥイーンのonCompleteのコールバックを添付するとき、彼らは解雇されていることであるが、絶対に何も画面に移動しません。すべてhereをチェックアウトすることができます。

事前にお手数をおかけしていただきありがとうございます。ご意見をお待ちしております。

Answer 1

タイムラインがどのように機能するかを誤解している可能性があります（または、私はあなたの意図を誤解している可能性があります）。すべてのトゥイーンと同様に、タイムラインはデフォルトで即座に再生を開始します。したがって、1つのタイムラインを使用していて、ユーザーインタラクションに基づいてそこにすべてのトゥイーンを押し込んでいる場合（作成時から作成時までの経過時間を意味します）、再生ヘッドには上級者。私はそれがあなたのトゥイーンをほぼすぐに最終状態にジャンプさせる原因になっていると確信しています。これはバグではなく、物事がどのように働くのかということですが、ある状況で行動を調整してより直観的にするロジックがGSAPにあります。

私はいくつかのオプションを参照してください。

1. だけではなく、TimelineLiteのTweenMaxを使用します。 TweenMax.staggerTo（...）やTweenMax.to（...）と同様です。
2. または、世界中のすべてのトゥイーンの代わりに各ユーザーインタラクション用のTimelineLiteを作成するだけです。そうすれば、あなたはすぐにそれを設定し、期待どおりにプレイします。

本当にしたい場合はグローバルタイムラインを1つ使用できますが、一度にすべてではなく各ユーザーインタラクションにトゥイーンを挿入する場合は、再生ヘッドを管理する必要があります。

まだ問題が解決しない場合は、GSAP専用フォーラム（http://greensock.com/forums/）に投稿することを躊躇しないでください。コードペーンまたはjsfiddleのテストケースを減らして何が起こっているのか、その変更がどのように結果に影響するのかについて説明します。

ハッピートゥイーン！