Jump to content
GreenSock

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

onReverse

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

Hi, I can see this in tutorial

"You can define onStart, onUpdate, onComplete, onReverse, and/or onReverseComplete event callbacks."



But I cant find hou to use "onReverse()".  But "onReverseComplete()" is there.

I want to call a function on every "onReverse() "  occures. (using slider or the reverse button).

Edit: here the example how I want to use onReverse()

See the Pen gLtoz by anon (@anon) on CodePen


 

Link to comment
Share on other sites

Hi,

 

Thanks fir providing the codepen, is always very useful.

 

There are two things to be considered here.

 

First, this has been discussed before and the conclusions are that, in the case of your codepen, the reverse() method is triggered by a event handler (a click event in this case), so whatever code you want to execute when the instance begins to reverse, you can call it in the particular event. So when you click in the blue box, you can attach that code in that event handler:

$("#blueBox").on("click", function(){
  tl.reverse();
  lolz();
});

function lolz(){
  $("#redBox").html(":)");
}

This is thoroughly discussed in this post:

 

http://forums.greensock.com/topic/9182-detect-reverse-start-event/

 

Second, using a slider (like the one for jQuery's UI) will require a bit of extra code, because this is usually linked to the instance's progress. Using the slider to modify the progress value doesn't change the direction of the instance's playhead. For example if the tween is going forward, then you scrub the slider back, finally when the slider is released you attach a resume() method, the tween will still go forward until you call the reverse() method.

 

What you could do is check the slider value on every slide update (I'm going to stick with jQuery's UI Slider) and based on the variation play() or reverse() the instance:

var tl = new TimelnieLite();

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  start:function(event, ui)
  {
    previousSlideValue = ui.value;
  },
  		slide: function (event, ui) {
        currentSlideValue = ui.value;
        
        tl.progress( ui.value / 100 ).pause();
        $pause.html("play");
  		},
  stop:function()
  {
    if( (currentSlideValue - previousSlideValue) < 0 )
      {
        //here you can attach the code you want when the tween reverses
        tl.reverse();
      }
    else
      {
        tl.play();
      }
  }
});

You can see it working here:

 

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

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

thanks for the code.

the problem  is
I am still a beginner and learning. I dont know how to animate backgroundImage continuously in GSAP timeline. so I created that animation as a jquery function.  so on reverse I needed another jquery function to animate the background in reverse order.

I hope now I can solve that problem. Thanks for the solution.
8-)

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