@wizdm/animate
Version:
On Scroll Animation for Angular
945 lines (916 loc) • 76 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('rxjs'), require('@angular/animations'), require('@angular/cdk/scrolling')) :
typeof define === 'function' && define.amd ? define('@wizdm/animate', ['exports', '@angular/core', 'rxjs/operators', '@angular/cdk/coercion', 'rxjs', '@angular/animations', '@angular/cdk/scrolling'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizdm = global.wizdm || {}, global.wizdm.animate = {}), global.ng.core, global.rxjs.operators, global.ng.cdk.coercion, global.rxjs, global.ng.animations, global.ng.cdk.scrolling));
}(this, (function (exports, i0, operators, coercion, rxjs, animations, i1) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
/** Animate config token */
var ANIMATE_CONFIG = new i0.InjectionToken('wizdm.animate.config');
/** Builds the config object checking whenever the Browser support the IntersectionObserver API */
function animateConfigFactory(value) {
// Starts with the given mode defaulting to auto detection
var triggerMode = value && value.triggerMode || 'auto';
if (triggerMode === 'auto' || triggerMode === 'intersectionObserver') {
// Checks for Browser IntersectionObserver support
var ioSupported = 'IntersectionObserver' in window &&
'IntersectionObserverEntry' in window &&
'intersectionRatio' in window.IntersectionObserverEntry.prototype;
// Applies the best mode
triggerMode = ioSupported ? 'intersectionObserver' : 'scrolling';
}
// Ensure to use scrolling otherwise
else {
triggerMode = 'scrolling';
}
// Returns the config object
return Object.assign(Object.assign({}, value), { triggerMode: triggerMode });
}
var AnimateService = /** @class */ (function () {
function AnimateService(scroll, viewPort, zone, config) {
var _this = this;
this.scroll = scroll;
this.viewPort = viewPort;
this.zone = zone;
this.config = config;
this.options$ = new rxjs.BehaviorSubject({});
// Gets the module configuration
this.config = animateConfigFactory(config);
// Computes a common view observable to support the 'scrolling' triggering method
this.view$ = this.options$.pipe(
// Tracks for viewport changes giving it 100ms time to accurately update for orientation changes
operators.switchMap(function (options) { return viewPort.change(100).pipe(
// Starts with a value
operators.startWith(null),
// Gets the viewport
operators.map(function () {
// Picks the ClientRect of the relevant container
var rt = (options.root instanceof Element) ? options.root.getBoundingClientRect() : _this.viewPort.getViewportRect();
// Combines the various options to build the final container
var left = rt.left + (options.left || _this.config.offsetLeft || 0);
var top = rt.top + (options.top || _this.config.offsetTop || 0);
var right = rt.right + (options.right || _this.config.offsetRight || 0);
var bottom = rt.bottom + (options.bottom || _this.config.offsetBottom || 0);
// Returns the reultins client rect
return { top: top, left: left, bottom: bottom, right: right, height: bottom - top, width: right - left };
}),
// Debounces to aggregate fast changes (like during orientation changes)
operators.debounceTime(20)); }),
// Makes all the component to share the same viewport values
operators.shareReplay(1));
}
Object.defineProperty(AnimateService.prototype, "useIntersectionObserver", {
/** True when the trigger is provided using the IntersectionObserver API */
get: function () {
return this.config.triggerMode === 'intersectionObserver';
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnimateService.prototype, "useScrolling", {
/** True when the trigger is provided using cdk/scrolling package */
get: function () {
return this.config.triggerMode === 'scrolling';
},
enumerable: false,
configurable: true
});
/** Applies the given options to the triggering service */
AnimateService.prototype.setup = function (options) {
this.options$.next(options);
};
// Triggers the animation
AnimateService.prototype.trigger = function (elm, threshold) {
var _this = this;
// Waits until the zone is stable once, aka the render is complete so the element to measure is there
return function (source) { return _this.zone.onStable.pipe(
// Waits just once
operators.take(1),
// Triggers the play and replay requests
operators.switchMap(function () { return source; }),
// Triggers upon the most suitable method
operators.switchMap(function (trigger) {
// Simply return the sourced trigger when threshold is 0
return (threshold <= 0) ? rxjs.of(trigger) : (
// Check upon the configured method otherwise
_this.useIntersectionObserver ?
// Triggers upon element intersection (IntersectionObserver API)
_this.intersecting(elm, threshold) :
// Triggers upon cdk/scrolling
_this.scrolling(elm, threshold));
})); };
};
// Triggers the animation on intersection (using the IntersectionObserver API)
AnimateService.prototype.intersecting = function (elm, threshold) {
var _this = this;
return this.options$.pipe(
// Turns the options into a suitable configuration for the IntersectionObserver AnimateOptions
operators.map(function (options) {
// Identifies an optional element to be used as the container
var root = options.root || null;
// Merges the margins from both the global config and the local options
var top = options.top || _this.config.offsetTop || 0;
var right = options.right || _this.config.offsetRight || 0;
var bottom = options.bottom || _this.config.offsetBottom || 0;
var left = options.left || _this.config.offsetLeft || 0;
// Computes the rootMargin string acordingly
var rootMargin = -top + "px " + -right + "px " + -bottom + "px " + -left + "px";
// Returns the proper initialization object
return { root: root, rootMargin: rootMargin };
}),
// Observes the element
operators.switchMap(function (options) { return _this.observe(elm, threshold, options); }));
};
/** Builds an Obsevable out of the IntersectionObserver API */
AnimateService.prototype.observe = function (elm, threshold, options) {
var _this = this;
return new rxjs.Observable(function (subscriber) {
// Creates a single entry observer
var observer = new IntersectionObserver(function (entries) {
// Monitors the only enry intesection ratio
var ratio = entries[0].intersectionRatio;
// Emits true whenever the intersection cross the threashold (making sure to run in the angular zone)
if (ratio >= threshold) {
_this.zone.run(function () { return subscriber.next(true); });
}
// Emits false whenever the intersection cross back to full invisibility (making sure to run in the angular zone)
if (ratio <= 0) {
_this.zone.run(function () { return subscriber.next(false); });
}
// Initializes the observer with the given parameters
}, Object.assign(Object.assign({}, options), { threshold: [0, threshold] }));
// Starts observing the target element
observer.observe(elm.nativeElement);
// Disconnects when unsubscribed
return function () { return observer.disconnect(); };
});
};
// Triggers the animation on scroll
AnimateService.prototype.scrolling = function (elm, threshold) {
var _this = this;
// Returns an AOS observable using cdk/scrollilng
return this.scroll.ancestorScrolled(elm, 0).pipe(
// Makes sure triggering the start no matter there's no scroll event hits yet
operators.startWith(0),
// Maps the scrolling to the element visibility value
operators.switchMap(function () { return _this.visibility(elm); }),
// Applies an hysteresys, so, to trigger the animation on based on the treshold while off on full invisibility
operators.scan(function (result, visiblility) { return (visiblility >= threshold) || (result && visiblility > 0); }, false),
// Distincts the resulting triggers
operators.distinctUntilChanged(),
// Runs within the angular zone to trigger change detection back on
function (source) { return new rxjs.Observable(function (subscriber) { return source.subscribe(function (value) { return _this.zone.run(function () { return subscriber.next(value); }); }); }); });
};
// Computes the element's visibility ratio against the container
AnimateService.prototype.visibility = function (elm) {
// Resolves from the latest viewport
return this.view$.pipe(operators.map(function (view) {
// Gets the element's bounding rect
var rect = elm && elm.nativeElement && elm.nativeElement.getBoundingClientRect();
if (!rect) {
return 0;
}
// Return 1.0 when the element is fully within the viewport
if (rect.left > view.left - 1 && rect.top > view.top - 1 && rect.right < view.right + 1 && rect.bottom < view.bottom + 1) {
return 1;
}
// Computes the intersection area otherwise
var a = Math.round(rect.width * rect.height);
var b = Math.max(0, Math.min(rect.right, view.right) - Math.max(rect.left, view.left));
var c = Math.max(0, Math.min(rect.bottom, view.bottom) - Math.max(rect.top, view.top));
// Returns the amount of visible area
return Math.round(b * c / a * 10) / 10;
}));
};
return AnimateService;
}());
/** @nocollapse */ AnimateService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AnimateService_Factory() { return new AnimateService(i0.ɵɵinject(i1.ScrollDispatcher), i0.ɵɵinject(i1.ViewportRuler), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(ANIMATE_CONFIG, 8)); }, token: AnimateService, providedIn: "root" });
AnimateService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
AnimateService.ctorParameters = function () { return [
{ type: i1.ScrollDispatcher },
{ type: i1.ViewportRuler },
{ type: i0.NgZone },
{ type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ANIMATE_CONFIG,] }] }
]; };
var beat = [
animations.transition('* => beat', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} cubic-bezier(.8, -0.6, 0.2, 1.5)', animations.keyframes([
animations.style({ transform: 'scale(0.8)' }),
animations.style({ transform: 'scale(1.5)' }),
animations.style({ transform: 'scale(1)' })
]))
], { params: { timing: '500ms', delay: '' } })
];
var bounce = [
animations.transition('* => bounce', [
animations.style({ transformOrigin: 'center bottom' }),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'translate3d(0, 0, 0)', animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0 }),
animations.style({ transform: 'translate3d(0, 0, 0)', animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.2 }),
animations.style({ transform: 'translate3d(0, -30px, 0)', animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.4 }),
animations.style({ transform: 'translate3d(0, -30px, 0)', animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06', offset: 0.43 }),
animations.style({ transform: 'translate3d(0, 0, 0)', animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.53 }),
animations.style({ transform: 'translate3d(0, -15px, 0)', animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.7 }),
animations.style({ transform: 'translate3d(0, 0, 0)', animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.8 }),
animations.style({ transform: 'translate3d(0, -4px, 0)', offset: 0.9 }),
animations.style({ transform: 'translate3d(0, 0, 0)', animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var headShake = [
animations.transition('* => headShake', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'translateX(0)', offset: 0 }),
animations.style({ transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065 }),
animations.style({ transform: 'translateX(5px) rotateY(7deg)', offset: 0.185 }),
animations.style({ transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315 }),
animations.style({ transform: 'translateX(2px) rotateY(3deg)', offset: 0.435 }),
animations.style({ transform: 'translateX(0)', offset: 0.5 })
]))
], { params: { timing: '1s', delay: '' } })
];
var heartBeat = [
animations.transition('* => heartBeat', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'scale(1)', offset: 0 }),
animations.style({ transform: 'scale(1.3)', offset: 0.14 }),
animations.style({ transform: 'scale(1)', offset: 0.28 }),
animations.style({ transform: 'scale(1.3)', offset: 0.42 }),
animations.style({ transform: 'scale(1)', offset: 0.70 })
]))
], { params: { timing: '1s', delay: '' } })
];
var pulse = [
animations.transition('* => pulse', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'scale(1)' }),
animations.style({ transform: 'scale(1.05)' }),
animations.style({ transform: 'scale(1)' })
]))
], { params: { timing: '500ms', delay: '' } })
];
var rubberBand = [
animations.transition('* => rubberBand', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
animations.style({ transform: 'scale3d(1.25, 0.75, 1)', offset: 0.3 }),
animations.style({ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 }),
animations.style({ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 }),
animations.style({ transform: 'scale3d(0.95, 1.05, 1)', offset: 0.65 }),
animations.style({ transform: 'scale3d(1.05, 0.95, 1)', offset: 0.75 }),
animations.style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
]))
], { params: { timing: '1s', delay: '' } })
];
var shake = [
animations.transition('* => shake', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'translateX(0)', offset: 0 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.1 }),
animations.style({ transform: 'translateX(10px)', offset: 0.2 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.3 }),
animations.style({ transform: 'translateX(10px)', offset: 0.4 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.5 }),
animations.style({ transform: 'translateX(10px)', offset: 0.6 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.7 }),
animations.style({ transform: 'translateX(10px)', offset: 0.8 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.9 }),
animations.style({ transform: 'translateX(0)', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var swing = [
animations.transition('* => swing', [
animations.style({ transformOrigin: 'top center' }),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }),
animations.style({ transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 }),
animations.style({ transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 }),
animations.style({ transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 }),
animations.style({ transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 }),
animations.style({ transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var wobble = [
animations.transition('* => wobble', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'translateX(0)', offset: 0 }),
animations.style({ transform: 'translateX(-25%) rotate3d(0, 0, 1, -5deg)', offset: 0.15 }),
animations.style({ transform: 'translateX(20%) rotate3d(0, 0, 1, 3deg)', offset: 0.3 }),
animations.style({ transform: 'translateX(-15%) rotate3d(0, 0, 1, -3deg)', offset: 0.45 }),
animations.style({ transform: 'translateX(10%) rotate3d(0, 0, 1, 2deg)', offset: 0.6 }),
animations.style({ transform: 'translateX(-5%) rotate3d(0, 0, 1, -1deg)', offset: 0.75 }),
animations.style({ transform: 'translateX(0)', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var jello = [
animations.transition('* => jello', [
animations.style({ transformOrigin: 'center' }),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'skewX(0) skewY(0)', offset: 0 }),
animations.style({ transform: 'skewX(0) skewY(0)', offset: 0.111 }),
animations.style({ transform: 'skewX(-12.5) skewY(-12.5)', offset: 0.222 }),
animations.style({ transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333 }),
animations.style({ transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444 }),
animations.style({ transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555 }),
animations.style({ transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666 }),
animations.style({ transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777 }),
animations.style({ transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888 }),
animations.style({ transform: 'skewX(0) skewY(0)', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var tada = [
animations.transition('* => tada', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
animations.style({ transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 }),
animations.style({ transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 }),
animations.style({ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 }),
animations.style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
]))
], { params: { timing: '1s', delay: '' } })
];
var flip = [
animations.transition('* => flip', [
animations.style({ backfaceVisibility: 'visible' }),
animations.animate('{{timing}} {{delay}} ease-in-out', animations.keyframes([
animations.style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)', animationTimingFunction: 'ease-out', offset: 0 }),
animations.style({ transform: ' perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)', animationTimingFunction: 'ease-out', offset: 0.4 }),
animations.style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)', animationTimingFunction: 'ease-in', offset: 0.5 }),
animations.style({ transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)', animationTimingFunction: 'ease-in', offset: 0.8 }),
animations.style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)', animationTimingFunction: 'ease-in', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
var bumpIn = [
animations.state('idle-bumpIn', animations.style({ opacity: 0 })),
animations.transition('* => bumpIn', [
animations.style({ transform: 'scale(0.5)', opacity: 0 }),
animations.animate("{{timing}} {{delay}} cubic-bezier(.8, -0.6, 0.2, 1.5)", animations.style({ transform: 'scale(1)', opacity: 1 }))
], { params: { timing: '500ms', delay: '' } })
];
var bounceIn = [
animations.state('idle-bounceIn', animations.style({ opacity: 0 })),
animations.state('idle-bounceInDown', animations.style({ opacity: 0 })),
animations.state('idle-bounceInLeft', animations.style({ opacity: 0 })),
animations.state('idle-bounceInUp', animations.style({ opacity: 0 })),
animations.state('idle-bounceInRight', animations.style({ opacity: 0 })),
animations.transition('* => bounceIn', animations.animate('{{timing}} {{delay}} cubic-bezier(0.215, 0.61, 0.355, 1)', animations.keyframes([
animations.style({
transform: 'scale(0.3)',
opacity: 0,
offset: 0
}),
animations.style({
transform: 'scale(1.1)',
offset: 0.2
}),
animations.style({
transform: 'scale(0.9)',
offset: 0.4
}),
animations.style({
transform: 'scale(1.03)',
opacity: 1,
offset: 0.6
}),
animations.style({
transform: 'scale(0.97)',
offset: 0.8
}),
animations.style({
transform: 'scale(1)',
opacity: 1,
offset: 1
})
])), { params: { timing: '750ms', delay: '' } }),
animations.transition('* => bounceInDown', animations.animate('{{timing}} {{delay}} cubic-bezier(0.215, 0.61, 0.355, 1)', animations.keyframes([
animations.style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
animations.style({ opacity: 1, transform: 'translateY(25px)', offset: 0.6 }),
animations.style({ transform: 'translateY(-10px)', offset: 0.75 }),
animations.style({ transform: 'translateY(5px)', offset: 0.9 }),
animations.style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
])), { params: { timing: '1s', delay: '' } }),
animations.transition('* => bounceInLeft', animations.animate('{{timing}} {{delay}} cubic-bezier(0.215, 0.61, 0.355, 1)', animations.keyframes([
animations.style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
animations.style({ opacity: 1, transform: 'translateX(25px)', offset: 0.6 }),
animations.style({ transform: 'translateX(-10px)', offset: 0.75 }),
animations.style({ transform: 'translateX(5px)', offset: 0.9 }),
animations.style({ opacity: 1, transform: 'translateX(0)', offset: 1 })
])), { params: { timing: '1s', delay: '' } }),
animations.transition('* => bounceInUp', animations.animate('{{timing}} {{delay}} cubic-bezier(0.215, 0.61, 0.355, 1)', animations.keyframes([
animations.style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
animations.style({ opacity: 1, transform: 'translateY(-25px)', offset: 0.6 }),
animations.style({ transform: 'translateY(10px)', offset: 0.75 }),
animations.style({ transform: 'translateY(-5px)', offset: 0.9 }),
animations.style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
])), { params: { timing: '1s', delay: '' } }),
animations.transition('* => bounceInRight', animations.animate('{{timing}} {{delay}} cubic-bezier(0.215, 0.61, 0.355, 1)', animations.keyframes([
animations.style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
animations.style({ opacity: 1, transform: 'translateX(-25px)', offset: 0.6 }),
animations.style({ transform: 'translateX(10px)', offset: 0.75 }),
animations.style({ transform: 'translateX(-5px)', offset: 0.9 }),
animations.style({ opacity: 1, transform: 'translateX(0)', offset: 1 })
])), { params: { timing: '1s', delay: '' } })
];
var fadeIn = [
animations.state('idle-fadeIn', animations.style({ opacity: 0 })),
animations.state('idle-fadeInRight', animations.style({ opacity: 0 })),
animations.state('idle-fadeInLeft', animations.style({ opacity: 0 })),
animations.state('idle-fadeInUp', animations.style({ opacity: 0 })),
animations.state('idle-fadeInDown', animations.style({ opacity: 0 })),
animations.transition('* => fadeIn', [
animations.style({ opacity: 0 }),
animations.animate('{{timing}} {{delay}} ease-in', animations.style('*'))
], { params: { timing: '1s', delay: '' } }),
animations.transition('* => fadeInRight', [
animations.style({ opacity: 0, transform: 'translateX(-20px)' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.style('*'))
], { params: { timing: '1s', delay: '' } }),
animations.transition('* => fadeInLeft', [
animations.style({ opacity: 0, transform: 'translateX(20px)' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.style('*'))
], { params: { timing: '1s', delay: '' } }),
animations.transition('* => fadeInUp', [
animations.style({ opacity: 0, transform: 'translateY(20px)' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.style('*'))
], { params: { timing: '1s', delay: '' } }),
animations.transition('* => fadeInDown', [
animations.style({ opacity: 0, transform: 'translateY(-20px)' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.style('*'))
], { params: { timing: '1s', delay: '' } }),
];
var flipIn = [
animations.state('idle-flipInX', animations.style({ opacity: 0 })),
animations.state('idle-flipInY', animations.style({ opacity: 0 })),
animations.transition('* => flipInX', [
animations.style({ backfaceVisibility: 'visible' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.keyframes([
animations.style({
transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
opacity: 0,
offset: 0
}),
animations.style({
transform: ' perspective(400px) rotate3d(1, 0, 0, -20deg)',
opacity: 1,
offset: 0.4
}),
animations.style({
transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
offset: 0.6
}),
animations.style({
transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)',
offset: 0.8
}),
animations.style({
transform: 'perspective(400px) rotate3d(1, 0, 0, 0)',
offset: 1
})
]))
], { params: { timing: '1s', delay: '' } }),
animations.transition('* => flipInY', [
animations.style({ backfaceVisibility: 'visible' }),
animations.animate('{{timing}} {{delay}} ease-in', animations.keyframes([
animations.style({
transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
opacity: 0,
offset: 0
}),
animations.style({
transform: ' perspective(400px) rotate3d(0, 1, 0, -20deg)',
opacity: 1,
offset: 0.4
}),
animations.style({
transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)',
offset: 0.6
}),
animations.style({
transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)',
offset: 0.8
}),
animations.style({
transform: 'perspective(400px) rotate3d(0, 1, 0, 0)',
offset: 1
})
]))
], { params: { timing: '1s', delay: '' } })
];
var jackInTheBox = [
animations.state('idle-jackInTheBox', animations.style({ opacity: 0 })),
animations.transition('* => jackInTheBox', [
animations.style('*'),
animations.animate('{{timing}} {{delay}} ease-in', animations.keyframes([
animations.style({
transform: 'scale(0.1) rotate(30deg)',
transformOrigin: 'center bottom',
opacity: 0,
offset: 0
}),
animations.style({
transform: 'rotate(-10deg)',
opacity: 0.7,
offset: 0.5
}),
animations.style({ transform: 'rotate(3deg)', offset: 0.7 }),
animations.style({ transform: 'scale(1)', opacity: 1, offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
/*@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox {
animation-name: jackInTheBox;
}*/
var landing = [
animations.state('idle-landing', animations.style({ opacity: 0 })),
animations.transition('* => landing', [
animations.style({
transform: 'scale(1.2)',
opacity: 0
}),
animations.animate('{{timing}} {{delay}} ease', animations.style('*'))
], { params: { timing: '2s', delay: '' } })
];
var rollIn = [
animations.state('idle-rollIn', animations.style({ opacity: 0 })),
animations.transition('* => rollIn', [
animations.style({
transform: 'translateX(-100%) rotate3d(0, 0, 1, -120deg)',
opacity: 0
}),
animations.animate("{{timing}} {{delay}} cubic-bezier(.8, -0.6, 0.2, 1.5)", animations.style({ transform: 'translateX(0)', opacity: 1 }))
], { params: { timing: '1s', delay: '' } })
];
var zoomIn = [
// Idle states
animations.state('idle-zoomIn', animations.style({ opacity: 0 })),
animations.state('idle-zoomInDown', animations.style({ opacity: 0 })),
animations.state('idle-zoomInLeft', animations.style({ opacity: 0 })),
animations.state('idle-zoomInUp', animations.style({ opacity: 0 })),
animations.state('idle-zoomInRight', animations.style({ opacity: 0 })),
animations.transition('* => zoomIn', animations.animate('{{timing}} {{delay}} ease-in', animations.keyframes([
animations.style({ opacity: 0, transform: 'scale(0.3)' }),
animations.style({ opacity: 1, transform: 'scale(0.65)' }),
animations.style({ opacity: 1, transform: 'scale(1)' })
])), { params: { timing: '1s', delay: '' } }),
animations.transition('* => zoomInDown', animations.animate('{{timing}} {{delay}} ease-in', animations.keyframes([
animations.style({
opacity: 0,
transform: 'scale(0.1) translateY(-1000px)',
animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
offset: 0
}),
animations.style({
opacity: 1,
transform: 'scale(0.475) translateY(60px)',
animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
offset: 0.6
}),
animations.style({ opacity: 1, transform: 'sca