Jump to content
Search Community

Cant get div to move left mulitiple times on click function

Clonk 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

I am trying to set up a slider that when you click the right arrow it moves the slider to the left -750px.  I can get it to do it once but need it to move -750px everytime I click the arrow. In jquery .animate I can set it to -=750px and everytime I click the arrow it moves it over -750px.  Is there a way I can do that with tweenlite.  

 

Here is my code....

 

$(document).ready(function() {
    $('#Rt-arrow').click(function() {
        TweenLite.to('#slider', 2, {x:-750});
    });// end click
});// end ready
Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums:

 

you can try relative values:

$(document).ready(function() {

    $('#Rt-arrow').click(function() {
        TweenLite.to('#slider', 2, {x:"-=750"});
    });// end click

});// end ready

noticed i used "-=750" .. that will cause the element to be moved -750 to the right on every click.. if you did "+=750" it would add and move the element 750px to the left

 

from DOCs:
 

Passing values as Strings and a preceding "+=" or "-=" will make the tween relative to the current value. For example, if you do TweenLite.to(element, 2, {left:"-=20px"}); it'll tween left minus 20 pixels from whatever it is when the tween starts. {x:"+=20"} would add 20.

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

Link to comment
Share on other sites

Thank you I had tried that but didnt use the "" so it didnt work. Now I have a problem where if I double click while it is transitioning the 750 it moves it 750 more from the point of the click so it ends in a weird place.  Is there a simple way around that?

Link to comment
Share on other sites

you could try this and check if the element is tweening:

 

http://api.greensock.com/js/com/greensock/TweenMax.html#isTweening%28%29

$(document).ready(function() {

    $('#Rt-arrow').click(function() {
        // only runs if #slider is NOT tweening
        if(!TweenMax.isTweening('#slider')){
           TweenLite.to('#slider', 2, {x:"-=750"});
        }

        return false;
    });// end click

});// end ready

alternatively you can do it other ways by setting a global variable and the only allow the tween if that variable is set by using the onComplete callback:

$(document).ready(function() {

   var runThis = true;

   $('#Rt-arrow').click(function() {
        // only runs if #slider is NOT tweening
        if(runThis === true){
           TweenLite.to('#slider', 2, {x:"-=750",
                  onComplete:function(){
                          runThis = true;
                  }
            });
        } else {
            runThis = false;
        } 
        
        return false;
    });// end click

});// end ready

:)

  • Like 1
Link to comment
Share on other sites

Hi,

 

The problem with the double click is that after the first click a Tween is triggered and during the little time between on click and the other the element translates a small amount of pixels, then the second click happens and a new Tween is triggered. This new tween overwrites the previous one and takes the current starting value and subtract 750 pixels from it. Your element's final position won't be -750 from it's original position.

 

One solution is to create a conditional logic to test if the element is being animated and use an onComplete callback to release the conditional logic:

$('#Rt-arrow').click(function()
{
  if(!animating)
  {
    animating = true;
    TweenLite.to('#slider', 2, {x:-750, onComplete:function()
      {
        animating = false;
      }
    });
  }
});// end click

Another possibility is create a paused tween outside the click function and call play() on the click event:

var Tween = TweenLite.to("#slider", 2, {x:-750});

$('#Rt-arrow').click(function()
{
  Tween.play();
});// end click

Like that it doesn't matter how many clicks you make the tween is already playing and calling the play() method upon it won't make any difference.

 

Rodrigo.

  • Like 1
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...