Tweenlite not Tweening Full Duration

[lfc611]

i have a little carousel and its not tweening to the full duration. i have the tween time set to '0.5' 

 

when you click on the "<" button the first 2 times it works, the 3rd time theres no animation as though the duration is set to '0'

same if you click on ">" first 2 times its good, 3rd not tweening.

 

am i setting something up wrong?

 

thanks 

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

[Carl]

Hi and welcome to the GreenSock forums,

 

I took a look at your code and unfortunately I really don't know where to begin to start troubleshooting and deciphering 100 lines of these types of conditions with a bunch of variables that I don't know what they are. 

 

if( ($('[data-pos="front"]').hasClass('js-census') && direction =='right' ) || ($('[data-pos="front"]').hasClass('js-public') && direction =='left'  ) ){
        console.log("1 2 3")
        //lPerc = (0 - (censusW / 2) ) + '%';
        lPerc = (0 - (censusW - (enviroW/2) ) ) + '%';
        cPerc = (50 - (enviroW / 2) ) + '%';
        rPerc = (100 - (publicW / 2) ) + '%';

Not saying your code is bad or anything. Just too much for a first time viewer to try to digest quickly.

 

That said, my guess is that something else is setting objects immediately to the same values you are trying to tween to, which gives the appearance of the tween not running.

Looks like adjustPositions() may be to blame. I removed it and things always animate, although the positions are a little out of whack:

http://codepen.io/GreenSock/pen/qOqrvM?editors=001

 

 

[Tahir Ahmed]

Here is an idea for you to try out:

See the Pen Yyprqo?editors=001 by tah_med (@tah_med) on CodePen

.

 

The idea is that you have timeline objects for all three of your sliding elements and you basically just control the progress of each of them based on which button is clicked.

 

JavaScript:

 

(function() {
  var btnLeft = $('[data-btn="left"]');
  var btnRight = $('[data-btn="right"]');
  var one = $('.js-census');
  var two = $('.js-enviroment');
  var three = $('.js-public');
  var tlOne = new TimelineMax({ paused: true });
  var tlTwo = new TimelineMax({ paused: true });
  var tlThree = new TimelineMax({ paused: true });
  var duration = 1;
  var ease = Power2.easeInOut;
  var opacity = 0.1;
  TweenMax.set([one, two, three], { position: 'absolute', top: '50%', left: '0%', yPercent: -50, xPercent: -50 });
  
  tlOne.fromTo(one, duration, { xPercent: -80, opacity: opacity }, { left: '50%', xPercent: -50, opacity: 1, ease: Power0.easeNone });
  tlOne.to(one, duration, { left: '100%', xPercent: -20, opacity: opacity, ease: Power0.easeNone });
  tlTwo.fromTo(two, duration, { opacity: opacity }, { left: '50%', opacity: 1, ease: Power0.easeNone });
  tlTwo.to(two, duration, { left: '100%', opacity: opacity, ease: Power0.easeNone });
  tlThree.fromTo(three, duration, { opacity: opacity }, { left: '50%', opacity: 1, ease: Power0.easeNone });
  tlThree.to(three, duration, { left: '100%', opacity: opacity, ease: Power0.easeNone });
  
  tlOne.progress(0.5);
  tlTwo.progress(0);
  tlThree.progress(1);
  
  function init() {
    btnLeft.on('click', rotateLeft);
    btnRight.on('click', rotateRight);
  }
  
  function rotateLeft() {
    slideLeft(tlOne);
    slideLeft(tlTwo);
    slideLeft(tlThree);
  }


  function rotateRight() {
    slideRight(tlOne);
    slideRight(tlTwo);
    slideRight(tlThree);
  }
  
  function slideLeft(tl) {
    var progress = tl.progress();
    if (progress > 0 && progress <= 0.5) {
      TweenMax.to(tl, duration, { progress: 0, ease: ease });
    } else if (progress > 0.5 && progress <= 1) {
      TweenMax.to(tl, duration, { progress: 0.5, ease: ease });
    } else {
      TweenMax.to(tl, duration, { progress: 1, ease: ease });
    }
  }
  
  function slideRight(tl) {
    var progress = tl.progress();
    if (progress >= 0 && progress < 0.5) {
      TweenMax.to(tl, duration, { progress: 0.5, ease: ease });
    } else if (progress >= 0.5 && progress < 1) {
      TweenMax.to(tl, duration, { progress: 1, ease: ease });
    } else {
      TweenMax.to(tl, duration, { progress: 0, ease: ease });
    }
  }
  //
  init();
})();

 

Code can be improved surely though i.e. repetitions could be avoided.