Slider control using jQuery UI is jumpy

[Hysteresis]

I am using a jQuery Ui slider to control my animation, but when the animation is playing the slider handle is very jumpy, it seems to momentarily pause at the start of each animation. I have tried all kinds of things, from simplifying my timeline, removing delays, removing lables, changing easing, adding the jQuery Easing plugin, but nothing seems to work. 
 
So I am wondering if anyone has a solution for this, or can suggest an alternative. I have looked at other slider tools out there such as NoUiSlider, but I don't know how to set them up so that they can control the animation (and update with the animation). Or perhaps a way of doing this solely with Greensock.
 
 
Here is my code:

var tl = new TimelineMax({onUpdate:updateUI})
tl
 .fromTo("#route1", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn})
    .fromTo("#route2", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn})
    .fromTo("#route3", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn})
    .staggerFrom([oh1, oh2, oh3, oh4, oh5], 1,  {opacity:0})
.to({}, 5, {})    
    .set("#mainRoute", {visibility:"visible"})
    .to("#route1a, #route1b", 0.5, {strokeWidth:"16", stroke:"#5dc3f0", ease:Power2.easeInOut})
    .to("#route1-text", 0.5, {fill: "#5dc3f0", ease:Power2.easeInOut}, "-=0.9")
    .to("#route1a, #route1b", 0.5, {strokeWidth:"6", stroke:"#ffffff", ease:Power2.easeInOut})
    .fromTo(alt, 0.5, {autoAlpha:1, ease:Expo.easeIn}, {autoAlpha:0, ease:Expo.easeIn})
    .fromTo(main, 0.5, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}, "-=1.0")
.to({}, 5, {})
    .to(".id1, .id1a, .id2a, .id4, .id4a, .id5a, .id6, .id6a, .id6b", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#rowLabel1, #rowLabel2, #rowLabel3", {visibility:"visible"})
    .to(".label div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
.to({}, 5, {})
    .add("row", "-=0.3") 
 
    .to(".id4, .id4a", 0.3, {stroke:"#895881", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase4", {visibility:"visible"})
    .to("#phase4 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#895881", fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
    .to(".id5, .id5a", 0.3, {stroke:"#937963", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase5", {visibility:"visible"})
    .to("#phase5 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#937963", fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
    .to(".id6, .id6a, .id6b", 0.3, {stroke:"#B2D235", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase6", {visibility:"visible"})
    .to("#phase6 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#B2D235", fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
.to({}, 5, {})
    .to(".id1, .id1a", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase1", {visibility:"visible"})
    .to("#phase1 div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
    .to(".id2, .id2a", 0.3, {stroke:"#81D0D3", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase2", {visibility:"visible"})
    .to("#phase2 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#81D0D3", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
    .to(".id3, .id3a", 0.3, {stroke:"#D6562B", strokeWidth:"10", ease:Power4.easeInOut})
    .set("#phase3", {visibility:"visible"})
    .to("#phase3 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#D6562B", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3")
 
 
var cloudsAnimation = new TimelineMax({repeat:50, repeatDelay:.5, yoyo:true})
  cloudsAnimation.fromTo(allclouds, 120.2, {x: -900, y: -1200}, {x: 400, y: 1600}); 
 
   function init() {
        TweenLite.set($(".label"), {visibility:"hidden"});
    }
        
    init();
    
     totalProgressSlider = $("#totalProgressSlider")
.slider({
            range: false,
            animate: true,
                min: 0,
            max: 100,
            step:.3,
            slide: function ( event, ui ) {
                tl.totalProgress( ui.value/100 );
                var topValue = -((100-ui.value)*difference/100).animate();
            }
        });
            
    
function updateUI() {
        totalProgressSlider.slider("value", tl.totalProgress() *100);
}       
 
$("#totalProgressSlider, .ui-slider-handle").mousedown(function() {
  $('html, #totalProgressSlider, .ui-slider-handle').one("mouseup", function(e){
    tl.resume();
  });
});
        
 
    rowBtn.click(function() {
        tl.tweenTo('row', {ease:Bounce.easeInOut}).timeScale(16);
    });
                 
    topsoilBtn.click(function() {
        tl.tweenTo('topsoil', {ease:Bounce.easeInOut}).timeScale(16);
    });
             
    trenchingBtn.click(function() {
        tl.tweenTo('trenching', {ease:Bounce.easeInOut}).timeScale(16);
    });

 
CSSPlugin.defaultTransformPerspective = 600;
TweenLite.set([main], {rotationX:0});
TweenLite.set("h2", {autoAlpha:0});
 


I found this example:

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

but how to I get it to update with the timeline progress?

[Rodrigo]

Hi and welcome to the Greensock forums.

 

Now that the engine has the draggable tool I don't use JQuery's slider anymore, and create my own sliders.

 

In this samples you can see how to update a tween/timeline with a draggable instance and vice versa:

 

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

 

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

 

Maybe the issue is the JQuery UI, because if you check this codepen you can see that the slider does makes some jumps from time to time:

 

See the Pen bpezc by GreenSock (@GreenSock) on CodePen

 

Rodrigo.

[Jonathan]

Hello and welcome to the GreenSock Forums!

 

Rodrigo beat me to it

 

you can use the onUpdateParams special property:

 

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

var tl = new TimelineMax({onUpdate:updateUI,onUpdateParams:["{self}"]});

function updateUI(tl) {
        totalProgressSlider.slider("value", tl.totalProgress() *100);
}

onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, new TimelineMax({onUpdate:myFunction, onUpdateParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"]

 

basically you reference the timeline by using "{self}" and pass it to your function callback as tl parameter to be used with totalProgress()

 

also here is an example by Carl from GreenSock showing the TimelineLite example finished.. it has a simple usage of jQuery Slider UI integrated with GSAP:

 

See the Pen bpezc by GreenSock (@GreenSock) on CodePen

 

[Hysteresis]

Thank you both for your replies. It makes sense to me, but I am not good enough at coding to implement your suggestions and get this to work the way it should.

 

I have tried to make it work but the animation seems to be playing all the way through every time it is dragged. I also can't get it to start playing from the point it was dragged to, and the animation doesn't play automatically (and update the slider)

 

So basically I am stuck here:

See the Pen uCFje by dchadney (@dchadney) on CodePen