Jump to content
Search Community

Can't play tweens inside function

SandraMG test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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



Link to comment
Share on other sites

You definitely can do it that way ... but you'll want to create your Tweens once and reference them


See the Pen XZwodm?editors=0010 by sgorneau (@sgorneau) on CodePen


You might find it just a bit easier to do this with a Timeline because you only have to worry about starting/stopping/reseting one Timeline rather than two tweens.


See the Pen EQzGQZ?editors=1010 by sgorneau (@sgorneau) on CodePen


  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...