SandraMG

Thank you so much!! I was also testing out with the timeline first.. But obvious i created the tweens twice..

Hi, I'm new to GSAP. I want to animate to elements thats starts from different positions and moves towards eachother. I also want to implement a play and pause functionality. The problem I can't get the animation to work inside the event button clicked function. Should it just not be possible to refer to the createted tween? I want the elements to fire of on the same time. var btn_play = document.getElementById("btn_start"); var btn_pause = document.getElementById("btn_pause"); var btn_restart = document.getElementById("btn_restart"); tween = TweenMax.to("#ship1", 3, {y: 150, ease: Power0.easeNone}); //trying to call for on of the two elements. //GSAP Animations TweenMax.set("#ship1", {x: 120, y:10}); TweenMax.set("#ship2", {x: 120, y:400}); btn_play.addEventListener("click", function() { tween.play(); //not working TweenMax.to("#ship1", 3, {y: 150, ease: Power0.easeNone}); //working TweenMax.to("#ship2", 3, {y: 170, ease: Power0.easeNone}); //working }); btn_pause.addEventListener("click", function() { //To pause tweens }); btn_restart.addEventListener("click", function() { TweenMax.set("#ship1", {x: 120, y:10}); TweenMax.set("#ship2", {x: 120, y:400}); });