Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Updating tween variables

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 trying to get an animation to use different property values every time it plays.

I've put the values into variables and everything works fine using the default values the first time, but I can't figure out how to get the animation to read the new values that are created when you click a button.

var jumpHeight = 100;
var jumpTime = 1;
var boxcolor = "#00ff00";

var jumpBox = new TweenMax("#redbox", jumpTime, {y:(-jumpHeight), backgroundColor:boxcolor, ease: Power1.easeOut, repeat:1, yoyo:true});

//called when you click a button
function rePlay(){
  jumpHeight = jumpHeight+24;
  jumpTime = jumpTime-0.1;
  boxcolor = "#0000ff";

Is there a simple way to do this that I'm missing?

This codePen shows a simplified version of what I'm trying to do.

(The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)


See the Pen bdjoLv by misterjworth (@misterjworth) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


The reason why you can't pass new values to an existing GSAP instance is because once the Tween/Timeline is created it doesn't read new information you provide, specially for plugin values, such as any CSS property of a DOM element. This is by design to avoid constant read/write operations and keep things super fast.


As Diaco points one solution is to create the instance again and restart it. Another choice is the answer by Blake in the following thread, in case you need to update your instances on the fly:




Let us know if you need something else.


Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Thanks for the help!

I'm gonna give Diaco's solution a try.
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.