{"_id":"jquery-bez","_rev":"3-4740e1de885462c85b5f2382a763191f","name":"jquery-bez","description":"Specify jQuery easing functions as cubic-bezier co-ordinates","dist-tags":{"latest":"1.0.11"},"versions":{"1.0.11":{"name":"jquery-bez","version":"1.0.11","description":"Specify jQuery easing functions as cubic-bezier co-ordinates","main":"lib/jquery.bez.js","repository":{"type":"git","url":"git+https://github.com/rdallasgray/bez.git"},"scripts":{"build":"make"},"keywords":["jquery","animation","bezier","easing"],"author":{"name":"Robert Dallas Gray"},"license":"FreeBSD","bugs":{"url":"https://github.com/rdallasgray/bez/issues"},"homepage":"https://github.com/rdallasgray/bez","devDependencies":{"jquery":"^2.2.0","uglifyjs":"^2.4.10"},"gitHead":"ce645f42f6b27b76619d7f4889d7400c30426521","_id":"jquery-bez@1.0.11","_shasum":"ad39e8ca7bd511890a3993845bfce5dd71a213d7","_from":".","_npmVersion":"2.14.4","_nodeVersion":"4.1.1","_npmUser":{"name":"rdallasgray","email":"npm@robertdallasgray.com"},"dist":{"shasum":"ad39e8ca7bd511890a3993845bfce5dd71a213d7","tarball":"https://registry.npmjs.org/jquery-bez/-/jquery-bez-1.0.11.tgz","integrity":"sha512-UPvUc7qotyLUzJIOk6g5ftxB4NP7zWv6dv8EN86lfXZsQs6GQUNDbFV34DhuLCJsgnF+dUybofs9qLufk5QO5A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzBOQMb6tE3TzFdAdJvc3XZLAP3u2nIV06bH6H+KCssAiEAzTxOQuldFIiEUvs5DWf5a7d+IzCIR22rU8hKpmXfzd8="}]},"maintainers":[{"name":"rdallasgray","email":"npm@robertdallasgray.com"}]}},"readme":"What is Bez?\n============\nBez is a small plugin for jQuery which allows you to specify jQuery easing functions as cubic-bezier co-ordinates.\n\nYou can see Bez in action in my Roto scrolling plugin: http://github.com/rdallasgray/roto.\n\n\nSHORT VERSION\n-------------\nGive Bez an array of cubic-bezier co-ordinates and it returns a jQuery-compatible easing function, like so:\n\n    $(\"#myElement\").animate({ left: -100 }, 500, $.bez([0,0,0.6,1]));\n\n\nLONG VERSION: Why would I want to do that?\n------------------------------------------\nBecause the new CSS3 transitions use cubic-bezier co-ordinates to create easing functions. \n\nAt present, jQuery.animate doesn't support CSS3 transitions, and CSS3 transitions don't support jQuery easing functions -- so if you want to use transitions in the newer browsers, but allow older ones to fall back to jQuery.animate, and you want to use custom easing, you have to supply BOTH cubic-bezier easing functions AND jQuery-compatible easing functions. Which is a pain.\n\nSo Bez allows you to specify ALL your easing functions as cubic-bezier co-ordinates, and automatically converts them to jQuery-compatible easing functions on the fly.\n\n\nEh?\n---\nOK, assume you have an element like this:\n\n    <div id=\"trans\" style=\"-webkit-transition: left 0.5s ease 0s\">Transition demo element</div>\n\nThat tells the browser that this element will transition on the css property \"left\", that the transition will take 0.5s, the easing function will be the default, and there will be 0s delay before the transition. See http://www.w3.org/TR/css3-transitions/.\n\nTo make the element slide 100px to the left, all we have to do is set the \"left\" property. Here's how we do it using jQuery:\n    \n    $(\"#trans\").css(\"left\", -100);\n    \nOK. So how about browsers that don't support CSS transitions? We need to do it all in jQuery:\n\n    $(\"#trans\").animate({ left: -100 }, 500);\n    \nThat slides the element 100px to the left with the default \"swing\" easing function.\n\n\nSo let's introduce non-default easing. In jQuery, there are only two built-in functions: \"linear\" and \"swing\". Fine, but not very versatile. The excellent jQuery Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/) defines many more, so let's presume we've included that in our code. Now we can say:\n\n    $(\"#trans\").animate({ left: -100 }, 500, \"easeOutCubic\");\n\nThat gives us a nice, smooth, custom easing. So -- how do we apply similar easing to the same animation using CSS3 transitions?\n\nWell, you sort of can't. What you need to do is give an acceptable setting to the \"translation-timing-function\" CSS property (again see the w3c page on CSS transitions). The \"ease-out\" setting would be close, but if we want to get more precise, we need to give the setting as cubic-bezier co-ordinates, like so: \"transition-timing-function: cubic-bezier(x1, y1, x2, y2);\".\n\nThe cubic-bezier setting is fairly simple to understand, especially if you've ever used Illustrator or Freehand: you give two sets of co-ordinates -- x1, y1, x2, y2 -- which give the locations of control handles on a bezier curve. These control handles deform the curve, and the curve can be considered as a function. Give the function a number between 0 and 1, defining the percentage complete of the animation, and it outputs another number between 0 and 1, giving the amount of change in the property to be animated. So, for example, a convex curve (like a quarter circle) gives an animation that starts fast and gets slower towards the end. That would be \"cubic-bezier(0,0.5,0.5,0)\". There's a nice interactive demo at http://www.roblaplaca.com/examples/bezierBuilder/.\n\nSo, to change the easing in our CSS3-transition-capable animation, we'd need to do this:\n\n    $(\"#trans\").css(\"-webkit-translation-timing-function\", \"cubic-bezier(0,0.5,0.5,0)\");\n    \nThat gives us the faster-then-slower animation that I mentioned above. How do we transfer a similar easing to our jQuery.animate animation? Well, again, we sort of can't.\n\nThis is where Bez comes in.\n\nSay we have an option bezierEasing, which we can specify as an array of four numbers:\n\n    var bezierEasing = [0, 0.5, 0.5, 0];\n    \nThen we can do this to make that into a CSS3 timing function:\n\n    var tFunc = \"cubic-bezier(\" + bezierEasing.join(\",\") + \")\";\n    $(\"#trans\").css(\"-webkit-translation-timing-function\", tFunc);\n    \nWe can then fall back to jQuery animate by doing this:\n\n    $(\"#trans\").animate({ left: -100 }, 500, $.bez(bezierEasing));\n    \nWhat happened there? We gave Bez our array of cubic-bezier co-ordinates, and it returned a jQuery-compatible easing function. Magic!\n\n\nAny limitations?\n----------------\nCubic-bezier easing as used in CSS3 is not as powerful or versatile as jQuery's easing functions, so you can't really do some of the nice things that the jQuery Easing Plugin does, like bounces.\n\n\nAcknowledgements\n----------------\nI am not a mathematician, so I had to do a fair bit of Googling to get the maths (reasonably) right. Big thanks to Nikolay V. Nemshilov for this article: http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html.\n\nAlso, after I posted this plugin, Janne Aukia got in touch to let me know about his similar plugin, Easie: https://github.com/jaukia/easie. It looks excellent, and uses a direct lift of the Webkit bezier timing code. It's a little larger than Bez, but does a little more.\n","maintainers":[{"name":"rdallasgray","email":"npm@robertdallasgray.com"}],"time":{"modified":"2022-06-19T04:58:58.218Z","created":"2016-01-22T09:23:29.677Z","1.0.11":"2016-01-22T09:23:29.677Z"},"homepage":"https://github.com/rdallasgray/bez","keywords":["jquery","animation","bezier","easing"],"repository":{"type":"git","url":"git+https://github.com/rdallasgray/bez.git"},"author":{"name":"Robert Dallas Gray"},"bugs":{"url":"https://github.com/rdallasgray/bez/issues"},"license":"FreeBSD","readmeFilename":"README.md"}