Snapping on Timeline progress()?

[Steve]

Is there any way to have snapping on Timeline progress()? Snapping to fixed intervals such as .1, .2, .3 of the progress()? 

Thanks for your consideration!

[Shaun Gorneau]

Before we dive into this ... please explain the desired outcome. I have a feeling there is another way to tackle this.

[ZachSaucier]

If you still want the animation to play but to pause at certain intervals, tweenTo() is what you're looking for.

 

If you just want to jump to a certain state, you can set the progress: tl.progress(0.1).pause();

 

Past that, we'd need more info like Shaun said  

[Steve]

I built a Timelinemax Carousel with 11 cards and mapped them to a Jquery UI slider. The next/back functions move .9 of progress() which works fine. The only issue is if the Jquery slider is used and the carousel is not exactly on one of the 11 progress intervals. So I'd like to snap the progress to the 11 progress intervals, .9, .18, .27, etc. Thanks very much for your help.

[Shaun Gorneau]

I would create labels, have the slider intervals mapped to specific labels, and use tweenTo() to, well, tween to those labels  

[ZachSaucier]

Maybe a minimal demo would be the most helpful in order for us to give proper feedback  

[Steve]

I figured it out. Here is the function that I put inside the Jquery UI slider object:

 

$("#slider").slider({
      stop: function(event){

      var p = tl.progress();
      var intervals = [0,.9,.18,.27,.36,.45,.54,.63,.72,.81,.9];
      var closest = intervals.reduce(function(prev, curr) {
        return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev);
      });

      if ( p != intervals) {
        tl.progress(closest);
      }
      event.stopPropagation();
    }

});

 

Snapping awesome!! Thanks!!