Jump to content
Search Community

Toggle reverse and play

icraft-websites test
Moderator Tag

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

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 comment
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 comment
Share on other sites

  • 2 years later...

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 comment
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 6
Link to comment
Share on other sites

  • 1 year later...
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 comment
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 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...