Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraft-websites

Toggle reverse and play

Recommended Posts

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()

 

 

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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
  • Like 3
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

:)

  • Like 2
Link to post
Share on other sites

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

 

.

  • Like 5
Link to post
Share on other sites

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

 

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.  :blink:  

  • Like 2
Link to post
Share on other sites
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.

Link to post
Share on other sites

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

  • Like 4
Link to post
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.

×