how to animate CSS "clip" property in loop-jQuery-animation?

Question

i want to animate the slider of the twenty-twenty plugin by zurb. (http://zurb.com/playground/twentytwenty) Github: https://github.com/zurb/twentytwenty

this is what i have currently:

$(".twentytwenty-container").twentytwenty({
  default_offset_pct: 0.15, // How far to the left the slider should be
  move_slider_on_hover: true // Move slider on mouse hover?
});
var leftOffset = parseInt($(".twentytwenty-handle").css("left"), 10);

function animation() {
  var options = {
    duration: 650,
    easing: 'swing'
  };
  $('.twentytwenty-container')
    .find('.twentytwenty-handle')
    .animate({
      left: leftOffset + 5 + "px"
    }, options)
    .animate({
        left: leftOffset - 5 + "px"
      },
      $.extend(true, {}, options, {
        complete: function() {
          animation();
        }
      })
    );
}

function animationIMG() {
  var options = {
    duration: 650,
    easing: 'swing'
  };
  $('.twentytwenty-container')
    .find('.twentytwenty-before')
    .animate({
      clip: "rect(0px " + leftOffset + 5 + "px 856px 0px)"
    }, options)
    .animate({
        clip: "rect(0px " + leftOffset - 5 + "px 856px 0px)"
      },
      $.extend(true, {}, options, {
        complete: function() {
          animationIMG();
        }
      })
    );
}
setTimeout(function() {
  animation();
  animationIMG();
}, 1500);
$('.twentytwenty-container').mouseenter(function() {
  $(".twentytwenty-handle").stop(true).fadeTo(200, 1);
  $(".twentytwenty-before").stop(true).fadeTo(200, 1);
});
$('.twentytwenty-container').mouseleave(function() {
  leftOffset = parseInt($(".twentytwenty-handle").css("left"), 10);
  animation();
  animationIMG();
});

can't make a fiddle cause the plugin doesn't work on jsfiddle.. i don't know why?

the animation of the sliding-arrows works, but not the effect (comparison) itself doesn't animate (function: animateIMG). the clip-css won't get animated.

any help is appreciated, thank you!!

Answer 1

I had the same problem and found a solution with SCSS. I just wanted to click or drag. The click should be animated.

Because of the resizing(rect) and repositioning the transition is able to work. While dragging the container has the class active, so it is possible to turn the transition off again.

    .twentytwenty-container {
        img {
            height: auto;
            max-height: 2000px;

            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .twentytwenty-handle {
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        &.active {
            img, .twentytwenty-handle {
                -webkit-transition: none;
                -moz-transition: none;
                -o-transition: none;
                transition: none;
            }
        }
    }

Answer 2

I resolved this by adding a custom event into the twentytwenty code which I can then trigger whenever I need to. I suppose you could extend twentytwenty if you don't want to hack their code, but I just added the following code below their listeners:

$(window).on("slidein", function(e,pct){
  $({slide:0}).animate({slide:pct}, {
    duration: 2000,
    step: function(val){
      adjustSlider(val/100)
    }
  })
});

This uses a jquery animate trick to animate from 0 to X then I am just passing that along to the twentytwenty adjustSlider method after converting to decimal percent.

In my app I trigger this event via:

$(window).trigger('slidein', 50)

You could change around the listener selector and trigger if you have multiple on the page, but the above is working for me.