progress call back reporting strange values?

[Visual-Q]

Hi Guys,

I'm setting up a progress bar slider to assist with animation testing and I'm having difficulties - specifically the progress() call back appears to be reporting strange values.

 

The animation appears to be fine so far and progress bar works except that the values the progress callback reports the animation as staring at .93xxxxx instead of 0. So i set the value of the slider to 94 to align it and got it working, if I have the range run from 0-100 the animation runs in the last five percent of the slider.

 

Does the progress callback not automatically calculate the length of the animation and start it's data reporting at 0? Am I not understanding it properly? I posted my code below, I stripped out the animation properties to make it easier to read but left in all the timing values and basic construction. The slider code is at the bottom, I based it on the gsap code pen that contains one.

 

Note also if I change the duration of the animation, the callback changes the start value of the data it reports. Have I set up my timeline wrong or am i not using the callback correctly.

 

Any help is much appreciated.

window.onload = function(){
  
    
    
//VARIABLES FOR TWEENS
    var titleAnimation = $('.animation1 div div'),
        zAnimation = $('.z-anim'),
        cAnimation = $('.c-anim'),
        aAnimation = $('.a-anim'),
        xAnimation = $('.zerox'),
        xAnimationcon = $('.zeroxcon'),
        xAnimationcon = $('.zeroxcon'),
        wordSpace = $('.wrdspc'),
        wordSpacecon = $('.wrdspccon'),
        hideDot = $('.killdotoff'),
        forceDot = $('.killdotoff'),
        forceScale = $('.force-scale');

//TWEEN MAX   
    var titleTextAnimation = new TimelineMax();

//SET SOME VALUES   
    TweenMax.set(xAnimationcon, {width: "auto",transform:"scaleX(1)"});
    TweenMax.set(xAnimationcon, {width: "auto",transform:"scaleX(1)"});
    TweenMax.set(forceScale, {transform:"scaleX(.9999)"});

//ANIMATION
    titleTextAnimation
        .staggerTo(titleAnimation, 1.25, {}, 0.10)
        
        .to           (zAnimation,      0.35,   {animation proerties})
        .to           (cAnimation,      0.2,    {},"-=0.425")
        .to           (aAnimation,      0.15,   {},"-=0.3")
        
        .to           (zAnimation,      0.175,  {},"+=.5")
        .to           (cAnimation,      0.10,   {},"-=0.175")
        .to           (aAnimation,      0.08,   {},"-=0.17")
        
        .to           (zAnimation,      0.175,  {},"+=.5")
        .to           (hideDot,         0.175,  {},"-=.125")
        .to           (cAnimation,      0.175,  {},"-=125")
        .to           (aAnimation,      0.175,  {},"-=.125")
        
        .staggerTo    (xAnimation,      0.05,   {}, .05, "stagger")
        .staggerFrom  (xAnimationcon,   0.05,   {}, .05, "stagger")
        .to           (hideDot,         1,      {},"stagger")
        .to           (wordSpace,       0.05,   {},"stagger")
        .to           (wordSpacecon,    0.05,   {},"stagger");


//SLIDER FUNCTIONS
    titleTextAnimation.eventCallback("onUpdate", updateSlider);
      
    $("#slider").slider({
      range: false,
      min: 94,
      max: 100,
      step:.01,
      slide: function ( event, ui ) {
        titleTextAnimation.pause();
        //adjust the timeline's progress() based on slider value
        titleTextAnimation.progress( ui.value/100 );
        }
    });	
		
    function updateSlider() {
      $("#slider").slider("value", titleTextAnimation.progress() *100);
      console.log(titleTextAnimation.progress());
    } 	
    
};

[Carl]

Hmm, the problem isn't jumping out at me.

Best thing to do is to reduce your timeline down to 2-3 tweens and create a basic CodePen demo for us to look at.

 

Usually the process of reducing an example reveals the issue. Another idea is to just save a working demo of ours and ad your code to it.

[Visual-Q]

Thank you Carl!!

 

I followed your advice stripped out the tweens till I isolated the problem. Huge DUH!! on my part I was missing a decimal - I had 125 instead .125 as a time offset on one of the tweens. Pretty dramatic difference. The animation it was attached to was very subtle so I wasn't noticing the problem.

 

Only a couple of days in with Gsap but this platforms already blowing my mind. Need to keep a closer watch on my code though.

 

Thanks again.