Search code examples
cssanimationmathtransitiontiming

Translate CSS transition-timing-function to swiping

I am fading in a div (using CSS transitions) with a custom timing function (http://cubic-bezier.com/#1,0,1,1). The timing function is basically a more extreme version of 'ease-in'.

div {
    opacity: 0;
    transition: opacity 1s;

.in {
    opacity: 1;
    transition-timing-function: cubic-bezier(1, 0, 1, 1);
}

In addition to that, I want to be able to fade in the div by swiping across the screen. I am using the following Jquery to set the opacity according to how far the user has swiped:

documentWidth = $(document).width();

$(document).on('touchmove', function(e) {

    // How much of the animation is completed (in %)
    completion = e.changedTouches[0].pageX / documentWidth;

    $('div').css('opacity', completion);
})

Nooooow, this is linear! Is there a clever Math-person out there who can figure out how to re-state that last line to represent my timing function?

So, for example, if completion is at 25%, the opacity should be around 2%. At 50%, it should be around 11% and at 75% it should be around 31%.

Solution

  • Start by finding a curve that approximates your cubic-bezier curve. With the given points and some online tools it's possible to draw a curve with this equation:

    y = 464085.7 + (0.0174619 - 464085.7)/(1 + (x/22.88957)^4.174069)

    in your case the x represents your completion variable and y the resulting opacity.

    Then your code becomes

    let completion = e.changedTouches[0].pageX / documentWidth;
let exponential = Math.pow((completion / 22.88957), 4.174069);
let opacity = 464085.7 + (0.0174619 - 464085.7)/(1 + exponential);

$('div').css('opacity', opacity);

    (of course you may find a better equation that best fits your needs)