diff --git a/scripts/anime.js b/scripts/anime.js new file mode 100644 index 0000000..a99421a --- /dev/null +++ b/scripts/anime.js @@ -0,0 +1,1312 @@ +/* + * anime.js v3.2.1 + * (c) 2020 Julian Garnier + * Released under the MIT license + * animejs.com + */ + +'use strict'; + +// Defaults + +var defaultInstanceSettings = { + update: null, + begin: null, + loopBegin: null, + changeBegin: null, + change: null, + changeComplete: null, + loopComplete: null, + complete: null, + loop: 1, + direction: 'normal', + autoplay: true, + timelineOffset: 0 +}; + +var defaultTweenSettings = { + duration: 1000, + delay: 0, + endDelay: 0, + easing: 'easeOutElastic(1, .5)', + round: 0 +}; + +var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d']; + +// Caching + +var cache = { + CSS: {}, + springs: {} +}; + +// Utils + +function minMax(val, min, max) { + return Math.min(Math.max(val, min), max); +} + +function stringContains(str, text) { + return str.indexOf(text) > -1; +} + +function applyArguments(func, args) { + return func.apply(null, args); +} + +var is = { + arr: function (a) { return Array.isArray(a); }, + obj: function (a) { return stringContains(Object.prototype.toString.call(a), 'Object'); }, + pth: function (a) { return is.obj(a) && a.hasOwnProperty('totalLength'); }, + svg: function (a) { return a instanceof SVGElement; }, + inp: function (a) { return a instanceof HTMLInputElement; }, + dom: function (a) { return a.nodeType || is.svg(a); }, + str: function (a) { return typeof a === 'string'; }, + fnc: function (a) { return typeof a === 'function'; }, + und: function (a) { return typeof a === 'undefined'; }, + nil: function (a) { return is.und(a) || a === null; }, + hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a); }, + rgb: function (a) { return /^rgb/.test(a); }, + hsl: function (a) { return /^hsl/.test(a); }, + col: function (a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)); }, + key: function (a) { return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes'; }, +}; + +// Easings + +function parseEasingParameters(string) { + var match = /\(([^)]+)\)/.exec(string); + return match ? match[1].split(',').map(function (p) { return parseFloat(p); }) : []; +} + +// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js + +function spring(string, duration) { + + var params = parseEasingParameters(string); + var mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100); + var stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100); + var damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100); + var velocity = minMax(is.und(params[3]) ? 0 : params[3], .1, 100); + var w0 = Math.sqrt(stiffness / mass); + var zeta = damping / (2 * Math.sqrt(stiffness * mass)); + var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0; + var a = 1; + var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0; + + function solver(t) { + var progress = duration ? (duration * t) / 1000 : t; + if (zeta < 1) { + progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress)); + } else { + progress = (a + b * progress) * Math.exp(-progress * w0); + } + if (t === 0 || t === 1) { return t; } + return 1 - progress; + } + + function getDuration() { + var cached = cache.springs[string]; + if (cached) { return cached; } + var frame = 1/6; + var elapsed = 0; + var rest = 0; + while(true) { + elapsed += frame; + if (solver(elapsed) === 1) { + rest++; + if (rest >= 16) { break; } + } else { + rest = 0; + } + } + var duration = elapsed * frame * 1000; + cache.springs[string] = duration; + return duration; + } + + return duration ? solver : getDuration; + +} + +// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function + +function steps(steps) { + if ( steps === void 0 ) steps = 10; + + return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); }; +} + +// BezierEasing https://github.com/gre/bezier-easing + +var bezier = (function () { + + var kSplineTableSize = 11; + var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); + + function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 } + function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 } + function C(aA1) { return 3.0 * aA1 } + + function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT } + function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) } + + function binarySubdivide(aX, aA, aB, mX1, mX2) { + var currentX, currentT, i = 0; + do { + currentT = aA + (aB - aA) / 2.0; + currentX = calcBezier(currentT, mX1, mX2) - aX; + if (currentX > 0.0) { aB = currentT; } else { aA = currentT; } + } while (Math.abs(currentX) > 0.0000001 && ++i < 10); + return currentT; + } + + function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { + for (var i = 0; i < 4; ++i) { + var currentSlope = getSlope(aGuessT, mX1, mX2); + if (currentSlope === 0.0) { return aGuessT; } + var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + aGuessT -= currentX / currentSlope; + } + return aGuessT; + } + + function bezier(mX1, mY1, mX2, mY2) { + + if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { return; } + var sampleValues = new Float32Array(kSplineTableSize); + + if (mX1 !== mY1 || mX2 !== mY2) { + for (var i = 0; i < kSplineTableSize; ++i) { + sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + } + } + + function getTForX(aX) { + + var intervalStart = 0; + var currentSample = 1; + var lastSample = kSplineTableSize - 1; + + for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { + intervalStart += kSampleStepSize; + } + + --currentSample; + + var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); + var guessForT = intervalStart + dist * kSampleStepSize; + var initialSlope = getSlope(guessForT, mX1, mX2); + + if (initialSlope >= 0.001) { + return newtonRaphsonIterate(aX, guessForT, mX1, mX2); + } else if (initialSlope === 0.0) { + return guessForT; + } else { + return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); + } + + } + + return function (x) { + if (mX1 === mY1 && mX2 === mY2) { return x; } + if (x === 0 || x === 1) { return x; } + return calcBezier(getTForX(x), mY1, mY2); + } + + } + + return bezier; + +})(); + +var penner = (function () { + + // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing) + + var eases = { linear: function () { return function (t) { return t; }; } }; + + var functionEasings = { + Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; }, + Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; }, + Back: function () { return function (t) { return t * t * (3 * t - 2); }; }, + Bounce: function () { return function (t) { + var pow2, b = 4; + while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {} + return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2) + }; }, + Elastic: function (amplitude, period) { + if ( amplitude === void 0 ) amplitude = 1; + if ( period === void 0 ) period = .5; + + var a = minMax(amplitude, 1, 10); + var p = minMax(period, .1, 2); + return function (t) { + return (t === 0 || t === 1) ? t : + -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p); + } + } + }; + + var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo']; + + baseEasings.forEach(function (name, i) { + functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; }; + }); + + Object.keys(functionEasings).forEach(function (name) { + var easeIn = functionEasings[name]; + eases['easeIn' + name] = easeIn; + eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; }; + eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : + 1 - easeIn(a, b)(t * -2 + 2) / 2; }; }; + eases['easeOutIn' + name] = function (a, b) { return function (t) { return t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : + (easeIn(a, b)(t * 2 - 1) + 1) / 2; }; }; + }); + + return eases; + +})(); + +function parseEasings(easing, duration) { + if (is.fnc(easing)) { return easing; } + var name = easing.split('(')[0]; + var ease = penner[name]; + var args = parseEasingParameters(easing); + switch (name) { + case 'spring' : return spring(easing, duration); + case 'cubicBezier' : return applyArguments(bezier, args); + case 'steps' : return applyArguments(steps, args); + default : return applyArguments(ease, args); + } +} + +// Strings + +function selectString(str) { + try { + var nodes = document.querySelectorAll(str); + return nodes; + } catch(e) { + return; + } +} + +// Arrays + +function filterArray(arr, callback) { + var len = arr.length; + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + var result = []; + for (var i = 0; i < len; i++) { + if (i in arr) { + var val = arr[i]; + if (callback.call(thisArg, val, i, arr)) { + result.push(val); + } + } + } + return result; +} + +function flattenArray(arr) { + return arr.reduce(function (a, b) { return a.concat(is.arr(b) ? flattenArray(b) : b); }, []); +} + +function toArray(o) { + if (is.arr(o)) { return o; } + if (is.str(o)) { o = selectString(o) || o; } + if (o instanceof NodeList || o instanceof HTMLCollection) { return [].slice.call(o); } + return [o]; +} + +function arrayContains(arr, val) { + return arr.some(function (a) { return a === val; }); +} + +// Objects + +function cloneObject(o) { + var clone = {}; + for (var p in o) { clone[p] = o[p]; } + return clone; +} + +function replaceObjectProps(o1, o2) { + var o = cloneObject(o1); + for (var p in o1) { o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; } + return o; +} + +function mergeObjects(o1, o2) { + var o = cloneObject(o1); + for (var p in o2) { o[p] = is.und(o1[p]) ? o2[p] : o1[p]; } + return o; +} + +// Colors + +function rgbToRgba(rgbValue) { + var rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); + return rgb ? ("rgba(" + (rgb[1]) + ",1)") : rgbValue; +} + +function hexToRgba(hexValue) { + var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + var hex = hexValue.replace(rgx, function (m, r, g, b) { return r + r + g + g + b + b; } ); + var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + var r = parseInt(rgb[1], 16); + var g = parseInt(rgb[2], 16); + var b = parseInt(rgb[3], 16); + return ("rgba(" + r + "," + g + "," + b + ",1)"); +} + +function hslToRgba(hslValue) { + var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); + var h = parseInt(hsl[1], 10) / 360; + var s = parseInt(hsl[2], 10) / 100; + var l = parseInt(hsl[3], 10) / 100; + var a = hsl[4] || 1; + function hue2rgb(p, q, t) { + if (t < 0) { t += 1; } + if (t > 1) { t -= 1; } + if (t < 1/6) { return p + (q - p) * 6 * t; } + if (t < 1/2) { return q; } + if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; } + return p; + } + var r, g, b; + if (s == 0) { + r = g = b = l; + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + return ("rgba(" + (r * 255) + "," + (g * 255) + "," + (b * 255) + "," + a + ")"); +} + +function colorToRgb(val) { + if (is.rgb(val)) { return rgbToRgba(val); } + if (is.hex(val)) { return hexToRgba(val); } + if (is.hsl(val)) { return hslToRgba(val); } +} + +// Units + +function getUnit(val) { + var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); + if (split) { return split[1]; } +} + +function getTransformUnit(propName) { + if (stringContains(propName, 'translate') || propName === 'perspective') { return 'px'; } + if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) { return 'deg'; } +} + +// Values + +function getFunctionValue(val, animatable) { + if (!is.fnc(val)) { return val; } + return val(animatable.target, animatable.id, animatable.total); +} + +function getAttribute(el, prop) { + return el.getAttribute(prop); +} + +function convertPxToUnit(el, value, unit) { + var valueUnit = getUnit(value); + if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) { return value; } + var cached = cache.CSS[value + unit]; + if (!is.und(cached)) { return cached; } + var baseline = 100; + var tempEl = document.createElement(el.tagName); + var parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body; + parentEl.appendChild(tempEl); + tempEl.style.position = 'absolute'; + tempEl.style.width = baseline + unit; + var factor = baseline / tempEl.offsetWidth; + parentEl.removeChild(tempEl); + var convertedUnit = factor * parseFloat(value); + cache.CSS[value + unit] = convertedUnit; + return convertedUnit; +} + +function getCSSValue(el, prop, unit) { + if (prop in el.style) { + var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); + var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0'; + return unit ? convertPxToUnit(el, value, unit) : value; + } +} + +function getAnimationType(el, prop) { + if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) { return 'attribute'; } + if (is.dom(el) && arrayContains(validTransforms, prop)) { return 'transform'; } + if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) { return 'css'; } + if (el[prop] != null) { return 'object'; } +} + +function getElementTransforms(el) { + if (!is.dom(el)) { return; } + var str = el.style.transform || ''; + var reg = /(\w+)\(([^)]*)\)/g; + var transforms = new Map(); + var m; while (m = reg.exec(str)) { transforms.set(m[1], m[2]); } + return transforms; +} + +function getTransformValue(el, propName, animatable, unit) { + var defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName); + var value = getElementTransforms(el).get(propName) || defaultVal; + if (animatable) { + animatable.transforms.list.set(propName, value); + animatable.transforms['last'] = propName; + } + return unit ? convertPxToUnit(el, value, unit) : value; +} + +function getOriginalTargetValue(target, propName, unit, animatable) { + switch (getAnimationType(target, propName)) { + case 'transform': return getTransformValue(target, propName, animatable, unit); + case 'css': return getCSSValue(target, propName, unit); + case 'attribute': return getAttribute(target, propName); + default: return target[propName] || 0; + } +} + +function getRelativeValue(to, from) { + var operator = /^(\*=|\+=|-=)/.exec(to); + if (!operator) { return to; } + var u = getUnit(to) || 0; + var x = parseFloat(from); + var y = parseFloat(to.replace(operator[0], '')); + switch (operator[0][0]) { + case '+': return x + y + u; + case '-': return x - y + u; + case '*': return x * y + u; + } +} + +function validateValue(val, unit) { + if (is.col(val)) { return colorToRgb(val); } + if (/\s/g.test(val)) { return val; } + var originalUnit = getUnit(val); + var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; + if (unit) { return unitLess + unit; } + return unitLess; +} + +// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes +// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 + +function getDistance(p1, p2) { + return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); +} + +function getCircleLength(el) { + return Math.PI * 2 * getAttribute(el, 'r'); +} + +function getRectLength(el) { + return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2); +} + +function getLineLength(el) { + return getDistance( + {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, + {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')} + ); +} + +function getPolylineLength(el) { + var points = el.points; + var totalLength = 0; + var previousPos; + for (var i = 0 ; i < points.numberOfItems; i++) { + var currentPos = points.getItem(i); + if (i > 0) { totalLength += getDistance(previousPos, currentPos); } + previousPos = currentPos; + } + return totalLength; +} + +function getPolygonLength(el) { + var points = el.points; + return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); +} + +// Path animation + +function getTotalLength(el) { + if (el.getTotalLength) { return el.getTotalLength(); } + switch(el.tagName.toLowerCase()) { + case 'circle': return getCircleLength(el); + case 'rect': return getRectLength(el); + case 'line': return getLineLength(el); + case 'polyline': return getPolylineLength(el); + case 'polygon': return getPolygonLength(el); + } +} + +function setDashoffset(el) { + var pathLength = getTotalLength(el); + el.setAttribute('stroke-dasharray', pathLength); + return pathLength; +} + +// Motion path + +function getParentSvgEl(el) { + var parentEl = el.parentNode; + while (is.svg(parentEl)) { + if (!is.svg(parentEl.parentNode)) { break; } + parentEl = parentEl.parentNode; + } + return parentEl; +} + +function getParentSvg(pathEl, svgData) { + var svg = svgData || {}; + var parentSvgEl = svg.el || getParentSvgEl(pathEl); + var rect = parentSvgEl.getBoundingClientRect(); + var viewBoxAttr = getAttribute(parentSvgEl, 'viewBox'); + var width = rect.width; + var height = rect.height; + var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]); + return { + el: parentSvgEl, + viewBox: viewBox, + x: viewBox[0] / 1, + y: viewBox[1] / 1, + w: width, + h: height, + vW: viewBox[2], + vH: viewBox[3] + } +} + +function getPath(path, percent) { + var pathEl = is.str(path) ? selectString(path)[0] : path; + var p = percent || 100; + return function(property) { + return { + property: property, + el: pathEl, + svg: getParentSvg(pathEl), + totalLength: getTotalLength(pathEl) * (p / 100) + } + } +} + +function getPathProgress(path, progress, isPathTargetInsideSVG) { + function point(offset) { + if ( offset === void 0 ) offset = 0; + + var l = progress + offset >= 1 ? progress + offset : 0; + return path.el.getPointAtLength(l); + } + var svg = getParentSvg(path.el, path.svg); + var p = point(); + var p0 = point(-1); + var p1 = point(+1); + var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW; + var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH; + switch (path.property) { + case 'x': return (p.x - svg.x) * scaleX; + case 'y': return (p.y - svg.y) * scaleY; + case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; + } +} + +// Decompose value + +function decomposeValue(val, unit) { + // const rgx = /-?\d*\.?\d+/g; // handles basic numbers + // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation + var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation + var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; + return { + original: value, + numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], + strings: (is.str(val) || unit) ? value.split(rgx) : [] + } +} + +// Animatables + +function parseTargets(targets) { + var targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; + return filterArray(targetsArray, function (item, pos, self) { return self.indexOf(item) === pos; }); +} + +function getAnimatables(targets) { + var parsed = parseTargets(targets); + return parsed.map(function (t, i) { + return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } }; + }); +} + +// Properties + +function normalizePropertyTweens(prop, tweenSettings) { + var settings = cloneObject(tweenSettings); + // Override duration if easing is a spring + if (/^spring/.test(settings.easing)) { settings.duration = spring(settings.easing); } + if (is.arr(prop)) { + var l = prop.length; + var isFromTo = (l === 2 && !is.obj(prop[0])); + if (!isFromTo) { + // Duration divided by the number of tweens + if (!is.fnc(tweenSettings.duration)) { settings.duration = tweenSettings.duration / l; } + } else { + // Transform [from, to] values shorthand to a valid tween value + prop = {value: prop}; + } + } + var propArray = is.arr(prop) ? prop : [prop]; + return propArray.map(function (v, i) { + var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v}; + // Default delay value should only be applied to the first tween + if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; } + // Default endDelay value should only be applied to the last tween + if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; } + return obj; + }).map(function (k) { return mergeObjects(k, settings); }); +} + + +function flattenKeyframes(keyframes) { + var propertyNames = filterArray(flattenArray(keyframes.map(function (key) { return Object.keys(key); })), function (p) { return is.key(p); }) + .reduce(function (a,b) { if (a.indexOf(b) < 0) { a.push(b); } return a; }, []); + var properties = {}; + var loop = function ( i ) { + var propName = propertyNames[i]; + properties[propName] = keyframes.map(function (key) { + var newKey = {}; + for (var p in key) { + if (is.key(p)) { + if (p == propName) { newKey.value = key[p]; } + } else { + newKey[p] = key[p]; + } + } + return newKey; + }); + }; + + for (var i = 0; i < propertyNames.length; i++) loop( i ); + return properties; +} + +function getProperties(tweenSettings, params) { + var properties = []; + var keyframes = params.keyframes; + if (keyframes) { params = mergeObjects(flattenKeyframes(keyframes), params); } + for (var p in params) { + if (is.key(p)) { + properties.push({ + name: p, + tweens: normalizePropertyTweens(params[p], tweenSettings) + }); + } + } + return properties; +} + +// Tweens + +function normalizeTweenValues(tween, animatable) { + var t = {}; + for (var p in tween) { + var value = getFunctionValue(tween[p], animatable); + if (is.arr(value)) { + value = value.map(function (v) { return getFunctionValue(v, animatable); }); + if (value.length === 1) { value = value[0]; } + } + t[p] = value; + } + t.duration = parseFloat(t.duration); + t.delay = parseFloat(t.delay); + return t; +} + +function normalizeTweens(prop, animatable) { + var previousTween; + return prop.tweens.map(function (t) { + var tween = normalizeTweenValues(t, animatable); + var tweenValue = tween.value; + var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue; + var toUnit = getUnit(to); + var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable); + var previousValue = previousTween ? previousTween.to.original : originalValue; + var from = is.arr(tweenValue) ? tweenValue[0] : previousValue; + var fromUnit = getUnit(from) || getUnit(originalValue); + var unit = toUnit || fromUnit; + if (is.und(to)) { to = previousValue; } + tween.from = decomposeValue(from, unit); + tween.to = decomposeValue(getRelativeValue(to, from), unit); + tween.start = previousTween ? previousTween.end : 0; + tween.end = tween.start + tween.delay + tween.duration + tween.endDelay; + tween.easing = parseEasings(tween.easing, tween.duration); + tween.isPath = is.pth(tweenValue); + tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target); + tween.isColor = is.col(tween.from.original); + if (tween.isColor) { tween.round = 1; } + previousTween = tween; + return tween; + }); +} + +// Tween progress + +var setProgressValue = { + css: function (t, p, v) { return t.style[p] = v; }, + attribute: function (t, p, v) { return t.setAttribute(p, v); }, + object: function (t, p, v) { return t[p] = v; }, + transform: function (t, p, v, transforms, manual) { + transforms.list.set(p, v); + if (p === transforms.last || manual) { + var str = ''; + transforms.list.forEach(function (value, prop) { str += prop + "(" + value + ") "; }); + t.style.transform = str; + } + } +}; + +// Set Value helper + +function setTargetsValue(targets, properties) { + var animatables = getAnimatables(targets); + animatables.forEach(function (animatable) { + for (var property in properties) { + var value = getFunctionValue(properties[property], animatable); + var target = animatable.target; + var valueUnit = getUnit(value); + var originalValue = getOriginalTargetValue(target, property, valueUnit, animatable); + var unit = valueUnit || getUnit(originalValue); + var to = getRelativeValue(validateValue(value, unit), originalValue); + var animType = getAnimationType(target, property); + setProgressValue[animType](target, property, to, animatable.transforms, true); + } + }); +} + +// Animations + +function createAnimation(animatable, prop) { + var animType = getAnimationType(animatable.target, prop.name); + if (animType) { + var tweens = normalizeTweens(prop, animatable); + var lastTween = tweens[tweens.length - 1]; + return { + type: animType, + property: prop.name, + animatable: animatable, + tweens: tweens, + duration: lastTween.end, + delay: tweens[0].delay, + endDelay: lastTween.endDelay + } + } +} + +function getAnimations(animatables, properties) { + return filterArray(flattenArray(animatables.map(function (animatable) { + return properties.map(function (prop) { + return createAnimation(animatable, prop); + }); + })), function (a) { return !is.und(a); }); +} + +// Create Instance + +function getInstanceTimings(animations, tweenSettings) { + var animLength = animations.length; + var getTlOffset = function (anim) { return anim.timelineOffset ? anim.timelineOffset : 0; }; + var timings = {}; + timings.duration = animLength ? Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration; })) : tweenSettings.duration; + timings.delay = animLength ? Math.min.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.delay; })) : tweenSettings.delay; + timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration - anim.endDelay; })) : tweenSettings.endDelay; + return timings; +} + +var instanceID = 0; + +function createNewInstance(params) { + var instanceSettings = replaceObjectProps(defaultInstanceSettings, params); + var tweenSettings = replaceObjectProps(defaultTweenSettings, params); + var properties = getProperties(tweenSettings, params); + var animatables = getAnimatables(params.targets); + var animations = getAnimations(animatables, properties); + var timings = getInstanceTimings(animations, tweenSettings); + var id = instanceID; + instanceID++; + return mergeObjects(instanceSettings, { + id: id, + children: [], + animatables: animatables, + animations: animations, + duration: timings.duration, + delay: timings.delay, + endDelay: timings.endDelay + }); +} + +// Core + +var activeInstances = []; + +var engine = (function () { + var raf; + + function play() { + if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) { + raf = requestAnimationFrame(step); + } + } + function step(t) { + // memo on algorithm issue: + // dangerous iteration over mutable `activeInstances` + // (that collection may be updated from within callbacks of `tick`-ed animation instances) + var activeInstancesLength = activeInstances.length; + var i = 0; + while (i < activeInstancesLength) { + var activeInstance = activeInstances[i]; + if (!activeInstance.paused) { + activeInstance.tick(t); + i++; + } else { + activeInstances.splice(i, 1); + activeInstancesLength--; + } + } + raf = i > 0 ? requestAnimationFrame(step) : undefined; + } + + function handleVisibilityChange() { + if (!anime.suspendWhenDocumentHidden) { return; } + + if (isDocumentHidden()) { + // suspend ticks + raf = cancelAnimationFrame(raf); + } else { // is back to active tab + // first adjust animations to consider the time that ticks were suspended + activeInstances.forEach( + function (instance) { return instance ._onDocumentVisibility(); } + ); + engine(); + } + } + if (typeof document !== 'undefined') { + document.addEventListener('visibilitychange', handleVisibilityChange); + } + + return play; +})(); + +function isDocumentHidden() { + return !!document && document.hidden; +} + +// Public Instance + +function anime(params) { + if ( params === void 0 ) params = {}; + + + var startTime = 0, lastTime = 0, now = 0; + var children, childrenLength = 0; + var resolve = null; + + function makePromise(instance) { + var promise = window.Promise && new Promise(function (_resolve) { return resolve = _resolve; }); + instance.finished = promise; + return promise; + } + + var instance = createNewInstance(params); + var promise = makePromise(instance); + + function toggleInstanceDirection() { + var direction = instance.direction; + if (direction !== 'alternate') { + instance.direction = direction !== 'normal' ? 'normal' : 'reverse'; + } + instance.reversed = !instance.reversed; + children.forEach(function (child) { return child.reversed = instance.reversed; }); + } + + function adjustTime(time) { + return instance.reversed ? instance.duration - time : time; + } + + function resetTime() { + startTime = 0; + lastTime = adjustTime(instance.currentTime) * (1 / anime.speed); + } + + function seekChild(time, child) { + if (child) { child.seek(time - child.timelineOffset); } + } + + function syncInstanceChildren(time) { + if (!instance.reversePlayback) { + for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); } + } else { + for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); } + } + } + + function setAnimationsProgress(insTime) { + var i = 0; + var animations = instance.animations; + var animationsLength = animations.length; + while (i < animationsLength) { + var anim = animations[i]; + var animatable = anim.animatable; + var tweens = anim.tweens; + var tweenLength = tweens.length - 1; + var tween = tweens[tweenLength]; + // Only check for keyframes if there is more than one tween + if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; } + var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; + var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed); + var strings = tween.to.strings; + var round = tween.round; + var numbers = []; + var toNumbersLength = tween.to.numbers.length; + var progress = (void 0); + for (var n = 0; n < toNumbersLength; n++) { + var value = (void 0); + var toNumber = tween.to.numbers[n]; + var fromNumber = tween.from.numbers[n] || 0; + if (!tween.isPath) { + value = fromNumber + (eased * (toNumber - fromNumber)); + } else { + value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG); + } + if (round) { + if (!(tween.isColor && n > 2)) { + value = Math.round(value * round) / round; + } + } + numbers.push(value); + } + // Manual Array.reduce for better performances + var stringsLength = strings.length; + if (!stringsLength) { + progress = numbers[0]; + } else { + progress = strings[0]; + for (var s = 0; s < stringsLength; s++) { + var a = strings[s]; + var b = strings[s + 1]; + var n$1 = numbers[s]; + if (!isNaN(n$1)) { + if (!b) { + progress += n$1 + ' '; + } else { + progress += n$1 + b; + } + } + } + } + setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms); + anim.currentValue = progress; + i++; + } + } + + function setCallback(cb) { + if (instance[cb] && !instance.passThrough) { instance[cb](instance); } + } + + function countIteration() { + if (instance.remaining && instance.remaining !== true) { + instance.remaining--; + } + } + + function setInstanceProgress(engineTime) { + var insDuration = instance.duration; + var insDelay = instance.delay; + var insEndDelay = insDuration - instance.endDelay; + var insTime = adjustTime(engineTime); + instance.progress = minMax((insTime / insDuration) * 100, 0, 100); + instance.reversePlayback = insTime < instance.currentTime; + if (children) { syncInstanceChildren(insTime); } + if (!instance.began && instance.currentTime > 0) { + instance.began = true; + setCallback('begin'); + } + if (!instance.loopBegan && instance.currentTime > 0) { + instance.loopBegan = true; + setCallback('loopBegin'); + } + if (insTime <= insDelay && instance.currentTime !== 0) { + setAnimationsProgress(0); + } + if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) { + setAnimationsProgress(insDuration); + } + if (insTime > insDelay && insTime < insEndDelay) { + if (!instance.changeBegan) { + instance.changeBegan = true; + instance.changeCompleted = false; + setCallback('changeBegin'); + } + setCallback('change'); + setAnimationsProgress(insTime); + } else { + if (instance.changeBegan) { + instance.changeCompleted = true; + instance.changeBegan = false; + setCallback('changeComplete'); + } + } + instance.currentTime = minMax(insTime, 0, insDuration); + if (instance.began) { setCallback('update'); } + if (engineTime >= insDuration) { + lastTime = 0; + countIteration(); + if (!instance.remaining) { + instance.paused = true; + if (!instance.completed) { + instance.completed = true; + setCallback('loopComplete'); + setCallback('complete'); + if (!instance.passThrough && 'Promise' in window) { + resolve(); + promise = makePromise(instance); + } + } + } else { + startTime = now; + setCallback('loopComplete'); + instance.loopBegan = false; + if (instance.direction === 'alternate') { + toggleInstanceDirection(); + } + } + } + } + + instance.reset = function() { + var direction = instance.direction; + instance.passThrough = false; + instance.currentTime = 0; + instance.progress = 0; + instance.paused = true; + instance.began = false; + instance.loopBegan = false; + instance.changeBegan = false; + instance.completed = false; + instance.changeCompleted = false; + instance.reversePlayback = false; + instance.reversed = direction === 'reverse'; + instance.remaining = instance.loop; + children = instance.children; + childrenLength = children.length; + for (var i = childrenLength; i--;) { instance.children[i].reset(); } + if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; } + setAnimationsProgress(instance.reversed ? instance.duration : 0); + }; + + // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF) + instance._onDocumentVisibility = resetTime; + + // Set Value helper + + instance.set = function(targets, properties) { + setTargetsValue(targets, properties); + return instance; + }; + + instance.tick = function(t) { + now = t; + if (!startTime) { startTime = now; } + setInstanceProgress((now + (lastTime - startTime)) * anime.speed); + }; + + instance.seek = function(time) { + setInstanceProgress(adjustTime(time)); + }; + + instance.pause = function() { + instance.paused = true; + resetTime(); + }; + + instance.play = function() { + if (!instance.paused) { return; } + if (instance.completed) { instance.reset(); } + instance.paused = false; + activeInstances.push(instance); + resetTime(); + engine(); + }; + + instance.reverse = function() { + toggleInstanceDirection(); + instance.completed = instance.reversed ? false : true; + resetTime(); + }; + + instance.restart = function() { + instance.reset(); + instance.play(); + }; + + instance.remove = function(targets) { + var targetsArray = parseTargets(targets); + removeTargetsFromInstance(targetsArray, instance); + }; + + instance.reset(); + + if (instance.autoplay) { instance.play(); } + + return instance; + +} + +// Remove targets from animation + +function removeTargetsFromAnimations(targetsArray, animations) { + for (var a = animations.length; a--;) { + if (arrayContains(targetsArray, animations[a].animatable.target)) { + animations.splice(a, 1); + } + } +} + +function removeTargetsFromInstance(targetsArray, instance) { + var animations = instance.animations; + var children = instance.children; + removeTargetsFromAnimations(targetsArray, animations); + for (var c = children.length; c--;) { + var child = children[c]; + var childAnimations = child.animations; + removeTargetsFromAnimations(targetsArray, childAnimations); + if (!childAnimations.length && !child.children.length) { children.splice(c, 1); } + } + if (!animations.length && !children.length) { instance.pause(); } +} + +function removeTargetsFromActiveInstances(targets) { + var targetsArray = parseTargets(targets); + for (var i = activeInstances.length; i--;) { + var instance = activeInstances[i]; + removeTargetsFromInstance(targetsArray, instance); + } +} + +// Stagger helpers + +function stagger(val, params) { + if ( params === void 0 ) params = {}; + + var direction = params.direction || 'normal'; + var easing = params.easing ? parseEasings(params.easing) : null; + var grid = params.grid; + var axis = params.axis; + var fromIndex = params.from || 0; + var fromFirst = fromIndex === 'first'; + var fromCenter = fromIndex === 'center'; + var fromLast = fromIndex === 'last'; + var isRange = is.arr(val); + var val1 = isRange ? parseFloat(val[0]) : parseFloat(val); + var val2 = isRange ? parseFloat(val[1]) : 0; + var unit = getUnit(isRange ? val[1] : val) || 0; + var start = params.start || 0 + (isRange ? val1 : 0); + var values = []; + var maxValue = 0; + return function (el, i, t) { + if (fromFirst) { fromIndex = 0; } + if (fromCenter) { fromIndex = (t - 1) / 2; } + if (fromLast) { fromIndex = t - 1; } + if (!values.length) { + for (var index = 0; index < t; index++) { + if (!grid) { + values.push(Math.abs(fromIndex - index)); + } else { + var fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2; + var fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2; + var toX = index%grid[0]; + var toY = Math.floor(index/grid[0]); + var distanceX = fromX - toX; + var distanceY = fromY - toY; + var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY); + if (axis === 'x') { value = -distanceX; } + if (axis === 'y') { value = -distanceY; } + values.push(value); + } + maxValue = Math.max.apply(Math, values); + } + if (easing) { values = values.map(function (val) { return easing(val / maxValue) * maxValue; }); } + if (direction === 'reverse') { values = values.map(function (val) { return axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val); }); } + } + var spacing = isRange ? (val2 - val1) / maxValue : val1; + return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit; + } +} + +// Timeline + +function timeline(params) { + if ( params === void 0 ) params = {}; + + var tl = anime(params); + tl.duration = 0; + tl.add = function(instanceParams, timelineOffset) { + var tlIndex = activeInstances.indexOf(tl); + var children = tl.children; + if (tlIndex > -1) { activeInstances.splice(tlIndex, 1); } + function passThrough(ins) { ins.passThrough = true; } + for (var i = 0; i < children.length; i++) { passThrough(children[i]); } + var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params)); + insParams.targets = insParams.targets || params.targets; + var tlDuration = tl.duration; + insParams.autoplay = false; + insParams.direction = tl.direction; + insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration); + passThrough(tl); + tl.seek(insParams.timelineOffset); + var ins = anime(insParams); + passThrough(ins); + children.push(ins); + var timings = getInstanceTimings(children, params); + tl.delay = timings.delay; + tl.endDelay = timings.endDelay; + tl.duration = timings.duration; + tl.seek(0); + tl.reset(); + if (tl.autoplay) { tl.play(); } + return tl; + }; + return tl; +} + +anime.version = '3.2.1'; +anime.speed = 1; +// TODO:#review: naming, documentation +anime.suspendWhenDocumentHidden = true; +anime.running = activeInstances; +anime.remove = removeTargetsFromActiveInstances; +anime.get = getOriginalTargetValue; +anime.set = setTargetsValue; +anime.convertPx = convertPxToUnit; +anime.path = getPath; +anime.setDashoffset = setDashoffset; +anime.stagger = stagger; +anime.timeline = timeline; +anime.easing = parseEasings; +anime.penner = penner; +anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; + +module.exports = anime; diff --git a/scripts/anime.min.js b/scripts/anime.min.js new file mode 100644 index 0000000..7696a5b --- /dev/null +++ b/scripts/anime.min.js @@ -0,0 +1,8 @@ +/* + * anime.js v3.2.1 + * (c) 2020 Julian Garnier + * Released under the MIT license + * animejs.com + */ + +!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return i.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(v*Math.cos(p*t)+h*Math.sin(p*t)):(v+h*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),v=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}},l["easeOutIn"+n]=function(n,t){return function(r){return r<.5?(1-e(n,t)(1-2*r))/2:(e(n,t)(2*r-1)+1)/2}}}),l);function h(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=v[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function D(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function B(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?D(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(!i.nil(I(n,e))||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&B(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?D(n,i,r):i}function A(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return B(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function N(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function S(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function L(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function j(n){for(var e,t=n.points,r=0,a=0;a0&&(r+=L(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return L({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return j(n);case"polygon":return t=(e=n).points,j(e)+L(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function H(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u,h:c,vW:s[2],vH:s[3]}}function V(n,e,t){function r(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var a=H(n.el,n.svg),o=r(),u=r(-1),i=r(1),c=t?1:a.w/a.vW,s=t?1:a.h/a.vH;switch(n.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}function $(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=S(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function W(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function X(n){var e=W(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function Y(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function Z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){en.suspendWhenDocumentHidden&&(nn()?n=cancelAnimationFrame(n):(K.forEach(function(n){return n._onDocumentVisibility()}),U()))}),function(){n||nn()&&en.suspendWhenDocumentHidden||!(K.length>0)||(n=requestAnimationFrame(e))}}();function nn(){return!!document&&document.hidden}function en(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,v,h,g,y,b,M=(d=w(n,l=t),p=w(e,l),v=Z(p,l),h=X(l.targets),g=_(h,v),y=R(g,p),b=J,J++,k(d,{id:b,children:[],animatables:h,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/en.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e2||(b=Math.round(b*p)/p)),v.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(M.began=!0,D("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,D("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,D("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,D("loopComplete"),D("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(M.reversed?M.duration:0)},M._onDocumentVisibility=C,M.set=function(n,e){return z(n,e),M},M.tick=function(n){i=n,o||(o=i),B((i+(u-o))*en.speed)},M.seek=function(n){B(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,K.push(M),C(),U())},M.reverse=function(){x(),M.completed=!M.reversed,C()},M.restart=function(){M.reset(),M.play()},M.remove=function(n){rn(W(n),M)},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}function rn(n,e){var t=e.animations,r=e.children;tn(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;tn(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return en.version="3.2.1",en.speed=1,en.suspendWhenDocumentHidden=!0,en.running=K,en.remove=function(n){for(var e=W(n),t=K.length;t--;)rn(e,K[t])},en.get=A,en.set=z,en.convertPx=D,en.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:H(t),totalLength:q(t)*(r/100)}}},en.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},en.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?h(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,v=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var h=0;h-1&&K.splice(o,1);for(var s=0;s div:nth-child(2)"); +const myImageBlock = document.querySelector(".benjamin-image-block"); +const myBigTextBlock = document.querySelector(".benjamin-big-text-block"); +const mainTextBlock = document.querySelector(".main-text-block"); +const mainCTA = document.querySelector(".main-cta-button"); +const allHeaderElements = document.querySelectorAll("header *"); + + +function intro() { + + anime({ + targets: heroTextSection, + width: [0, "50%"], + opacity: [0, 1], + easing: "cubicBezier(0, 0.72, 0.355, 1)", + duration: 800, + delay: 1400, + }); + + anime({ + targets: allHeaderElements, + translateX: [-20, 0], +// rotateY: [50, 0], + opacity: [0, 1], + easing: "easeInOutQuad", + duration: 800, + delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */), + }); + + anime({ + targets: myBigTextBlock, + translateY: [100, 0], + opacity: [0, 1], + easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", + duration: 1200, + delay: 2000, + }); + + anime({ + targets: myImageBlock, + translateY: [100, 0], + opacity: [0, 1], + easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", + duration: 1500, + delay: 2200, + }); + + anime({ + targets: mainTextBlock, + translateX: [-50, 0], + opacity: [0, 1], + easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", + duration: 800, + delay: 2800, + }); + + anime({ + targets: mainCTA, + translateX: [-50, 0], + opacity: [0, 1], + easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", + duration: 800, + delay: 2900, + }); + +} + +intro(); + + + + + +//############################################# -- Header Scroll interactions + var headerController = document.querySelector("#header-controller"); var windowRect = { rootMargin: "0px", @@ -12,15 +91,57 @@ function changeHeader(entry) { if(entry[0].isIntersecting) { document.querySelector("header").className = "none"; - document.querySelector("header img").style.width = "40px"; - document.querySelector("header img").style.top = "0px"; - document.querySelector("header > a > div").classList.remove("logo-text-dissapear"); + anime({ + targets: "header img", + width: 40, + height: 100, + top: 0, + duration: 400, + easing: "easeOutCubic", + }); + + anime({ + targets: "header > a > div", + translateX: 0, + opacity: 1, + duration: 1000, + }); + } else { document.querySelector("header").classList.add("scrolled"); - document.querySelector("header img").style.width = "60px"; - document.querySelector("header img").style.top = "20px"; - document.querySelector("header > a > div").classList.add("logo-text-dissapear"); + anime({ + targets: "header img", + width: 60, + height: 130, + top: 20, + duration: 400, + easing: "easeOutCubic", + }); + + anime({ + targets: "header > a > div", + translateX: -50, + opacity: 0, + duration: 1000, + }); } } -headerObserver.observe(headerController); \ No newline at end of file +setTimeout(() => { + headerObserver.observe(headerController); +}, 2000); + + + + + + + + + + + + + + + diff --git a/v3.css b/v3.css index 6d7a87e..8a01bda 100644 --- a/v3.css +++ b/v3.css @@ -15,6 +15,10 @@ html { line-height: 1.5; color: #222; position: relative; +/* + animation-timing-function: linear; + transition-timing-function: linear; +*/ } :root { @@ -48,9 +52,14 @@ header { display: flex; align-items: center; justify-content: space-between; - transition: all .3s ease; height: 140px; overflow: hidden; + perspective: 500; + transition: all .3s ease; +} + +header * { +/* transition: all .5s ease;*/ } header.scrolled { @@ -72,7 +81,7 @@ header.scrolled { header img { width: 40px; margin-right: 10px; - transition: all .3s ease; +/* transition: all .3s ease;*/ position: relative; top: 0; } @@ -85,18 +94,15 @@ header > a { align-items: center; font-weight: 900; position: relative; + perspective: 500px; + transform-style: preserve-3d; } header > a > div { line-height: 16px; font-size: 24px; color: var(--dark-color); - transition: all .3s ease; -} - -.logo-text-dissapear { - transform: translateX(-50px); - opacity: 0; +/* transition: all .3s ease;*/ } nav { @@ -161,7 +167,7 @@ a { border: none; cursor: pointer; font-size: inherit; - transition: all .3s ease-out; +/* transition: all .3s ease-out;*/ } a:hover { @@ -241,7 +247,7 @@ button { padding: 10px 20px; color: white; cursor: pointer; - transition: all .2s ease-out; +/* transition: all .2s ease-out; */ background-image: linear-gradient(var(--main-color),var(--main-color)); background-repeat: no-repeat; background-position: 0px 67px; @@ -321,6 +327,7 @@ input:focus { .hero-section { background-color: #1b239b; + justify-content: space-between; } .hero-section > div:nth-child(1) { @@ -332,6 +339,7 @@ input:focus { padding: 25vh 40px 40px 6.2vw; font-size: 2.5vw; display: inline; +/* opacity: 0;*/ } .main-text-block { @@ -371,10 +379,9 @@ input:focus { } #mountains { - min-width: 70%; - height: 100vh; - left: -200px; - bottom: -20px; + width: 100%; + min-height: 100vh; + bottom: -20vh; } .benjamin-image-block { @@ -387,6 +394,7 @@ input:focus { background-image: url("images/hero-image-ben.jpg"); background-size: cover; opacity: .8; + padding: 0; } .benjamin-big-text-block { diff --git a/v3.html b/v3.html index 6070a14..ea5ec14 100644 --- a/v3.html +++ b/v3.html @@ -111,6 +111,7 @@ +