Jump to content
GreenSock

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

Tweenlite not Tweening Full Duration

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

Share this post


Link to post
Share on other sites

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

 

 

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×