Toggle reverse and play

[icraft-websites 2 Likes (Newbie)]

Hey there forums,

 

Just wondering if you guys have a toggle function which you can call a tween variable and switch between play() and revers() without specifying which to call. An example would be like jQuerys .fadeToggle()

 

e.g. 

 

var tween = TweenLite.to(obj, 1, {left:100, paused:true});

 

tween.toggle() ---- Toggles tween.play()

 

then

 

tween.toggle() ---- Toggles tween.reverse()

 

 

[Rodrigo 3,567 Likes (Superhero)]

Hi,

 

Nope GSAP doesn't have a native toggle function, but due to the engine's flexibility creating one is not too hard.

 

You can set the reversed() state of the tween/timeline once it has been instantiated and then using a simple conditional you can toggle between play/reverse with ease.

var t = TweenLite.to(element, time, {vars});

// set the reversed property to true
t.reversed(true);

// toggle function
function toggleDirection()
{
  t.reversed() ? t.play() : t.reverse();
}

Here's a live sample:

 

See the Pen uLGgm by rhernando (@rhernando) on CodePen

 

Rodrigo.

[jamiejefferson 1,193 Likes (Superhero)]

It also depends on how you want to toggle - if you want to toggle the reversed property only (not necessarily starting playback) you can do this:

t.reversed(!t.reversed()); // swaps the reversed state

t.resume(); // starts playback, honouring reversed if it's true

[icraft-websites 2 Likes (Newbie)]

Choice,

 

This will help to clean up my code a bit more, thanks. 

[wordyallen 0 Likes (Newbie)]

In order for this to work for me I have to double click. it works fine with  play( ).    I'm adding an onclick  to actual svg element. I saw @Rodrigo   pen.. but its not working for in the DOM.  Anyone know how I can get it to work on a single click? 

 

This requires double click:

...
<rect id='myRect' onclick='toggleRect()' />
<script type="text/javascript">

  var tlb =  new TimelineMax({paused: true})
  
tlb.to('#myRect', 1, {opacity:1})
  
function toggleRect(){
    tlb.reversed() ? tlb.play() : tlb.reverse()
 }

.

 

This does not toggle but requires only one click.
 

...
<rect id='myRect' onclick='toggleRect()' />
<script type="text/javascript">

  var tlb =  new TimelineMax({paused: true})
  
tlb.to('#myRect', 1, {opacity:1})
  
function toggleRect(){
    tlb.play()
 }

[PointC 11,477 Likes (Superhero)]

Hi wordyallen 

 

Welcome to the GreenSock forum.

 

That happens because the timeline isn't reversed until it's been played and then reversed. Easy fix though. Just set it to reversed like this:

  var tlb =  new TimelineMax({paused: true, reversed:true})

Happy tweening.

[OSUblake 13,967 Likes (Superhero)]

Some may find this confusing, but I like to tack .reverse() onto the end and toggle an animation like this...

var tl = new TimelineMax()
  .to("#box", 0.25, { opacity: 0.5, scale: 0.75 })
  .reverse();

$("#box").click(function() {
  tl.reversed(!tl.reversed());
});

See the Pen 9d46535fe6e5b5c8f577308a5ae1ea72 by osublake (@osublake) on CodePen

 

.

[PointC 11,477 Likes (Superhero)]

Stop confusing everyone Blake. We're not all from the Matrix. 

 

Good tip sir. Though, that probably would confuse new GSAP users. Heck, I still remember the first time I saw a ternary operator being used for play/reverse. I was perplexed.    

[beau_dev 35 Likes (Newbie)]

On 2/10/2017 at 5:57 AM, OSUblake said:

Some may find this confusing, but I like to tack .reverse() onto the end and toggle an animation like this...

var tl = new TimelineMax()
  .to("#box", 0.25, { opacity: 0.5, scale: 0.75 })
  .reverse();

$("#box").click(function() {
  tl.reversed(!tl.reversed());
});

http://codepen.io/osublake/pen/9d46535fe6e5b5c8f577308a5ae1ea72

 

.

✋?call me confused.

Does it stop me from copy-pasta?

noop!

Thanks! 

P.S.

 

I think it's the method .reversed() together with the arg !tl.reversed that's got me stumped.

 

I'll get it somehow, tho.

 

It, at least, starts a conversation in my small brain.

 

Here's another example for future visitors to this thread.

See the Pen YeYgzE by beau_dev (@beau_dev) on CodePen

 

This alters both the svg (top right corner) and an array of buttons.

[OSUblake 13,967 Likes (Superhero)]

.reversed() is a getter and a setter.The NOT Operator (!) negates the value. True becomes false, and false becomes true.

 

// get reversed state
var isReversed = tl.reversed()

// set reverseed state
tl.reversed(!isReversed)

 

And the start of an animation is also the end of an animation when reversed, so that's what immediately reversing does. It puts the animation in its reversed end state, which effectively makes the animation paused.

[beau_dev 35 Likes (Newbie)]

Yep. I figured it was smth like that. That's helpful, thanks!