CODEWITHSUNDEEP
javascriptjqueryanimationeasing
enguerranws
enguerranws

Reputation: 8233

Adding easing on requestAnimationFrame

I need to reproduce the same effect as here: http://www.chanel.com/fr_FR/mode/haute-couture.html = a swipe effect on mouse move event.

I just need some help on the animation part.

    function frame() {
      $('.images-gallery').css({
        'transform': 'translateX('+ -mouseXPerc +'%)'
      });
      requestAnimationFrame(frame);
    }

    requestAnimationFrame(frame);
    $(document).on('mousemove',function(e){
      mouseXPerc = e.pageX/containerWidth*100;

    });

Here's what I've done so far. It works as supposed, but as you can imagine, it's pretty raw, I need some easing in that. How can I edit my frame() function to get something smoother ?

Edit : I can't use CSS transition / animation as I change the value on requestAnimationFrame (each 1/30 sec).

Upvotes: 6

Views: 6171

Answers (3)

Dmitry Vasilev
Dmitry Vasilev

Reputation: 6538

Based on fast-ease.js but without ability to interrupt animation

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

function animate(callback, ease, duration, from, to) {
    var id;
    var start = performance.now();
    var end = start + duration;
    function frame(now) {
        var delta = now - start;
        if (delta >= duration) return cancelAnimationFrame(id);
        callback(from + (to - from) * ease(delta / duration));
        id = requestAnimationFrame(frame);
    }
    id = requestAnimationFrame(frame);
};

Upvotes: 1

TKoL
TKoL

Reputation: 13912

I think I've found an answer for you. It's based on this library

First, I would just grab a function from that site

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

Then, I would use a modified form of the example code, something like this

function startAnimation(domEl){
    var stop = false;

    // animating x (margin-left) from 20 to 300, for example
    var startx = 20;
    var destx = 300;
    var duration = 1000;
    var start = null;
    var end = null;

    function startAnim(timeStamp) {
        start = timeStamp;
        end = start + duration;
        draw(timeStamp);
    }

    function draw(now) {
        if (stop) return;
        if (now - start >= duration) stop = true;
        var p = (now - start) / duration;
        val = inOutQuad(p);
        var x = startx + (destx - startx) * val;
        $(domEl).css('margin-left', `${x}px`);
        requestAnimationFrame(draw);
    }

    requestAnimationFrame(startAnim);
}

I might change how 'stop' is calculated, I might write something to ensure that it ends on destx, etc, but that's the basic format

Showing it in this jsfiddle

I'm actually kinda proud of this one. I've been wanting to figure this out for a while. Glad I had a reason to.

Upvotes: 19

Luka
Luka

Reputation: 3089

You can create your own ease function and use it inside your frame function:

var ease = function() {
    var x = 0;
    return function(x_new) {
        x = (x_new+x)*.5;
        return x;
    }
}();

function frame() {
  $('.images-gallery').css({
    'transform': 'translateX('+ -ease(mouseXPerc) +'%)'
  });
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
$(document).on('mousemove',function(e){
  mouseXPerc = e.pageX/containerWidth*100;

});

Upvotes: 0

Related Questions