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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With