Jump to content

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

Ideal vue.js setup for playing and reversing timelines

Recommended Posts

How do you setup a vue component to be able to play and reverse a timeline upon a certain event?

When I setup a method containing the timeline instance it wll be declared everytime the method is called. The reverse function won't work in this case.

Link to comment
Share on other sites



I don't know if this is the ideal way of doing it, but the best approach I can think of is to create a reference to the timeline instance in the data() callback:


data() {
  return {
    tween: new TimelineLite({ paused: true })


Then in the mounted hook, add the instances to the timeline:


mounted: function() {
    .to(this.$refs.appLogo, 2, {
      rotation: 360


And finally in the methods object define a method to play/reverse the instance:


methods: {
  toggleLogoTween: function() {


Here is a live reduced sample:




Happy Tweening!!

  • Like 5
Link to comment
Share on other sites

Thanks a lot. That works exaclty how expected.


Just to clarify.

Why do you add the reverse() function at the end of the mounted hook? Will it add the ability to reverse the timeline in general?


If I'm not mistaken the methods is the same as.

if ( !this.textTl.reversed() ) {
} else {

Am I correct?

  • Like 2
Link to comment
Share on other sites

You're welcome.


Well is just a pattern that you'll see quite a bit here in the forums and some bits I gathered throughout my time here.


First unless is necessary I always create Timeline instances paused, because otherwise the time is already running and the playhead is moving forward. Granted, normal JS execution to add the instances might take only a few milliseconds but in some cases that could cause some unexpected behaviour. Now I'll jump forward to this:


tl.reversed( !tl.reversed() );


Reversed is a getter/setter of the reverse status of a GSAP instance. By default all GSAP instance are created and going forward, therefore by default reversed() returns false. Since I'm using reversed() as a setter (by passing the opposite value) I need that the reverse status of the timeline to be true. Now since I created the timeline paused the playhead won't go anywhere unless I change that, hence I add a reverse() call at the end of the timeline. Now the timeline is paused, so I'm telling the timeline: "Go from being paused to play backward", but since the timeline is at zero seconds and negative time doesn't exists (although @GreenSock and/or @OSUblake might be working on that ;)) the timeline stays put at zero seconds and the reversed() value is true. Then on the first click (or any other event that triggers it) I toggle the reversed() value to false, which tells the timeline to go forward and so forth.


Basically is just a way of doing it without the conditional block in it, which saves a tiny amount of time and a couple of lines of code.


Hopefully this makes things more clear about it.


Happy Tweening!!!

  • Like 3
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.