I'm trying to apply my toggle click to play/reverse button to an animation...

[T.Gregory]

 

I'm trying to apply this toggle to an animation sequence from the 3d Preview Demo #3 (shown below). I didn't put it on codepen cuz its only two snippets. 

 

I'm new to jquery and brand new to GSAP, I get the concepts and can develop my skills easily given I can find reference to the proper syntax per situation. 

But unfortunately, I've found very little useful syntax examples even in the most details docs, the demos on codepen are mostly amusing novelties that almost religiously exclude click events and there is no reference book on "Coding with Greensock"  . . . and that leaves me with no way to learn but trial and error - or asking for help. 

 

Here is the toggle I used for a previous animation that is triggered by clicking the div id=#left

 

var t = new TimelineLite({paused:true, reversed:true});

t.to(".infoBar", .5, {ease:Back.SlowMo,top:"30%",});

 

$("#left").on("click", function() {

  if (t.reversed()) {

    t.play();

  } else {

    t.reverse();

  }

});

 

I have tried for hours to apply it to the animation below, but when code requires exactness down to the dot, there seem to be more variations than the Rubik's Cube. 

 

If someone could show me how they would apply the click event above to the demo animation below - as well as advice on figuring out situational syntax when there are no references or examples - I would greatly appreciate it...

 

3D Preview Demo #3 :

 

$(function() {

 

var box = $(".box");

var wrapper = $(".wrapper");

 

var tl = new TimelineMax({repeat: 6, yoyo: true, repeatDelay:.5})

 

tl.set(box, {

    css: {

        borderRadius: 8,           

        transformOrigin:"50% 0% -400px"

    }

});

 

tl.set(wrapper, {css:{perspective:800}});

 

tl.staggerTo(box, 3, {css:{rotationY:360, autoAlpha:1}, ease:Back.easeOut});

 

});

 

HTML if it is relevant: 

 

<div class="wrapper">

    <div class="box">ANIMATE</div>

    <div class="box">IN </div>

    <div class="box">3D</div>

    <div class="box">WITH</div>

  <div class="box">GSAP JS</div>

</div>

 

 

 

 

[Rodrigo]

Hi,

 

Just like it has been mentioned several times in the forums, codepen samples help us get to the solution faster than no reduced sample at all.

 

One of your problems is that you didn't specify the stagger time between each element animation. Although this won't break code execution (all elements will be animated at the same time).  Also I wouldn't use a toggle option for a timeline/tween with repeat and yoyo options, keep in mind that the playhead will go several times through the start and end values if the toggle is called after several loops.

 

The problem must somewhere else in your JS, probably on the event listener code, but without that is impossible to know the real reason why your code is not working. I created a simple codepen so you can see it:

 

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

[Carl]

We  have a tutorial suited perfectly for your case in the Learning section of our site that focuses on toggling the paused() state of an animation with a button.

http://greensock.com/playpause

 

There is a video on that page and a CodePen demo that you can view the source of (click the JS tab) or edit by clicking the "edit this pen" link.

Although the tutorial is focused on toggling the paused() state, we tried to make it clear that the same technique works for the reversed() state as well.

 

If you are just getting started, be sure to check out the Jump Start and the Jump Start CodePen collection, plenty of our demos use buttons for a variety of animation-related tasks. 

 

And as Rodrigo said, a reduced test case really helps us see where the trouble is as most likely it can be somewhere other than your GSAP code.

 

I highly recommend the 30-day jQuery course on tuts+ http://code.tutsplus.com/courses/30-days-to-learn-jquery You need to sign up (provide email address) but its free. I found the first 5 sessions to be very helpful.