GreenSock - multiples, pré-adolescents qui en découlent sur un seul objet

Question

J'anime la position d'un div, puis de nouveau à son origine avec une aisance différente:

var anim_a = new TimelineMax().to($(".mybox"), 3, {x: 400}).stop(); 
var anim_b = new TimelineMax().to($(".mybox"), 1, {x: 0, ease:Bounce.easeOut}).stop(); 

Le problème est, après les deux animations ont couru une fois, ils l'habitude plus courir, Pourquoi? et comment puis-je les répéter à la demande?

JSFIDDLE

Answer 1

var anim_a = function() { 
 
    var anm = new TimelineMax().to($(".mybox"), 1, { 
 
    x: 400 
 
    }).stop(); 
 
    anm.play(); 
 
} 
 
var anim_b = function() { 
 
    var anm = new TimelineMax().to($(".mybox"), 1, { 
 
    x: 0, 
 
    ease: Bounce.easeOut 
 
    }).stop(); 
 
    anm.play(); 
 
} 
 

 
$(".run-a").click(function(e) { 
 
    anim_a(); 
 
}); 
 

 
$(".run-b").click(function(e) { 
 
    anim_b(); 
 
});

.run-a, 
 
.run-b { 
 
    background: green; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.mybox { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> 
 

 
<div class="run-a">Go</div> 
 
<div class="run-b">Go back</div> 
 

 
<div class="mybox"></div>

je ne suis pas habitué à ce TimeLineMax. Encore j'ai fait un petit changement au code et maintenant son fonctionnement comme indiqué. Veuillez vérifier et confirmer si cela convient à votre contexte. Je viens de faire anim_a et anim_b comme deux fonctions avec l'opération de lecture inclus.