5

I'm trying to create custom easing for a snap.svg animation. I looked at the documentation (http://snapsvg.io/docs/#mina), but it's not clear to me how I could convert a CSS3 style cubic-bezier (for example: cubic-bezier(0.17, 0.67, 0.25, 0.99)) to custom easing with Snap.svg

3
  • Do you have a function already that could work, just wondering if its the function itself, or the conversion to a custom easing function, or both. If you have one already, it may be worth posting to have a fiddle with.
    – Ian
    Aug 12, 2014 at 15:29
  • No, i don't have a function. I don't understand the parameters mina expects... what are "slave" numbers?
    – arrow
    Aug 12, 2014 at 15:46
  • I don't think you need to worry about those. I think typically most Snap easings just seem to take a value of 0..1 which is whereabouts it is through its animation (I think). So I was wondering if a function which took n and then the cubics parameters would be possible.
    – Ian
    Aug 12, 2014 at 15:52

1 Answer 1

7

I think you would firstly need a cubic-bezier function, then its relatively simple to include. (Note I don't pretend to understand any of the cubic code, just trying to highlight how to use it, I also don't know how good the example is).

I'm not sure if I'm allowed to post someone elses code on here really, and it makes sense to reference git in case its updated, so I have included the link, and displaying mainly how you would use it here.

Example jsfiddle

Github code I am using for the example here Read the doc there on how best to use it.

Define your cubic-bezier func...(code here from link above)

var cubicBezier = function(x1, y1, x2, y2, epsilon){
    var curveX = function(t){
...
    }
} // end of cubic-bezier function, see code on github link


// Create the specific bezier easing func... 
var duration = 200;
var epsilon = (1000 / 60 / duration) / 4;

var timingFunction = cubicBezier(0.08, 1.05, 0.95, 0.12, epsilon);
var timingFunction2 = cubicBezier(0.5, 0.5, 0.5, 0.5, epsilon );

// Now the Snap stuff 
var paper = Snap(600, 600);

var r =  paper.rect(0,0,200, 200).attr({fill: "blue" });
var r2 = paper.rect(0,200,200,200).attr({ fill: "green" });

r.animate({ x: 200 }, 1000, timingFunction );
r2.animate({ x: 200 }, 1000, timingFunction2 );

As you can see in the last 2 lines, we include the custom easing function in the animate call.

1
  • Works thanks, just missing a } after } // end of cubic-bezier function, see code on github link
    – TeT Psy
    Jul 19, 2016 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.