Reversing timelines as functions within objects

[jonathanawesome]

I've got a number of timeline functions that are set inside of an object so that I can call them programmatically. You click a button with a number as a data attribute and it call a timeline method on one of these functions, like functions.function1.play().  I can get them to play(), but reverse() doesn't work. Am I missing something simple?

var box     = document.querySelector('.box');
var play    = document.querySelector('.play');
var reverse = document.querySelector('.reverse');

var functions = {
  scale: function() {
    //console.log(this);
    var tl = new TimelineMax({paused: true})
              .to(box, .5, {scale: 2})
    return tl; 
  }
}  

play.addEventListener('click', function() {
  functions.scale().play();
  console.log(functions.scale());
});
reverse.addEventListener('click', function() {
  functions.scale().reverse();
  //alert('hey');
});

See the Pen wdzYaW by jonathanawesome (@jonathanawesome) on CodePen.

[OSUblake]

It's working as expected. If you immediately reverse something, it will be in its end state. You're expecting it to work like this...

functions.scale().reverse(0);

But that will most likely lead to additional problems. I would recommend creating the animation once, and toggle it using play/reverse.

See the Pen mmrQqp?editors=0010 by osublake (@osublake) on CodePen.

 

.

[jonathanawesome]

It's likely that I'm missing a core timeline concept. I don't see the immediate reversal.

 

Here's a slightly modified version that works. 

var box     = document.querySelector('.box');
var play    = document.querySelector('.play');
var reverse = document.querySelector('.reverse');
var scale = new TimelineMax({paused: true})
            .to(box, .5, {scale: 2});

play.addEventListener('click', function() {
 scale.play();
  
});
reverse.addEventListener('click', function() {
 scale.reverse();
});

[OSUblake]

Play around with this. If you toggle reverse as soon as it starts, you'll see what I mean by it being in its end state. It has nowhere to go.

See the Pen 28eaad3b3570ccc622cf7622ed85dfc4?editors=0010 by osublake (@osublake) on CodePen.

 

.

[jonathanawesome]

eek...I just realized a did a poor job explaining the issue.

 

Back to the example in my initial post; reverse() wasn't working after already play()ing through the entire timeline and coming to a stop (in my non-example code, I'm preventing a reverse() action until the timeline has played through).

 

I fiddled and fussed and realized maybe I was burying the timeline unnecessarily. This code works and gives me access to reverse() after play() is finished...

var box     = document.querySelector('.box');
var play    = document.querySelector('.play');
var reverse = document.querySelector('.reverse');

var functions = {
  scale:  new TimelineMax({paused: true})
            .to(box, .5, {scale: 2})
}  

play.addEventListener('click', function() {
  functions.scale.play();
  
});
reverse.addEventListener('click', function() {
  functions.scale.reverse();
});