1/* KUTE.js - The Light Tweening Engine 2 * by dnp_theme 3 * Licensed under MIT-License 4 */ 5(function (root,factory) { 6 if (typeof define === 'function' && define.amd) { 7 define([], factory); // AMD. Register as an anonymous module. 8 } else if (typeof exports == 'object') { 9 module.exports = factory(); // Node, not strict CommonJS 10 } else { 11 root.KUTE = factory(); 12 } 13}(this, function () { 14 "use strict"; 15 16 // set a custom scope for KUTE.js 17 var g = typeof global !== 'undefined' ? global : window, time = g.performance, 18 body = document.body, tweens = [], tick = null, // tick must be null!! 19 20 // strings 21 length = 'length', 22 split = 'split', 23 indexOf = 'indexOf', 24 replace = 'replace', 25 26 offsetWidth = 'offsetWidth', 27 offsetHeight = 'offsetHeight', 28 29 options = 'options', 30 valuesStart = 'valuesStart', 31 valuesEnd = 'valuesEnd', 32 valuesRepeat = 'valuesRepeat', 33 34 element = 'element', 35 playing = 'playing', 36 37 duration = 'duration', 38 delay = 'delay', 39 offset = 'offset', 40 repeat = 'repeat', 41 repeatDelay = 'repeatDelay', 42 yoyo = 'yoyo', 43 easing = 'easing', 44 chain = 'chain', 45 keepHex = 'keepHex', 46 47 style = 'style', 48 dataTweening = 'data-tweening', 49 getElementsByTagName = 'getElementsByTagName', 50 addEventListener = 'addEventListener', 51 removeEventListener = 'removeEventListener'; 52 53 54 //supported properties 55 var colorProps = ['color', 'backgroundColor'], // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) 56 boxModelProps = ['top', 'left', 'width', 'height'], 57 transformFunctions = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], 58 scrollProp = ['scroll'], // has no default value, it's calculated on tween start 59 opacityProp = ['opacity'], // opacity 60 coreProps = colorProps.concat( opacityProp, boxModelProps, transformFunctions), 61 defaultPropsValues = {}; 62 63 //populate default values object 64 for ( var propertyIndex=0, allCorePropLength = coreProps[length], coreProp; propertyIndex < allCorePropLength; propertyIndex++ ){ 65 coreProp = coreProps[propertyIndex]; 66 if (colorProps[indexOf](coreProp) !== -1){ 67 defaultPropsValues[coreProp] = 'rgba(0,0,0,0)'; // defaultPropsValues[coreProp] = {r:0,g:0,b:0,a:1}; 68 } else if ( boxModelProps[indexOf](coreProp) !== -1 ) { 69 defaultPropsValues[coreProp] = 0; 70 } else if ( coreProp === 'translate3d' ){ // px 71 defaultPropsValues[coreProp] = [0,0,0]; 72 } else if ( coreProp === 'translate' ){ // px 73 defaultPropsValues[coreProp] = [0,0]; 74 } else if ( coreProp === 'rotate' || /X|Y|Z/.test(coreProp) ){ // deg 75 defaultPropsValues[coreProp] = 0; 76 } else if ( coreProp === 'scale' || coreProp === 'opacity' ){ // unitless 77 defaultPropsValues[coreProp] = 1; 78 } 79 } 80 81 // default tween options, since 1.6.1 82 var defaultOptions = { 83 duration: 700, 84 delay: 0, 85 offset: 0, 86 repeat: 0, 87 repeatDelay: 0, 88 yoyo: false, 89 easing: 'linear', 90 keepHex: false, 91 }, 92 // tools / utils 93 getPrefix = function() { //returns browser prefix 94 var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], thePrefix; 95 for (var pIndex = 0, pfl = prefixes[length]; pIndex < pfl; pIndex++) { 96 if (prefixes[pIndex]+'Transform' in body[style]) { thePrefix = prefixes[pIndex]; break; } 97 } 98 return thePrefix; 99 }, 100 property = function(propertyToPrefix){ // returns prefixed property | property 101 var prefixRequired = (!(propertyToPrefix in body[style])) ? true : false, prefix = getPrefix(); // is prefix required for property | prefix 102 return prefixRequired ? prefix + (propertyToPrefix.charAt(0).toUpperCase() + propertyToPrefix.slice(1)) : propertyToPrefix; 103 }, 104 selector = function(el,multi){ // a public selector utility 105 var requestedElem; 106 if (multi){ 107 requestedElem = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el); 108 } else { 109 requestedElem = typeof el === 'object' ? el : document.querySelector(el); 110 } 111 if (requestedElem === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el); 112 return requestedElem; 113 }, 114 radToDeg = function(a) { return a*180/Math.PI; }, 115 trueDimension = function (dimValue,isAngle) { //true dimension returns { v = value, u = unit } 116 var intValue = parseInt(dimValue) || 0, mUnits = ['px','%','deg','rad','em','rem','vh','vw'], theUnit; 117 for (var mIndex=0; mIndex<mUnits[length]; mIndex++) { 118 if ( typeof dimValue === 'string' && dimValue[indexOf](mUnits[mIndex]) !== -1 ) { 119 theUnit = mUnits[mIndex]; break; 120 } 121 } 122 theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px'); 123 return { v: intValue, u: theUnit }; 124 }, 125 trueColor = function (colorString) { // replace transparent and transform any color to rgba()/rgb() 126 if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string 127 var vrgb = colorString[replace](/\s|\)/,'')[split]('(')[1][split](','), colorAlpha = vrgb[3] ? vrgb[3] : null; 128 if (!colorAlpha) { 129 return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) }; 130 } else { 131 return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) }; 132 } 133 } else if (/^#/.test(colorString)) { 134 var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b }; 135 } else if (/transparent|none|initial|inherit/.test(colorString)) { 136 return { r: 0, g: 0, b: 0, a: 0 }; 137 } else if (!/^#|^rgb/.test(colorString) ) { // maybe we can check for web safe colors 138 var siteHead = document[getElementsByTagName]('head')[0]; siteHead[style].color = colorString; 139 var webColor = g.getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor[replace](/[^\d,]/g, '')[split](',') : [0,0,0]; 140 siteHead[style].color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) }; 141 } 142 }, 143 rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA 144 return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 145 }, 146 hexToRGB = function (hex) { 147 var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 148 hex = hex[replace](hexShorthand, function (m, r, g, b) { 149 return r + r + g + g + b + b; 150 }); 151 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 152 return result ? { 153 r: parseInt(result[1], 16), 154 g: parseInt(result[2], 16), 155 b: parseInt(result[3], 16) 156 } : null; 157 }, 158 getInlineStyle = function(el) { // get transform style for element from cssText for .to() method 159 if (!el) return; // if the scroll applies to `window` it returns as it has no styling
160 var css = el[style].cssText[replace](/\s/g,'')[split](';'), transformObject = {}; // the cssText | the resulting transform object 161 162 // if we have any inline style in the cssText attribute, usually it has higher priority 163 for ( var i=0, csl = css[length]; i<csl; i++ ){ 164 if ( /transform/i.test(css[i])) { 165 var tps = css[i][split](':')[1][split](')'); //all transform properties 166 for ( var k=0, tpl = tps[length]-1; k< tpl; k++){ 167 var tpv = tps[k][split]('('), tp = tpv[0], tv = tpv[1]; // each transform property, the sp is for transform property 168 if ( transformFunctions[indexOf](tp) !== -1 ){ 169 transformObject[tp] = /translate3d/.test(tp) ? tv[split](',') : tv; 170 } 171 } 172 } 173 } 174 return transformObject; 175 }, 176 getCurrentStyle = function (elem,propertyName) { // get computed style property for element for .to() method 177 var styleAttribute = elem[style], computedStyle = g.getComputedStyle(elem,null) || elem.currentStyle, 178 prefixedProp = property(propertyName), //the computed style | prefixed property 179 styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) ? styleAttribute[propertyName] : computedStyle[prefixedProp]; 180 if ( propertyName !== 'transform' && (prefixedProp in computedStyle || prefixedProp in styleAttribute) ) { 181 if ( styleValue ){ 182 if (prefixedProp === 'filter') { // handle IE8 opacity 183 var filterValue = parseInt(styleValue[split]('=')[1][replace](')','')); 184 return parseFloat(filterValue/100); 185 } else { 186 return styleValue; 187 } 188 } else { 189 return defaultPropsValues[propertyName]; 190 } 191 } 192 }, 193 194 //more internals 195 getAll = function () { return tweens; }, 196 removeAll = function () { tweens = []; }, 197 add = function (tw) { tweens.push(tw); }, 198 remove = function (tw) { var i = tweens[indexOf](tw); if (i !== -1) { tweens.splice(i, 1); }}, 199 stop = function () { 200 setTimeout(function(){ // re-added for #81 201 if (!tweens[length] && tick) { _cancelAnimationFrame(tick); tick = null; } 202 },64) 203 }, 204 205 canTouch = ('ontouchstart' in g || navigator && navigator.msMaxTouchPoints) || false, // support Touch? 206 touchOrWheel = canTouch ? 'touchstart' : 'mousewheel', mouseEnter = 'mouseenter', //events to prevent on scroll 207 _requestAnimationFrame = g.requestAnimationFrame || g.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) }, 208 _cancelAnimationFrame = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) }, 209 transformProperty = property('transform'), 210 211 // true scroll container 212 html = document[getElementsByTagName]('HTML')[0], 213 scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? body : html, 214 // scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html, 215 // scrollContainer = document.compatMode == 'BackCompat' ? body : html, // webkit browsers are now srolling the HTML 216 217 // browser detection 218 isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false, 219 isIE8 = isIE === 8, // check IE8/IE 220 221 222 // KUTE.js INTERPOLATORS 223 interpolate = g.Interpolate = {}, 224 number = interpolate.number = function(a,b,v) { // number1, number2, progress 225 a = +a; b -= a; return a + b * v; 226 }, 227 unit = interpolate.unit = function(a,b,u,v) { // number1, number2, unit, progress 228 a = +a; b -= a; return ( a + b * v ) + u; 229 }, 230 color = interpolate.color = function(a,b,v,toHex){ // rgba1, rgba2, progress, convertToHex(true/false) 231 var _c = {}, c, ep = ')', cm =',', rgb = 'rgb(', rgba = 'rgba('; 232 for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; } 233 return toHex ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? rgb + _c.r + cm + _c.g + cm + _c.b + ep : rgba + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep; 234 }, 235 translate = interpolate.translate = function (a,b,u,v){ 236 var translation = {}; 237 for (var ax in b){ 238 translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 ) + u; 239 } 240 return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' : 241 'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')'; 242 }, 243 rotate = interpolate.rotate = function (a,b,u,v){ 244 var rotation = {}; 245 for ( var rx in b ){ 246 rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')') 247 : (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')'); 248 } 249 return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||''); 250 }, 251 skew = interpolate.skew = function (a,b,u,v){ 252 var skewProp = {}; 253 for ( var sx in b ){ 254 skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 1000 >> 0) / 1000) + u + ')'; 255 } 256 return (skewProp.skewX||'') + (skewProp.skewY||''); 257 }, 258 scale = interpolate.scale = function(a,b,v){ 259 return 'scale(' + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ')'; 260 }, 261 262 // KUTE.js DOM update functions 263 DOM = {}, 264 ticker = function(t) { 265 var i = 0; 266 while ( i < tweens[length] ) { 267 if ( update.call(tweens[i],t) ) { 268 i++; 269 } else { 270 tweens.splice(i, 1); 271 } 272 } 273 tick = _requestAnimationFrame(ticker); 274 }, 275 update = function(t) { 276 t = t || time.now(); 277 if ( t < this._startTime && this[playing] ) { return true; } 278
279 var elapsed = Math.min(( t - this._startTime ) / this[options][duration], 1), progress = this[options][easing](elapsed); // calculate progress 280 281 for (var tweenProp in this[valuesEnd]){ // render the DOM update 282 DOM[tweenProp](this[element],tweenProp,this[valuesStart][tweenProp],this[valuesEnd][tweenProp],progress,this[options]); 283 } 284 285 if (this[options].update) { this[options].update.call(this); } // fire the updateCallback 286 287 if (elapsed === 1) { 288 if (this[options][repeat] > 0) { 289 if ( isFinite(this[options][repeat] ) ) { this[options][repeat]--; } 290 291 if (this[options][yoyo]) { // handle yoyo 292 this.reversed = !this.reversed; 293 reverse.call(this); 294 } 295 296 this._startTime = (this[options][yoyo] && !this.reversed) ? t + this[options][repeatDelay] : t; //set the right time for delay 297 return true; 298 } else { 299 300 if (this[options].complete) { this[options].complete.call(this); } // fire the complete callback 301 302 scrollOut.call(this); // unbind preventing scroll when scroll tween finished 303 304 for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) { // start animating chained tweens 305 this[options][chain][i].start(); 306 } 307 308 //stop ticking when finished 309 close.call(this); 310 } 311 return false; 312 } 313 return true; 314 }, 315 316 // applies the transform origin and perspective 317 perspective = function () { 318 var el = this[element], ops = this[options]; 319 if ( ops.perspective !== undefined && transformProperty in this[valuesEnd] ) { // element perspective 320 this[valuesStart][transformProperty]['perspective'] = this[valuesEnd][transformProperty]['perspective']; 321 } 322 // element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193 323 if ( ops.transformOrigin !== undefined && (!('svgTransform' in this[valuesEnd])) ) { el[style][property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only 324 if ( ops.perspectiveOrigin !== undefined ) { el[style][property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin 325 if ( ops.parentPerspective !== undefined ) { el.parentNode[style][property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective 326 if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode[style][property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin 327 }, 328 329 // plugin connector objects 330 prepareStart = {}, // check current property value when .to() method is used 331 crossCheck = {}, // checks for differences between start and end value, try to make sure start unit and end unit are same as well as consistent, stack transforms, process SVG paths 332 333 // parse properties object 334 // string parsing and property specific value processing 335 parseProperty = { // we already start working on core supported properties 336 boxModel : function(tweenProp,inputValue){ 337 if (!(tweenProp in DOM)){ 338 DOM[tweenProp] = function(elem,tweenProp,a,b,v){ 339 elem[style][tweenProp] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px'; 340 } 341 } 342 var boxValue = trueDimension(inputValue), offsetProp = tweenProp === 'height' ? offsetHeight : offsetWidth; 343 return boxValue.u === '%' ? boxValue.v * this[element][offsetProp] / 100 : boxValue.v; 344 }, 345 transform : function(tweenProp,inputValue) { 346 if (!(transformProperty in DOM)) { 347 DOM[transformProperty] = function(elem,tweenProp,a,b,v,o){ 348 elem[style][tweenProp] = (a.perspective||'') 349 + ('translate' in a ? translate(a.translate,b.translate,'px',v):'') 350 + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'') 351 + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'') 352 + ('scale' in a ? scale(a.scale,b.scale,v):''); 353 } 354 } 355 356 // process each transform property 357 if (/translate/.test(tweenProp)) { 358 if (tweenProp === 'translate3d') { 359 var t3d = inputValue[split](','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2])); 360 return { 361 translateX : t3d0.u === '%' ? (t3d0.v * this[element][offsetWidth] / 100) : t3d0.v, 362 translateY : t3d1.u === '%' ? (t3d1.v * this[element][offsetHeight] / 100) : t3d1.v, 363 translateZ : t3d2.u === '%' ? (t3d2.v * (this[element][offsetHeight] + this[element][offsetWidth]) / 200) : t3d2.v // to be changed with something like element and/or parent perspective 364 }; 365 } else if (/^translate(?:[XYZ])$/.test(tweenProp)) { 366 var t1d = trueDimension(inputValue), percentOffset = /X/.test(tweenProp) ? this[element][offsetWidth] / 100 : /Y/.test(tweenProp) ? this[element][offsetHeight] / 100 : (this[element][offsetWidth]+this[element][offsetHeight]) / 200; 367 368 return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v; 369 } else if (tweenProp === 'translate') { 370 var tv = typeof inputValue === 'string' ? inputValue[split](',') : inputValue, t2d = {}, t2dv, 371 t2d0 = trueDimension(tv[0]), t2d1 = tv[length] ? trueDimension(tv[1]) : {v: 0, u: 'px'}; 372 if (tv instanceof Array) { 373 t2d.x = t2d0.u === '%' ? (t2d0.v * this[element][offsetWidth] / 100) : t2d0.v, 374 t2d.y = t2d1.u === '%' ? (t2d1.v * this[element][offsetHeight] / 100) : t2d1.v 375 } else { 376 t2dv = trueDimension(tv); 377 t2d.x = t2dv.u === '%' ? (t2dv.v * this[element][offsetWidth] / 100) : t2dv.v, 378 t2d.y = 0 379 } 380 381 return t2d; 382 } 383 } else if (/rotate|skew/.test(tweenProp)) { 384 if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(tweenProp)) { 385 var r3d = trueDimension(inputValue,true); 386 return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v; 387 } else if (tweenProp === 'rotate') { 388 var r2d = {}, r2dv = trueDimension(inputValue,true); 389 r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v; 390 return r2d; 391 } 392 } else if (tweenProp === 'scale') { 393 return parseFloat(inputValue); // this must be parseFloat(v) 394 } 395 }, 396 unitless : function(tweenProp,inputValue){ // scroll | opacity 397 if (/scroll/.test(tweenProp) && !(tweenProp in DOM) ){ 398 DOM[tweenProp] = function(elem,tweenProp,a,b,v) { 399 elem.scrollTop = (number(a,b,v))>>0; 400 }; 401 } else if (tweenProp === 'opacity') { 402 if (!(tweenProp in DOM)) { 403 if (isIE8) { 404 DOM[tweenProp] = function(elem,tweenProp,a,b,v) { 405 var st = "alpha(opacity=", ep = ')'; 406 elem[style].filter = st + ((number(a,b,v) * 100)>>0) + ep; 407 }; 408 } else { 409 DOM[tweenProp] = function(elem,tweenProp,a,b,v) { 410 elem[style].opacity = ((number(a,b,v) * 100)>>0)/100; 411 }; 412 } 413 } 414 } 415 return parseFloat(inputValue); 416 }, 417 colors : function(tweenProp,inputValue){ // colors 418 if (!(tweenProp in DOM)) { 419 DOM[tweenProp] = function(elem,tweenProp,a,b,v,o) { 420 elem[style][tweenProp] = color(a,b,v,o[keepHex]); 421 }; 422 } 423 return trueColor(inputValue); 424 } 425 }, 426 427 // process properties for endValues and startValues or one of them 428 preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end 429 var propertiesObject = fn === 'start' ? this[valuesStart] : this[valuesEnd], 430 skewObject = {}, rotateObject = {}
430, translateObject = {}, transformObject = {}; 431 432 for (var x in obj) { 433 if (transformFunctions[indexOf](x) !== -1) { // transform object gets built here 434 var prepAxis = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, obj[x]); 435 if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d 436 437 for (var fnIndex = 0; fnIndex < 3; fnIndex++) { 438 var translateAxis = prepAxis[fnIndex]; 439 if ( /3d/.test(x) ) { 440 translateObject['translate' + translateAxis] = parseProperty.transform.call(this,'translate' + translateAxis, obj[x][fnIndex]); 441 } else { 442 translateObject['translate' + translateAxis] = ('translate' + translateAxis in obj) ? parseProperty.transform.call(this,'translate' + translateAxis, obj['translate' + translateAxis]) : 0; 443 } 444 } 445 transformObject['translate'] = translateObject; 446 } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew 447 var objectName = /rotate/.test(x) ? 'rotate' : 'skew', 448 rotationOrSkew = objectName === 'rotate' ? rotateObject : skewObject; 449 for (var rIndex = 0; rIndex < 3; rIndex++) { 450 var oneAxis = prepAxis[rIndex]; 451 if ( obj[objectName+oneAxis] !== undefined && x !== 'skewZ' ) { 452 rotationOrSkew[objectName+oneAxis] = parseProperty.transform.call(this,objectName+oneAxis, obj[objectName+oneAxis]); 453 } 454 } 455 transformObject[objectName] = rotationOrSkew; 456 } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation 457 transformObject[x] = parseProperty.transform.call(this, x, obj[x]); 458 } 459 propertiesObject[transformProperty] = transformObject; 460 } else { 461 if ( boxModelProps[indexOf](x) !== -1 ) { 462 propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]
462); 463 } else if (opacityProp[indexOf](x) !== -1 || x === 'scroll') { 464 propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]); 465 } else if (colorProps[indexOf](x) !== -1) { 466 propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]); 467 } else if (x in parseProperty) { // or any other property from css/ attr / svg / third party plugins 468 propertiesObject[x] = parseProperty[x].call(this,x,obj[x]); 469 } 470 } 471 } 472 }, 473 reverse = function () { 474 if (this[options][yoyo]) { 475 for (var reverseProp in this[valuesEnd]) { 476 var tmp = this[valuesRepeat][reverseProp]; 477 this[valuesRepeat][reverseProp] = this[valuesEnd][reverseProp]; 478 this[valuesEnd][reverseProp] = tmp; 479 this[valuesStart][reverseProp] = this[valuesRepeat][reverseProp]; 480 } 481 } 482 }, 483 close = function () { // when animation is finished reset repeat, yoyo&reversed tweens 484 if (this[repeat] > 0) { this[options][repeat] = this[repeat]; } 485 if (this[options][yoyo] && this.reversed===true) { reverse.call(this); this.reversed = false; } 486 this[playing] = false; 487 488 stop(); // when all animations are finished, stop ticking after ~3 frames 489 }, 490 preventScroll = function (eventObj) { // prevent mousewheel or touch events while tweening scroll 491 var data = body.getAttribute(dataTweening); 492 if (data && data === 'scroll') { eventObj.preventDefault(); } 493 }, 494 scrollOut = function(){ //prevent scroll when tweening scroll 495 if ( 'scroll' in this[valuesEnd] && body.getAttribute(dataTweening)) { 496 body.removeAttribute(dataTweening); 497 } 498 }, 499 scrollIn = function(){ 500 if ( 'scroll' in this[valuesEnd] && !body.getAttribute(dataTweening)) { 501 body.setAttribute(dataTweening, 'scroll'); 502 } 503 }, 504 processEasing = function (fn) { 505 if ( typeof fn === 'function') { 506 return fn; 507 } else if ( typeof fn === 'string' ) { 508 return easingFn[fn]; // regular Robert Penner Easing Functions 509 } 510 }, 511 getStartValues = function () { // stack transform props for .to() chains 512 var startValues = {}, currentStyle = getInlineStyle(this[element]), 513 degreeProps = ['rotate','skew'], startAxis = ['X','Y','Z']; 514 515 for (var tweenProperty in this[valuesStart]){ 516 if ( transformFunctions[indexOf](tweenProperty) !== -1 ) { 517 var r2d = (/(rotate|translate|scale)$/.test(tweenProperty)); 518 if ( /translate/.test(tweenProperty) && tweenProperty !== 'translate' ) { 519 startValues['translate3d'] = currentStyle['translate3d'] || defaultPropsValues[tweenProperty]; 520 } else if ( r2d ) { // 2d transforms 521 startValues[tweenProperty] = currentStyle[tweenProperty] || defaultPropsValues[tweenProperty]; 522 } else if ( !r2d && /rotate|skew/.test(tweenProperty) ) { // all angles 523 for (var degIndex=0; degIndex<2; degIndex++) { 524 for (var axisIndex = 0; axisIndex<3; axisIndex++) { 525 var s = degreeProps[degIndex]+startAxis[axisIndex]; 526 if (transformFunctions[indexOf](s) !== -1 && (s in this[valuesStart]) ) { startValues[s] = currentStyle[s] || defaultPropsValues[s]; } 527 } 528 } 529 } 530 } else { 531 if ( tweenProperty !== 'scroll' ) { 532 if (tweenProperty === 'opacity' && isIE8 ) { // handle IE8 opacity 533 var currentOpacity = getCurrentStyle(this[element],'filter'); 534 startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : defaultPropsValues['opacity']; 535 } else { 536 if ( coreProps[indexOf](tweenProperty) !== -1 ) { 537 startValues[tweenProperty] = getCurrentStyle(this[element],tweenProperty) || d[tweenProperty]; 538 } else { // plugins register here 539 startValues[tweenProperty] = tweenProperty in prepareStart ? prepareStart[tweenProperty].call(this,tweenProperty,this[valuesStart][tweenProperty]) : 0; 540 } 541 } 542 } else { 543 startValues[tweenProperty] = this[element] === scrollC
543ontainer ? (g.pageYOffset || scrollContainer.scrollTop) : this[element].scrollTop; 544 } 545 } 546 } 547 for ( var currentProperty in currentStyle ){ // also add to startValues values from previous tweens 548 if ( transformFunctions[indexOf](currentProperty) !== -1 && (!( currentProperty in this[valuesStart] )) ) { 549 startValues[currentProperty] = currentStyle[currentProperty] || defaultPropsValues[currentProperty]; 550 } 551 } 552 553 this[valuesStart] = {}; 554 preparePropertiesObject.call(this,startValues,'start'); 555 556 if ( transformProperty in this[valuesEnd] ) { // let's stack transform 557 for ( var sp in this[valuesStart][transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale 558 if ( sp !== 'perspective') { 559 if ( typeof this[valuesStart][transformProperty][sp] === 'object' ) { 560 for ( var spp in this[valuesStart][transformProperty][sp] ) { // 3rd level 561 if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { this[valuesEnd][transformProperty][sp] = {}; } 562 if ( typeof this[valuesStart][transformProperty][sp][spp] === 'number' && typeof this[valuesEnd][transformProperty][sp][spp] === 'undefined' ) { 563 this[valuesEnd][transformProperty][sp][spp] = this[valuesStart][transformProperty][sp][spp]; 564 } 565 } 566 } else if ( typeof this[valuesStart][transformProperty][sp] === 'number' ) { 567 if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { // scale 568 this[valuesEnd][transformProperty][sp] = this[valuesStart][transformProperty][sp]; 569 } 570 } 571 } 572 } 573 } 574 }; 575 576 // core easing functions 577 var easingFn = g.Easing = {}; 578 easingFn.linear = function (t) { return t; }; 579 easingFn.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; }; 580 easingFn.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); }; 581 easingFn.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(Math.PI * t) - 1); }; 582 easingFn.easingQuadraticIn = function (t) { return t*t; }; 583 easingFn.easingQuadraticOut = function (t) { return t*(2-t); }; 584 easingFn.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }; 585 easingFn.easingCubicIn = function (t) { return t*t*t; }; 586 easingFn.easingCubicOut = function (t) { return (--t)*t*t+1; }; 587 easingFn.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }; 588 easingFn.easingQuarticIn = function (t) { return t*t*t*t; }; 589 easingFn.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; }; 590 easingFn.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; }; 591 easingFn.easingQuinticIn = function (t) { return t*t*t*t*t; }; 592 easingFn.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; }; 593 easingFn.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }; 594 easingFn.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); }; 595 easingFn.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); }; 596 easingFn.easingCircularInOut = function(t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); }; 597 easingFn.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; }; 598 easingFn.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); }; 599 easingFn.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); }; 600 easingFn.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }; 601 easingFn.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; }; 602 easingFn.easingBackInOut = function(t) { var s = 1.70158 * 1.525; if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)); return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); }; 603 easingFn.easingElasticIn = function(t) { 604 var s, _kea = 0.1, _kep = 0.4; 605 if ( t === 0 ) return 0; if ( t === 1 ) return 1; 606 if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2; 607 return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ); 608 }; 609 easingFn.easingElasticOut = function(t) { 610 var s, _kea = 0.1, _kep = 0.4; 611 if ( t === 0 ) return 0; if ( t === 1 ) return 1; 612 if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ; 613 return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) + 1 ); 614 }; 615 easingFn.easingElasticInOut = function(t) { 616 var s, _kea = 0.1, _kep = 0.4; 617 if ( t === 0 ) return 0; if ( t === 1 ) return 1; 618 if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ; 619 if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ); 620 return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) * 0.5 + 1; 621 }; 622 easingFn.easingBounceIn = function(t) { return 1 - easingFn.easingBounceOut( 1 - t ); }; 623 easingFn.easingBounceOut = function(t) { 624 if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } 625 else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } 626 else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } 627 else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; } 628 }; 629 easingFn.easingBounceInOut = function(t) { if ( t < 0.5 ) return easingFn.easingBounceIn( t * 2 ) * 0.5; return easingFn.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;}; 630
631 // single Tween object construct 632 var Tween = function (targetElement, startObject, endObject, optionsObj) { 633 this[element] = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to 634 635 this[playing] = false; 636 this.reversed = false; 637 this.paused = false; 638 639 this._startTime = null; 640 this._pauseTime = null; 641 642 this._startFired = false; 643 this[options] = {}; for (var o in optionsObj) { this[options][o] = optionsObj[o]; } 644 this[options].rpr = optionsObj.rpr || false; // internal option to process inline/computed style at start instead of init true/false 645 646 this[valuesRepeat] = {}; // internal valuesRepeat 647 this[valuesEnd] = {}; // valuesEnd 648 this[valuesStart] = {}; // valuesStart 649 650 preparePropertiesObject.call(this,endObject,'end'); // valuesEnd 651 if ( this[options].rpr ) { this[valuesStart] = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart 652 653 if ( this[options].perspective !== undefined && transformProperty in this[valuesEnd] ) { // element transform perspective 654 var perspectiveString = 'perspective('+parseInt(this[options].perspective)+'px)'; 655 this[valuesEnd][transformProperty].perspective = perspectiveString; 656 } 657 658 for ( var repeatProp in this[valuesEnd] ) { 659 if (repeatProp in crossCheck && !this[options].rpr) crossCheck[repeatProp].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method 660 } 661 662 this[options][chain] = []; // chained Tweens 663 this[options][easing] = processEasing(optionsObj[easing]) || easingFn[defaultOptions[easing]] || easingFn['linear']; // you can only set a core easing function as default 664 this[options][repeat] = optionsObj[repeat] || defaultOptions[repeat]; 665 this[options][repeatDelay] = optionsObj[repeatDelay] || defaultOptions[repeatDelay]; 666 this[options][yoyo] = optionsObj[yoyo] || defaultOptions[yoyo]; 667 this[options][duration] = optionsObj[duration] || defaultOptions[duration]; // duration option | default 668 this[options][delay] = optionsObj[delay] || defaultOptions[delay]; // delay option | default 669 670 this[repeat] = this[options][repeat]; // we cache the number of repeats to be able to put it back after all cycles finish 671 }, 672 // tween control and chain 673 TweenProto = Tween.prototype = { 674 // queue tween object to main frame update 675 start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it 676 scrollIn.call(this); 677 678 if ( this[options].rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method 679 perspective.apply(this); // apply the perspective and transform origin 680 681 for ( var endProp in this[valuesEnd] ) { 682 if (endProp in crossCheck && this[options].rpr) crossCheck[endProp].call(this); // this is where we do the valuesStart and valuesEnd check for to() method 683 this[valuesRepeat][endProp] = this[valuesStart][endProp]; 684 } 685 686 // now it's a good time to start 687 tweens.push(this); 688 this[playing] = true; 689 this.paused = false; 690 this._startFired = false; 691 this._startTime = t || time.now(); 692 this._startTime += this[options][delay]; 693 694 if (!this._startFired) { 695 if (this[options].start) { this[options].start.call(this); } 696 this._startFired = true; 697 } 698 !tick && ticker(); 699 return this; 700 }, 701 play : function () { 702 if (this.paused && this[playing]) { 703 this.paused = false; 704 if (this[options].resume) { this[options].resume.call(this); } 705 this._startTime += time.now() - this._pauseTime; 706 add(this); 707 !tick && ticker(); // restart ticking if stopped 708 } 709 return this; 710 }, 711 resume : function () { return this.play(); }, 712 pause : function() { 713 if (!this.paused && this[playing]) { 714 remove(this); 715 this.paused = true; 716 this._pauseTime = time.now(); 717 if (this[options].pause) { this[options].pause.call(this); } 718 } 719 return this; 720 }, 721 stop : function () { 722 if (!this.paused && this[playing]) { 723 remove(this); 724 this[playing] = false;
725 this.paused = false; 726 scrollOut.call(this); 727 728 if (this[options].stop) { this[options].stop.call(this); } 729 this.stopChainedTweens(); 730 close.call(this); 731 } 732 return this; 733 }, 734 chain : function() { this[options][chain] = arguments; return this; }, 735 stopChainedTweens : function () { 736 for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) { 737 this[options][chain][i].stop(); 738 } 739 } 740 }, 741 742 // the multi elements Tween constructs 743 TweensTO = function (els, vE, o) { // .to 744 this.tweens = []; var optionsObj = []; 745 for ( var i = 0, tl = els[length]; i < tl; i++ ) { 746 optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay]; 747 optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay]; 748 this.tweens.push( to(els[i], vE, optionsObj[i]) ); 749 } 750 }, 751 TweensFT = function (els, vS, vE, o) { // .fromTo 752 this.tweens = []; var optionsObj = []; 753 for ( var i = 0, l = els[length]; i < l; i++ ) { 754 optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay]; 755 optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay]; 756 this.tweens.push( fromTo(els[i], vS, vE, optionsObj[i]) ); 757 } 758 }, 759 ws = TweensTO.prototype = TweensFT.prototype = { 760 start : function(t){ 761 t = t || time.now(); 762 for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { 763 this.tweens[i].start(t); 764 } 765 return this; 766 }, 767 stop : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].stop(); } return this; }, 768 pause : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].pause(); } return this; }, 769 chain : function(){ this.tweens[this.tweens[length]-1][options][chain] = arguments; return this; }, 770 play : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].play(); } return this; }, 771 resume : function() {return this.play()} 772 }, 773 774 // main methods 775 to = function (element, endObject, optionsObj) { 776 optionsObj = optionsObj || {}; optionsObj.rpr = true; 777 return new Tween(selector(element), endObject, endObject, optionsObj); 778 }, 779 fromTo = function (element, startObject, endObject, optionsObj) { 780 optionsObj = optionsObj || {}; 781 return new Tween(selector(element), startObject, endObject, optionsObj); 782 }, 783 784 // multiple elements tweening 785 allTo = function (elements, endObject, optionsObj) { 786 return new TweensTO(selector(elements,true), endObject, optionsObj); 787 }, 788 allFromTo = function (elements, startObject, endObject, optionsObj) { 789 return new TweensFT(selector(elements,true), startObject, endObject, optionsObj); 790 }; 791 792 document[addEventListener](touchOrWheel, preventScroll, false); 793 document[addEventListener](mouseEnter, preventScroll, false); 794 795 return { // export core methods to public for plugins 796 property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils 797 defaultOptions : defaultOptions, // default tween options since 1.6.1 798 to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods 799 ticker : ticker, tick : tick, tweens : tweens, update: update, dom : DOM, // update 800 parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck 801 truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing 802 }; 803}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.