Jump to content
Search Community

Reversing timelines as functions within objects

jonathanawesome test
Moderator Tag

Go to solution Solved by jonathanawesome,

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'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

Link to comment
Share on other sites

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

 

.

  • Like 4
Link to comment
Share on other sites

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();
});
Link to comment
Share on other sites

  • Solution

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