mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Rewrite animation component from scratch

pull/186/head
Cory LaViska 2020-08-11 09:32:10 -04:00
rodzic 8387edb080
commit afc5e292c3
82 zmienionych plików z 11380 dodań i 15986 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

64
docs/components/animation.md
Wyświetl plik

File diff suppressed because one or more lines are too long

7535
package-lock.json wygenerowano
Wyświetl plik

Plik diff jest za duży Load Diff

356
src/components.d.ts vendored
Wyświetl plik

@ -5,7 +5,6 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { AnimationsType } from "./components/animation/animations";
export namespace Components {
interface SlAlert {
/**
@ -29,43 +28,19 @@ export namespace Components {
*/
"type": 'primary' | 'success' | 'info' | 'warning' | 'danger';
}
interface SlAnimate {
interface SlAnimation {
/**
* Name of the animation to get the keyFrames
*/
"animation"?: AnimationsType;
/**
* Start the animation when the component is mounted.
*/
"autoPlay"?: boolean;
/**
* Clears all `KeyframeEffects` caused by this animation and aborts its playback.
* Clears all KeyframeEffects caused by this animation and aborts its playback.
*/
"cancel": () => Promise<void>;
/**
* Clear the current animation
*/
"clear": () => Promise<void>;
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to `replace`.
*/
"composite": CompositeOperation;
/**
* Sets the current time value of the animation in milliseconds, whether running or paused.
*/
"currentTime": number;
/**
* The number of milliseconds to delay the start of the animation.
*/
"delay": number;
/**
* Destroy the current animation
* Determines the direction of playback as well as the behavior when reaching the end of an iteration.
*/
"destroy": () => Promise<void>;
/**
* Direction of the animation.
*/
"direction"?: PlaybackDirection;
"direction": PlaybackDirection;
/**
* The number of milliseconds each iteration of the animation takes to complete.
*/
@ -73,193 +48,59 @@ export namespace Components {
/**
* The rate of the animation's change over time.
*/
"easing"?: string;
/**
* The number of milliseconds to delay after the end of an animation.
*/
"endDelay": number;
/**
* Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
*/
"fill"?: FillMode;
/**
* Sets the current playback time to the end of the animation corresponding to the current playback direction.
*/
"finish": () => Promise<void>;
/**
* Returns the current time value of the animation in milliseconds, whether running or paused.
*/
"getCurrentTime": () => Promise<number>;
/**
* Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
*/
"getPending": () => Promise<boolean>;
/**
* Returns an enumerated value describing the playback state of an animation.
*/
"getPlayState": () => Promise<AnimationPlayState>;
/**
* Returns the playback rate of the animation.
*/
"getPlaybackRate": () => Promise<number>;
/**
* Returns the scheduled time when an animation's playback should begin.
*/
"getStartTime": () => Promise<number>;
/**
* Determines how values build from iteration to iteration in this animation.
*/
"iterationComposite"?: IterationCompositeOperation;
/**
* Describes at what point in the iteration the animation should start.
*/
"iterationStart"?: number;
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
*/
"iterations": any;
/**
* Keyframes of the animation.
*/
"keyFrames"?: Keyframe[];
/**
* Default options of the animation.
*/
"options"?: KeyframeAnimationOptions;
/**
* Suspends playback of the animation.
*/
"pause": () => Promise<void>;
/**
* Starts or resumes playing of an animation.
*/
"play": () => Promise<void>;
/**
* Sets the playback rate of the animation.
*/
"playbackRate"?: number;
/**
* Reverses the playback direction, meaning the animation ends at its beginning.
*/
"reverse": () => Promise<void>;
/**
* Sets the scheduled time when an animation's playback should begin.
*/
"startTime"?: number;
}
interface SlAnimation {
/**
* Start the animation when the component is mounted.
*/
"autoPlay"?: boolean;
/**
* Cancels the animation.
*/
"cancel": () => Promise<void>;
/**
* Clear the current animation
*/
"clear": () => Promise<void>;
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to `replace`.
*/
"composite": CompositeOperation;
/**
* Sets the current time value of the animation in milliseconds, whether running or paused.
*/
"currentTime": number;
/**
* The number of milliseconds to delay the start of the animation.
*/
"delay": number;
/**
* Destroy the current animation
*/
"destroy": () => Promise<void>;
/**
* Direction of the animation.
*/
"direction"?: PlaybackDirection;
/**
* The number of milliseconds each iteration of the animation takes to complete.
*/
"duration": number;
/**
* The easing effect to use.
*/
"easing": string;
/**
* The number of milliseconds to delay after the end of an animation.
* The number of milliseconds to delay after the active period of an animation sequence.
*/
"endDelay": number;
/**
* Defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationStart or after animation's end time.
* Sets how the animation applies styles to its target before and after its execution.
*/
"fill"?: FillMode;
"fill": FillMode;
/**
* Sets the playback time to the end of the animation corresponding to the playback direction.
* Sets the playback time to the end of the animation corresponding to the current playback direction.
*/
"finish": () => Promise<void>;
/**
* Returns the current time value of the animation in milliseconds, whether running or paused.
* Gets a list of all supported animation names.
*/
"getAnimationNames": () => Promise<string[]>;
/**
* Gets the current time of the animation in milliseconds.
*/
"getCurrentTime": () => Promise<number>;
/**
* Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
* Gets a list of all supported easing function names.
*/
"getPending": () => Promise<boolean>;
"getEasingNames": () => Promise<string[]>;
/**
* Returns an enumerated value describing the playback state of an animation.
*/
"getPlayState": () => Promise<AnimationPlayState>;
/**
* Returns the playback rate of the animation.
*/
"getPlaybackRate": () => Promise<number>;
/**
* Returns the scheduled time when an animation's playback should begin.
*/
"getStartTime": () => Promise<number>;
/**
* Determines how values build from iteration to iteration in this animation.
*/
"iterationComposite"?: IterationCompositeOperation;
/**
* Describes at what point in the iteration the animation should start.
* The offset at which to start the animation, usually between 0 (start) and 1 (end).
*/
"iterationStart": number;
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
* The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.
*/
"iterations": number;
/**
* Keyframes of the animation.
* The keyframes to use for the animation. If this is set, `name` will be ignored.
*/
"keyFrames"?: Keyframe[];
"keyframes": Keyframe[];
/**
* Name of the animation to get the keyFrames
* The name of the animation to use.
*/
"name"?: AnimationsType;
"name": string;
/**
* Default options of the animation.
* Pauses the animation. The animation will resume when this prop is removed.
*/
"options"?: KeyframeAnimationOptions;
"pause": boolean;
/**
* Pauses the animation.
*/
"pause": () => Promise<void>;
/**
* Starts or resumes the animation.
*/
"play": () => Promise<void>;
/**
* Sets the playback rate of the animation.
* Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.
*/
"playbackRate": number;
/**
* Sets the scheduled time when an animation's playback should begin.
* Sets the current time of the animation in milliseconds.
*/
"startTime": number;
"setCurrentTime": (time: number) => Promise<void>;
}
interface SlAvatar {
/**
@ -1163,12 +1004,6 @@ declare global {
prototype: HTMLSlAlertElement;
new (): HTMLSlAlertElement;
};
interface HTMLSlAnimateElement extends Components.SlAnimate, HTMLStencilElement {
}
var HTMLSlAnimateElement: {
prototype: HTMLSlAnimateElement;
new (): HTMLSlAnimateElement;
};
interface HTMLSlAnimationElement extends Components.SlAnimation, HTMLStencilElement {
}
var HTMLSlAnimationElement: {
@ -1381,7 +1216,6 @@ declare global {
};
interface HTMLElementTagNameMap {
"sl-alert": HTMLSlAlertElement;
"sl-animate": HTMLSlAnimateElement;
"sl-animation": HTMLSlAnimationElement;
"sl-avatar": HTMLSlAvatarElement;
"sl-badge": HTMLSlBadgeElement;
@ -1450,29 +1284,13 @@ declare namespace LocalJSX {
*/
"type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
}
interface SlAnimate {
/**
* Name of the animation to get the keyFrames
*/
"animation"?: AnimationsType;
/**
* Start the animation when the component is mounted.
*/
"autoPlay"?: boolean;
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to `replace`.
*/
"composite"?: CompositeOperation;
/**
* Sets the current time value of the animation in milliseconds, whether running or paused.
*/
"currentTime"?: number;
interface SlAnimation {
/**
* The number of milliseconds to delay the start of the animation.
*/
"delay"?: number;
/**
* Direction of the animation.
* Determines the direction of playback as well as the behavior when reaching the end of an iteration.
*/
"direction"?: PlaybackDirection;
/**
@ -1484,135 +1302,45 @@ declare namespace LocalJSX {
*/
"easing"?: string;
/**
* The number of milliseconds to delay after the end of an animation.
* The number of milliseconds to delay after the active period of an animation sequence.
*/
"endDelay"?: number;
/**
* Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
* Sets how the animation applies styles to its target before and after its execution.
*/
"fill"?: FillMode;
/**
* Determines how values build from iteration to iteration in this animation.
*/
"iterationComposite"?: IterationCompositeOperation;
/**
* Describes at what point in the iteration the animation should start.
* The offset at which to start the animation, usually between 0 (start) and 1 (end).
*/
"iterationStart"?: number;
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
*/
"iterations"?: any;
/**
* Keyframes of the animation.
*/
"keyFrames"?: Keyframe[];
/**
* This event is sent when the animation is cancelled.
*/
"onSlCancel"?: (event: CustomEvent<HTMLElement>) => void;
/**
* This event is sent when the animation finishes playing.
*/
"onSlFinish"?: (event: CustomEvent<HTMLElement>) => void;
/**
* This event is sent when the animation is going to play.
*/
"onSlStart"?: (event: CustomEvent<HTMLElement>) => void;
/**
* Default options of the animation.
*/
"options"?: KeyframeAnimationOptions;
/**
* Sets the playback rate of the animation.
*/
"playbackRate"?: number;
/**
* Sets the scheduled time when an animation's playback should begin.
*/
"startTime"?: number;
}
interface SlAnimation {
/**
* Start the animation when the component is mounted.
*/
"autoPlay"?: boolean;
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to `replace`.
*/
"composite"?: CompositeOperation;
/**
* Sets the current time value of the animation in milliseconds, whether running or paused.
*/
"currentTime"?: number;
/**
* The number of milliseconds to delay the start of the animation.
*/
"delay"?: number;
/**
* Direction of the animation.
*/
"direction"?: PlaybackDirection;
/**
* The number of milliseconds each iteration of the animation takes to complete.
*/
"duration"?: number;
/**
* The easing effect to use.
*/
"easing"?: string;
/**
* The number of milliseconds to delay after the end of an animation.
*/
"endDelay"?: number;
/**
* Defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationStart or after animation's end time.
*/
"fill"?: FillMode;
/**
* Determines how values build from iteration to iteration in this animation.
*/
"iterationComposite"?: IterationCompositeOperation;
/**
* Describes at what point in the iteration the animation should start.
*/
"iterationStart"?: number;
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
* The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.
*/
"iterations"?: number;
/**
* Keyframes of the animation.
* The keyframes to use for the animation. If this is set, `name` will be ignored.
*/
"keyFrames"?: Keyframe[];
"keyframes"?: Keyframe[];
/**
* Name of the animation to get the keyFrames
* The name of the animation to use.
*/
"name"?: AnimationsType;
"name"?: string;
/**
* Emitted when the animation is canceled.
*/
"onSlCancel"?: (event: CustomEvent<HTMLElement>) => void;
"onSlCancel"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the animation finishes.
*/
"onSlFinish"?: (event: CustomEvent<HTMLElement>) => void;
"onSlFinish"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the animation starts playing.
* Pauses the animation. The animation will resume when this prop is removed.
*/
"onSlStart"?: (event: CustomEvent<HTMLElement>) => void;
"pause"?: boolean;
/**
* Default options of the animation.
*/
"options"?: KeyframeAnimationOptions;
/**
* Sets the playback rate of the animation.
* Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.
*/
"playbackRate"?: number;
/**
* Sets the scheduled time when an animation's playback should begin.
*/
"startTime"?: number;
}
interface SlAvatar {
/**
@ -2602,7 +2330,6 @@ declare namespace LocalJSX {
}
interface IntrinsicElements {
"sl-alert": SlAlert;
"sl-animate": SlAnimate;
"sl-animation": SlAnimation;
"sl-avatar": SlAvatar;
"sl-badge": SlBadge;
@ -2645,7 +2372,6 @@ declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
"sl-animate": LocalJSX.SlAnimate & JSXBase.HTMLAttributes<HTMLSlAnimateElement>;
"sl-animation": LocalJSX.SlAnimation & JSXBase.HTMLAttributes<HTMLSlAnimationElement>;
"sl-avatar": LocalJSX.SlAvatar & JSXBase.HTMLAttributes<HTMLSlAvatarElement>;
"sl-badge": LocalJSX.SlBadge & JSXBase.HTMLAttributes<HTMLSlBadgeElement>;

308
src/components/animation/animation.tsx
Wyświetl plik

@ -1,17 +1,6 @@
import { h, Component, Element, Prop, Event, EventEmitter, Method, Watch } from '@stencil/core';
import { IAnimatableComponent } from './models/animatable';
import { AnimationsType, getKeyFramesByAnimation } from './animations';
import { AnimationManager } from './manager';
//
// TODO:
//
// - combine manager and remove utils
// - reorder watchers and methods
// - support case-insensitive "infinity" in `iterations`
// - document and provide CDN link for the Web Animations polyfill (which browsers actually require it?) https://github.com/web-animations/web-animations-js
// - clean up animation and easing exports
//
import { Component, Element, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core';
import animations from './animations';
import easings from './easings';
/**
* @since 2.0
@ -24,193 +13,178 @@ import { AnimationManager } from './manager';
styleUrl: 'animation.scss',
shadow: true
})
export class Animate implements IAnimatableComponent {
manager?: AnimationManager = null;
export class Animate {
animation: Animation;
get container() {
return this.host.shadowRoot.querySelector('slot').assignedElements({ flatten: true })[0] as HTMLElement;
get element() {
const slot = this.host.shadowRoot.querySelector('slot');
return slot.assignedElements({ flatten: true })[0] as HTMLElement;
}
@Element() host: HTMLSlAnimationElement;
/** Name of the animation to get the keyFrames */
@Prop({ reflect: true }) name?: AnimationsType;
/** Keyframes of the animation. */
@Prop({ mutable: true, reflect: true }) keyFrames?: Keyframe[];
/** Default options of the animation. */
@Prop({ mutable: true, reflect: true }) options?: KeyframeAnimationOptions;
/** The name of the animation to use. */
@Prop() name = 'none';
/** The number of milliseconds to delay the start of the animation. */
@Prop({ mutable: true }) delay = 0;
@Prop() delay = 0;
/** The number of milliseconds to delay after the end of an animation. */
@Prop({ mutable: true }) endDelay = 0;
/** Determines the direction of playback as well as the behavior when reaching the end of an iteration. */
@Prop() direction: PlaybackDirection = 'normal';
/** The number of milliseconds each iteration of the animation takes to complete. */
@Prop({ mutable: true }) duration = 0;
@Prop() duration = 0;
/** Direction of the animation. */
@Prop({ mutable: true }) direction?: PlaybackDirection = 'normal';
/** The rate of the animation's change over time. */
@Prop() easing = 'linear';
/** The number of milliseconds to delay after the active period of an animation sequence. */
@Prop() endDelay = 0;
/** Sets how the animation applies styles to its target before and after its execution. */
@Prop() fill: FillMode = 'auto';
/** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
@Prop() iterations: number = Infinity;
/** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
@Prop() iterationStart = 0;
/** The keyframes to use for the animation. If this is set, `name` will be ignored. */
@Prop({ mutable: true }) keyframes: Keyframe[];
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their
* own specific composite operation. Defaults to `replace`.
* Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
* to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
* value can be changed without causing the animation to restart.
*/
@Prop({ mutable: true }) composite: CompositeOperation = 'replace';
/** The easing effect to use. */
@Prop({ mutable: true }) easing = 'none';
/**
* Defines how the element to which the animation is applied should look when the animation sequence is not actively
* running, such as before the time specified by iterationStart or after animation's end time.
*/
@Prop({ mutable: true }) fill?: FillMode = 'none';
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make
* it repeat for as long as the element exists.
*/
@Prop({ mutable: true }) iterations = 1;
/** Describes at what point in the iteration the animation should start. */
@Prop({ mutable: true }) iterationStart = 0;
/** Determines how values build from iteration to iteration in this animation. */
@Prop({ mutable: true }) iterationComposite?: IterationCompositeOperation;
/** Start the animation when the component is mounted. */
@Prop({ attribute: 'autoplay', reflect: true }) autoPlay? = false;
/** Sets the current time value of the animation in milliseconds, whether running or paused. */
@Prop() currentTime = 0;
/** Sets the playback rate of the animation. */
@Prop() playbackRate = 1;
/** Sets the scheduled time when an animation's playback should begin. */
@Prop() startTime = 0;
/** Pauses the animation. The animation will resume when this prop is removed. */
@Prop() pause = false;
// Restart the animation when any of these properties change
@Watch('delay')
@Watch('direction')
@Watch('easing')
@Watch('endDelay')
@Watch('fill')
@Watch('iterations')
@Watch('iterationStart')
@Watch('keyframes')
@Watch('name')
handleNameChange(name: AnimationsType) {
this.keyFrames = getKeyFramesByAnimation(name);
handleRestartAnimation() {
this.createAnimation();
}
@Watch('currentTime')
setCurrenTime(newValue: number) {
this.manager.currentAnimation.currentTime = newValue;
@Watch('pause')
handlePauseChange() {
this.pause ? this.animation.pause() : this.animation.play();
}
@Watch('playbackRate')
setPlaybackRate(newValue: number) {
this.manager.currentAnimation.playbackRate = newValue;
handlePlaybackRateChange() {
this.animation.playbackRate = this.playbackRate;
}
/** Returns the current time value of the animation in milliseconds, whether running or paused. */
@Method()
async getCurrentTime(): Promise<number> {
return Promise.resolve(this.manager.currentAnimation.currentTime);
}
@Watch('startTime')
setStartTime(newValue: number) {
this.manager.currentAnimation.startTime = newValue;
}
/**
* Returns the scheduled time when an animation's playback should begin.
*/
@Method()
async getStartTime(): Promise<number> {
return Promise.resolve(this.manager.currentAnimation.startTime);
}
/**
* Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or
* pausing a running animation.
*/
@Method()
async getPending(): Promise<boolean> {
return Promise.resolve(this.manager.currentAnimation.pending);
}
/** Returns the playback rate of the animation. */
@Method()
async getPlaybackRate(): Promise<number> {
return Promise.resolve(this.manager.currentAnimation.playbackRate);
}
/** Returns an enumerated value describing the playback state of an animation. */
@Method()
async getPlayState(): Promise<AnimationPlayState> {
return Promise.resolve(this.manager.currentAnimation.playState);
}
/** Emitted when the animation starts playing. */
@Event() slStart!: EventEmitter<HTMLElement>;
/** Emitted when the animation finishes. */
@Event() slFinish!: EventEmitter<HTMLElement>;
/** Emitted when the animation is canceled. */
@Event() slCancel!: EventEmitter<HTMLElement>;
@Event() slCancel: EventEmitter;
/** Cancels the animation. */
@Method()
async cancel(): Promise<void> {
this.manager.currentAnimation.cancel();
}
/** Emitted when the animation finishes. */
@Event() slFinish: EventEmitter;
/** Sets the playback time to the end of the animation corresponding to the playback direction. */
@Method()
async finish(): Promise<void> {
this.manager.currentAnimation.finish();
}
/** Pauses the animation. */
@Method()
async pause(): Promise<void> {
this.manager.currentAnimation.pause();
}
/** Starts or resumes the animation. */
@Method()
async play(): Promise<void> {
this.manager.playAnimation();
}
/** Clear the current animation */
@Method()
async clear(): Promise<void> {
this.manager.clearAnimation();
}
/** Destroy the current animation */
@Method()
async destroy(): Promise<void> {
if (this.manager !== null) {
this.manager.destroyAnimation();
}
connectedCallback() {
this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
}
componentDidLoad() {
this.manager = new AnimationManager(this);
this.manager.setState(this.container, this);
this.manager.savedState();
}
componentWillUpdate() {
this.manager.setState(this.container, this);
}
componentDidUpdate() {
this.manager.savedState();
this.createAnimation();
}
disconnectedCallback() {
this.destroy();
this.destroyAnimation();
}
handleAnimationFinish() {
this.slFinish.emit();
}
handleAnimationCancel() {
this.slCancel.emit();
}
createAnimation() {
const easing = easings.hasOwnProperty(this.easing) ? easings[this.easing] : this.easing;
const keyframes = this.keyframes ? this.keyframes : animations[this.name];
this.destroyAnimation();
this.animation = this.element.animate(keyframes, {
delay: this.delay,
direction: this.direction,
duration: this.duration,
easing,
endDelay: this.endDelay,
fill: this.fill,
iterationStart: this.iterationStart,
iterations: this.iterations
});
this.animation.addEventListener('cancel', this.handleAnimationCancel);
this.animation.addEventListener('finish', this.handleAnimationFinish);
if (this.pause) {
this.animation.pause();
}
}
destroyAnimation() {
if (this.animation) {
this.animation.cancel();
this.animation.removeEventListener('cancel', this.handleAnimationCancel);
this.animation.removeEventListener('finish', this.handleAnimationFinish);
this.animation = null;
}
}
/** Clears all KeyframeEffects caused by this animation and aborts its playback. */
@Method()
async cancel() {
try {
this.animation.cancel();
} catch {}
}
/** Sets the playback time to the end of the animation corresponding to the current playback direction. */
@Method()
async finish() {
try {
this.animation.finish();
} catch {}
}
/** Gets a list of all supported animation names. */
@Method()
async getAnimationNames() {
return Object.entries(animations).map(([name]) => name);
}
/** Gets a list of all supported easing function names. */
@Method()
async getEasingNames() {
return Object.entries(easings).map(([name]) => name);
}
/** Gets the current time of the animation in milliseconds. */
@Method()
async getCurrentTime() {
return this.animation.currentTime;
}
/** Sets the current time of the animation in milliseconds. */
@Method()
async setCurrentTime(time: number) {
this.animation.currentTime = time;
}
render() {

141
src/components/animation/animations/animate/attention-seekers.ts
Wyświetl plik

@ -1,141 +0,0 @@
import { ANIMATIONS } from './common';
const BOUNCE_DEFAULT: Keyframe = {
transform: 'translate(0)',
easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'
};
const BOUNCE: Keyframe[] = [
{ offset: 0, ...BOUNCE_DEFAULT },
{ offset: 0.2, ...BOUNCE_DEFAULT },
{ offset: 0.4, transform: 'translateY(-30px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
{ offset: 0.43, transform: 'translateY(-30px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
{ offset: 0.53, ...BOUNCE_DEFAULT },
{ offset: 0.7, transform: 'translateY(-15px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
{ offset: 0.8, ...BOUNCE_DEFAULT },
{ offset: 0.9, transform: 'translateY(-4px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
{ offset: 1, ...BOUNCE_DEFAULT }
];
const FLASH: Keyframe[] = [
{ offset: 0, opacity: 1 },
{ offset: 0.25, opacity: 0 },
{ offset: 0.5, opacity: 1 },
{ offset: 0.75, opacity: 0 },
{ offset: 1, opacity: 1 }
];
const JELLO_DEFAULT = {
transform: 'skewX(0deg) skewY(0deg)',
transformOrigin: 'center'
};
const JELLO: Keyframe[] = [
{ offset: 0, ...JELLO_DEFAULT },
{ offset: 0.111, ...JELLO_DEFAULT },
{ offset: 0.222, ...JELLO_DEFAULT, transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
{ offset: 0.333, ...JELLO_DEFAULT, transform: 'skewX(6.25deg) skewY(6.25deg)' },
{ offset: 0.444, ...JELLO_DEFAULT, transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
{ offset: 0.555, ...JELLO_DEFAULT, transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
{ offset: 0.666, ...JELLO_DEFAULT, transform: 'skewX(-0.78125deg) skewY(-0.78125deg)' },
{ offset: 0.777, ...JELLO_DEFAULT, transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
{ offset: 0.888, ...JELLO_DEFAULT, transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
{ offset: 1, ...JELLO_DEFAULT }
];
const PULSE: Keyframe[] = [
{ offset: 0, transform: 'scale(1)' },
{ offset: 0.5, transform: 'scale(1.05)' },
{ offset: 1, transform: 'scale(1)' }
];
const ROTATE: Keyframe[] = [
{ offset: 0, transform: 'rotate(0deg)' },
{ offset: 0.25, transform: 'rotate(90deg)' },
{ offset: 0.5, transform: 'rotate(180deg)' },
{ offset: 0.75, transform: 'rotate(270deg)' },
{ offset: 1, transform: 'rotate(360deg)' }
];
const SHAKE_LEFT: Keyframe = { transform: 'translateX(-10px)' };
const SHAKE_RIGHT: Keyframe = { transform: 'translateX(10px)' };
const SHAKE: Keyframe[] = [
{ offset: 0, transform: 'translateX(0px)' },
{ offset: 0.1, ...SHAKE_LEFT },
{ offset: 0.2, ...SHAKE_RIGHT },
{ offset: 0.3, ...SHAKE_LEFT },
{ offset: 0.4, ...SHAKE_RIGHT },
{ offset: 0.5, ...SHAKE_LEFT },
{ offset: 0.6, ...SHAKE_RIGHT },
{ offset: 0.7, ...SHAKE_LEFT },
{ offset: 0.8, ...SHAKE_RIGHT },
{ offset: 0.9, ...SHAKE_LEFT },
{ offset: 1, transform: 'translateX(0px)' }
];
const SWING: Keyframe[] = [
{ offset: 0, transform: 'rotate(0deg)', transformOrigin: 'top center' },
{ offset: 0.2, transform: 'rotate(15deg)', transformOrigin: 'top center' },
{ offset: 0.4, transform: 'rotate(-10deg)', transformOrigin: 'top center' },
{ offset: 0.6, transform: 'rotate(5deg)', transformOrigin: 'top center' },
{ offset: 0.8, transform: 'rotate(-5deg)', transformOrigin: 'top center' },
{ offset: 1, transform: 'rotate(0deg)', transformOrigin: 'top center' }
];
const RUBBER_BAND: Keyframe[] = [
{ offset: 0, transform: 'scale(1, 1)' },
{ offset: 0.3, transform: 'scale(1.25, 0.75)' },
{ offset: 0.4, transform: 'scale(0.75, 1.25)' },
{ offset: 0.5, transform: 'scale(1.15, 0.85)' },
{ offset: 0.65, transform: 'scale(0.95, 1.05)' },
{ offset: 0.75, transform: 'scale(1.05, 0.95)' },
{ offset: 1, transform: 'scale(1, 1)' }
];
const TADA: Keyframe[] = [
{ offset: 0, transform: 'scale(1) rotate(0deg)' },
{ offset: 0.1, transform: 'scale(0.9) rotate(-3deg)' },
{ offset: 0.2, transform: 'scale(0.9) rotate(-3deg)' },
{ offset: 0.3, transform: 'scale(1.1) rotate(-3deg)' },
{ offset: 0.4, transform: 'scale(1.1) rotate(3deg)' },
{ offset: 0.5, transform: 'scale(1.1) rotate(-3deg)' },
{ offset: 0.6, transform: 'scale(1.1) rotate(3deg)' },
{ offset: 0.7, transform: 'scale(1.1) rotate(-3deg)' },
{ offset: 0.8, transform: 'scale(1.1) rotate(3deg)' },
{ offset: 0.9, transform: 'scale(1.1) rotate(3deg)' },
{ offset: 1, transform: 'scale(1) rotate(0deg)' }
];
const WOBBLE: Keyframe[] = [
{ offset: 0, transform: 'translate(0) rotate(0deg)' },
{ offset: 0.15, transform: 'translateX(-25%) rotate(-5deg)' },
{ offset: 0.3, transform: 'translateX(20%) rotate(3deg)' },
{ offset: 0.45, transform: 'translateX(-15%) rotate(-3deg)' },
{ offset: 0.6, transform: 'translateX(10%) rotate(2deg)' },
{ offset: 0.75, transform: 'translateX(-5%) rotate(-1deg)' },
{ offset: 1, transform: 'translate(0) rotate(0deg)' }
];
const HEART_BEAT_DEFAULT: Keyframe = { transform: 'scale(1)', easing: 'ease-in-out' };
const HEART_BEAT: Keyframe[] = [
{ offset: 0, ...HEART_BEAT_DEFAULT },
{ offset: 0.14, ...HEART_BEAT_DEFAULT, transform: 'scale(1.3)' },
{ offset: 0.28, ...HEART_BEAT_DEFAULT },
{ offset: 0.42, ...HEART_BEAT_DEFAULT, transform: 'scale(1.3)' },
{ offset: 0.7, ...HEART_BEAT_DEFAULT },
{ offset: 1, ...HEART_BEAT_DEFAULT }
];
export default {
[ANIMATIONS.BOUNCE]: BOUNCE,
[ANIMATIONS.FLASH]: FLASH,
[ANIMATIONS.JELLO]: JELLO,
[ANIMATIONS.PULSE]: PULSE,
[ANIMATIONS.ROTATE]: ROTATE,
[ANIMATIONS.SHAKE]: SHAKE,
[ANIMATIONS.SWING]: SWING,
[ANIMATIONS.RUBBER_BAND]: RUBBER_BAND,
[ANIMATIONS.TADA]: TADA,
[ANIMATIONS.WOBBLE]: WOBBLE,
[ANIMATIONS.HEART_BEAT]: HEART_BEAT
};

54
src/components/animation/animations/animate/bouncing-entrances.ts
Wyświetl plik

@ -1,54 +0,0 @@
import { ANIMATIONS } from './common';
const BOUNCE_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'
};
const BOUNCE_IN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'scale(0.3)', ...BOUNCE_DEFAULT },
{ offset: 0.2, opacity: 0, transform: 'scale(1.1)', ...BOUNCE_DEFAULT },
{ offset: 0.4, opacity: 0, transform: 'scale(0.9)', ...BOUNCE_DEFAULT },
{ offset: 0.6, opacity: 1, transform: 'scale(1.03)', ...BOUNCE_DEFAULT },
{ offset: 0.8, opacity: 1, transform: 'scale(0.97)', ...BOUNCE_DEFAULT },
{ offset: 1, opacity: 1, transform: 'scale(1)', ...BOUNCE_DEFAULT }
];
const BOUNCE_IN_UP: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(3000px)', ...BOUNCE_DEFAULT },
{ offset: 0.6, opacity: 1, transform: 'translateY(-20px)', ...BOUNCE_DEFAULT },
{ offset: 0.75, opacity: 1, transform: 'translateY(10px)', ...BOUNCE_DEFAULT },
{ offset: 0.9, opacity: 1, transform: 'translateY(-5px)', ...BOUNCE_DEFAULT },
{ offset: 1, opacity: 1, transform: 'translateY(0px)', ...BOUNCE_DEFAULT }
];
const BOUNCE_IN_DOWN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(-3000px)', ...BOUNCE_DEFAULT },
{ offset: 0.6, opacity: 1, transform: 'translateY(25px)', ...BOUNCE_DEFAULT },
{ offset: 0.75, opacity: 1, transform: 'translateY(-10px)', ...BOUNCE_DEFAULT },
{ offset: 0.9, opacity: 1, transform: 'translateY(5px)', ...BOUNCE_DEFAULT },
{ offset: 1, opacity: 1, transform: 'translateY(0px)', ...BOUNCE_DEFAULT }
];
const BOUNCE_IN_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(3000px)', ...BOUNCE_DEFAULT },
{ offset: 0.6, opacity: 1, transform: 'translateX(-25px)', ...BOUNCE_DEFAULT },
{ offset: 0.75, opacity: 1, transform: 'translateX(10px)', ...BOUNCE_DEFAULT },
{ offset: 0.9, opacity: 1, transform: 'translateX(-5px)', ...BOUNCE_DEFAULT },
{ offset: 1, opacity: 1, transform: 'translateX(0px)', ...BOUNCE_DEFAULT }
];
const BOUNCE_IN_LEFT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(-3000px)', ...BOUNCE_DEFAULT },
{ offset: 0.6, opacity: 1, transform: 'translateX(25px)', ...BOUNCE_DEFAULT },
{ offset: 0.75, opacity: 1, transform: 'translateX(-10px)', ...BOUNCE_DEFAULT },
{ offset: 0.9, opacity: 1, transform: 'translateX(5px)', ...BOUNCE_DEFAULT },
{ offset: 1, opacity: 1, transform: 'translateX(0px)', ...BOUNCE_DEFAULT }
];
export default {
[ANIMATIONS.BOUNCE_IN]: BOUNCE_IN,
[ANIMATIONS.BOUNCE_IN_UP]: BOUNCE_IN_UP,
[ANIMATIONS.BOUNCE_IN_DOWN]: BOUNCE_IN_DOWN,
[ANIMATIONS.BOUNCE_IN_RIGHT]: BOUNCE_IN_RIGHT,
[ANIMATIONS.BOUNCE_IN_LEFT]: BOUNCE_IN_LEFT
};

53
src/components/animation/animations/animate/bouncing-exits.ts
Wyświetl plik

@ -1,53 +0,0 @@
import { ANIMATIONS } from './common';
const BOUNCE_OUT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'scale(1)' },
{ offset: 0.2, opacity: 1, transform: 'scale(0.9)' },
{ offset: 0.5, opacity: 1, transform: 'scale(1.11)' },
{ offset: 0.55, opacity: 1, transform: 'scale(1.11)' },
{ offset: 1, opacity: 0, transform: 'scale(1)' }
];
const BOUNCE_OUT_UP: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0px)' },
{ offset: 0.2, opacity: 1, transform: 'translateY(-10px)' },
{ offset: 0.4, opacity: 1, transform: 'translateY(20px)' },
{ offset: 0.45, opacity: 1, transform: 'translateY(20px)' },
{ offset: 0.55, opacity: 1, transform: 'translateY(20px)' },
{ offset: 1, opacity: 0, transform: 'translateY(-100vh)' }
];
const BOUNCE_OUT_DOWN: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0px)' },
{ offset: 0.2, opacity: 1, transform: 'translateY(10px)' },
{ offset: 0.4, opacity: 1, transform: 'translateY(-20px)' },
{ offset: 0.45, opacity: 1, transform: 'translateY(-20px)' },
{ offset: 0.55, opacity: 1, transform: 'translateY(-20px)' },
{ offset: 1, opacity: 0, transform: 'translateY(100vh)' }
];
const BOUNCE_OUT_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0px)' },
{ offset: 0.2, opacity: 1, transform: 'translateX(10px)' },
{ offset: 0.4, opacity: 1, transform: 'translateX(-20px)' },
{ offset: 0.45, opacity: 1, transform: 'translateX(-20px)' },
{ offset: 0.55, opacity: 1, transform: 'translateX(-20px)' },
{ offset: 1, opacity: 0, transform: 'translateX(100vw)' }
];
const BOUNCE_OUT_LEFT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0px)' },
{ offset: 0.2, opacity: 1, transform: 'translateX(-10px)' },
{ offset: 0.4, opacity: 1, transform: 'translateX(20px)' },
{ offset: 0.45, opacity: 1, transform: 'translateX(20px)' },
{ offset: 0.55, opacity: 1, transform: 'translateX(20px)' },
{ offset: 1, opacity: 0, transform: 'translateX(-100vw)' }
];
export default {
[ANIMATIONS.BOUNCE_OUT]: BOUNCE_OUT,
[ANIMATIONS.BOUNCE_OUT_UP]: BOUNCE_OUT_UP,
[ANIMATIONS.BOUNCE_OUT_DOWN]: BOUNCE_OUT_DOWN,
[ANIMATIONS.BOUNCE_OUT_RIGHT]: BOUNCE_OUT_RIGHT,
[ANIMATIONS.BOUNCE_OUT_LEFT]: BOUNCE_OUT_LEFT
};

138
src/components/animation/animations/animate/common.ts
Wyświetl plik

@ -1,138 +0,0 @@
const ANIMATIONS_ATTENTION_SEEKERS = {
BOUNCE: 'bounce',
FLASH: 'flash',
JELLO: 'jello',
PULSE: 'pulse',
ROTATE: 'rotate',
SHAKE: 'shake',
SWING: 'swing',
RUBBER_BAND: 'rubberBand',
TADA: 'tada',
WOBBLE: 'wobble',
HEART_BEAT: 'heartBeat'
} as const;
const ANIMATIONS_BOUNCING_ENTRANCES = {
BOUNCE_IN: 'bounceIn',
BOUNCE_IN_UP: 'bounceInUp',
BOUNCE_IN_DOWN: 'bounceInDown',
BOUNCE_IN_RIGHT: 'bounceInRight',
BOUNCE_IN_LEFT: 'bounceInLeft'
} as const;
const ANIMATIONS_BOUNCING_EXITS = {
BOUNCE_OUT: 'bounceOut',
BOUNCE_OUT_UP: 'bounceOutUp',
BOUNCE_OUT_DOWN: 'bounceOutDown',
BOUNCE_OUT_RIGHT: 'bounceOutRight',
BOUNCE_OUT_LEFT: 'bounceOutLeft'
} as const;
const ANIMATIONS_FADING_ENTRANCES = {
FADE_IN: 'fadeIn',
FADE_IN_UP: 'fadeInUp',
FADE_IN_UP_BIG: 'fadeInUpBig',
FADE_IN_DOWN: 'fadeInDown',
FADE_IN_DOWN_BIG: 'fadeInDownBig',
FADE_IN_RIGHT: 'fadeInRight',
FADE_IN_RIGHT_BIG: 'fadeInRightBig',
FADE_IN_LEFT: 'fadeInLeft',
FADE_IN_LEFT_BIG: 'fadeInLeftBig'
} as const;
const ANIMATIONS_FADING_EXITS = {
FADE_OUT: 'fadeOut',
FADE_OUT_UP: 'fadeOutUp',
FADE_OUT_UP_BIG: 'fadeOutUpBig',
FADE_OUT_DOWN: 'fadeOutDown',
FADE_OUT_DOWN_BIG: 'fadeOutDownBig',
FADE_OUT_RIGHT: 'fadeOutRight',
FADE_OUT_RIGHT_BIG: 'fadeOutRightBig',
FADE_OUT_LEFT: 'fadeOutLeft',
FADE_OUT_LEFT_BIG: 'fadeOutLeftBig'
} as const;
const ANIMATIONS_FLIPPERS = {
FLIP: 'flip',
FLIP_IN_X: 'flipInX',
FLIP_IN_Y: 'flipInY',
FLIP_OUT_X: 'flipOutX',
FLIP_OUT_Y: 'flipOutY'
} as const;
const ANIMATIONS_LIGHTSPEED = {
LIGHT_SPEED_IN: 'lightSpeedIn',
LIGHT_SPEED_OUT: 'lightSpeedOut'
} as const;
const ANIMATIONS_ROTATING_ENTRANCES = {
ROTATE_IN: 'rotateIn',
ROTATE_IN_CLOCKWISE: 'rotateInClockwise',
ROTATE_IN_DOWN_LEFT: 'rotateInDownLeft',
ROTATE_IN_DOWN_RIGHT: 'rotateInDownRight',
ROTATE_IN_UP_LEFT: 'rotateInUpLeft',
ROTATE_IN_UP_RIGHT: 'rotateInUpRight'
} as const;
const ANIMATIONS_ROTATING_EXITS = {
ROTATE_OUT: 'rotateOut',
ROTATE_OUT_CLOCKWISE: 'rotateOutClockwise',
ROTATE_OUT_DOWN_LEFT: 'rotateOutDownLeft',
ROTATE_OUT_DOWN_RIGHT: 'rotateOutDownRight',
ROTATE_OUT_UP_LEFT: 'rotateOutUpLeft',
ROTATE_OUT_UP_RIGHT: 'rotateOutUpRight'
} as const;
const ANIMATIONS_SLIDING_ENTRANCES = {
SLIDE_IN_UP: 'slideInUp',
SLIDE_IN_DOWN: 'slideInDown',
SLIDE_IN_LEFT: 'slideInLeft',
SLIDE_IN_RIGHT: 'slideInRight'
} as const;
const ANIMATIONS_SLIDING_EXITS = {
SLIDE_OUT_UP: 'slideOutUp',
SLIDE_OUT_DOWN: 'slideOutDown',
SLIDE_OUT_LEFT: 'slideOutLeft',
SLIDE_OUT_RIGHT: 'slideOutRight'
} as const;
const ANIMATIONS_ZOOM_ENTRANCES = {
ZOOM_IN: 'zoomIn',
ZOOM_IN_UP: 'zoomInUp',
ZOOM_IN_DOWN: 'zoomInDown',
ZOOM_IN_LEFT: 'zoomInLeft',
ZOOM_IN_RIGHT: 'zoomInRight'
} as const;
const ANIMATIONS_ZOOM_EXITS = {
ZOOM_OUT: 'zoomOut',
ZOOM_OUT_UP: 'zoomOutUp',
ZOOM_OUT_DOWN: 'zoomOutDown',
ZOOM_OUT_LEFT: 'zoomOutLeft',
ZOOM_OUT_RIGHT: 'zoomOutRight'
} as const;
const ANIMATIONS_SPECIALS = {
HINGE: 'hinge',
JACK_IN_THE_BOX: 'jackInTheBox',
ROLL_IN: 'rollIn',
ROLL_OUT: 'rollOut'
} as const;
export const ANIMATIONS = {
...ANIMATIONS_ATTENTION_SEEKERS,
...ANIMATIONS_BOUNCING_ENTRANCES,
...ANIMATIONS_BOUNCING_EXITS,
...ANIMATIONS_FADING_ENTRANCES,
...ANIMATIONS_FADING_EXITS,
...ANIMATIONS_FLIPPERS,
...ANIMATIONS_LIGHTSPEED,
...ANIMATIONS_ROTATING_ENTRANCES,
...ANIMATIONS_ROTATING_EXITS,
...ANIMATIONS_SLIDING_ENTRANCES,
...ANIMATIONS_SLIDING_EXITS,
...ANIMATIONS_ZOOM_ENTRANCES,
...ANIMATIONS_ZOOM_EXITS,
...ANIMATIONS_SPECIALS
} as const;

58
src/components/animation/animations/animate/fading-entrances.ts
Wyświetl plik

@ -1,58 +0,0 @@
import { ANIMATIONS } from './common';
const FADE_IN: Keyframe[] = [
{ offset: 0, opacity: 0 },
{ offset: 1, opacity: 1 }
];
const FADE_IN_UP: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(100%)' },
{ offset: 1, opacity: 1, transform: 'translateY(0)' }
];
const FADE_IN_UP_BIG: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(100vh)' },
{ offset: 1, opacity: 1, transform: 'translateY(0px)' }
];
const FADE_IN_DOWN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(-100%)' },
{ offset: 1, opacity: 1, transform: 'translateY(0)' }
];
const FADE_IN_DOWN_BIG: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateY(-100vh)' },
{ offset: 1, opacity: 1, transform: 'translateY(0px)' }
];
const FADE_IN_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(100%)' },
{ offset: 1, opacity: 1, transform: 'translateX(0)' }
];
const FADE_IN_RIGHT_BIG: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(100vw)' },
{ offset: 1, opacity: 1, transform: 'translateX(0px)' }
];
const FADE_IN_LEFT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(-100%)' },
{ offset: 1, opacity: 1, transform: 'translateX(0)' }
];
const FADE_IN_LEFT_BIG: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(-100vw)' },
{ offset: 1, opacity: 1, transform: 'translateX(0px)' }
];
export default {
[ANIMATIONS.FADE_IN]: FADE_IN,
[ANIMATIONS.FADE_IN_UP]: FADE_IN_UP,
[ANIMATIONS.FADE_IN_UP_BIG]: FADE_IN_UP_BIG,
[ANIMATIONS.FADE_IN_DOWN]: FADE_IN_DOWN,
[ANIMATIONS.FADE_IN_DOWN_BIG]: FADE_IN_DOWN_BIG,
[ANIMATIONS.FADE_IN_RIGHT]: FADE_IN_RIGHT,
[ANIMATIONS.FADE_IN_RIGHT_BIG]: FADE_IN_RIGHT_BIG,
[ANIMATIONS.FADE_IN_LEFT]: FADE_IN_LEFT,
[ANIMATIONS.FADE_IN_LEFT_BIG]: FADE_IN_LEFT_BIG
};

58
src/components/animation/animations/animate/fading-exits.ts
Wyświetl plik

@ -1,58 +0,0 @@
import { ANIMATIONS } from './common';
const FADE_OUT: Keyframe[] = [
{ offset: 0, opacity: 1 },
{ offset: 1, opacity: 0 }
];
const FADE_OUT_UP: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0)' },
{ offset: 1, opacity: 0, transform: 'translateY(-100%)' }
];
const FADE_OUT_UP_BIG: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0px)' },
{ offset: 1, opacity: 0, transform: 'translateY(-100vh)' }
];
const FADE_OUT_DOWN: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0)' },
{ offset: 1, opacity: 0, transform: 'translateY(100%)' }
];
const FADE_OUT_DOWN_BIG: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateY(0px)' },
{ offset: 1, opacity: 0, transform: 'translateY(100vh)' }
];
const FADE_OUT_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0)' },
{ offset: 1, opacity: 0, transform: 'translateX(100%)' }
];
const FADE_OUT_RIGHT_BIG: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0px)' },
{ offset: 1, opacity: 0, transform: 'translateX(100vw)' }
];
const FADE_OUT_LEFT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0)' },
{ offset: 1, opacity: 0, transform: 'translateX(-100%)' }
];
const FADE_OUT_LEFT_BIG: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0px)' },
{ offset: 1, opacity: 0, transform: 'translateX(-100vw)' }
];
export default {
[ANIMATIONS.FADE_OUT]: FADE_OUT,
[ANIMATIONS.FADE_OUT_UP]: FADE_OUT_UP,
[ANIMATIONS.FADE_OUT_UP_BIG]: FADE_OUT_UP_BIG,
[ANIMATIONS.FADE_OUT_DOWN]: FADE_OUT_DOWN,
[ANIMATIONS.FADE_OUT_DOWN_BIG]: FADE_OUT_DOWN_BIG,
[ANIMATIONS.FADE_OUT_RIGHT]: FADE_OUT_RIGHT,
[ANIMATIONS.FADE_OUT_RIGHT_BIG]: FADE_OUT_RIGHT_BIG,
[ANIMATIONS.FADE_OUT_LEFT]: FADE_OUT_LEFT,
[ANIMATIONS.FADE_OUT_LEFT_BIG]: FADE_OUT_LEFT_BIG
};

130
src/components/animation/animations/animate/flippers.ts
Wyświetl plik

@ -1,130 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP: Keyframe[] = [
{
offset: 0,
backfaceVisibility: 'visible',
easing: 'ease-out',
transform: 'perspective(400px) scale(1) translateZ(0) rotateY(-360deg)'
},
{
offset: 0.4,
backfaceVisibility: 'visible',
easing: 'ease-out',
transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-190deg)'
},
{
offset: 0.5,
backfaceVisibility: 'visible',
easing: 'ease-in',
transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-170deg)'
},
{
offset: 0.8,
backfaceVisibility: 'visible',
easing: 'ease-in',
transform: 'perspective(400px) scale(0.95) translateZ(0) rotateY(0deg)'
},
{
offset: 1,
backfaceVisibility: 'visible',
easing: 'ease-in',
transform: 'perspective(400px) scale(1) translateZ(0) rotateY(0deg)'
}
];
const FLIP_IN_X: Keyframe[] = [
{
offset: 0,
backfaceVisibility: 'visible',
opacity: 0,
easing: 'ease-in',
transform: 'perspective(400px) rotateX(90deg)'
},
{
offset: 0.4,
backfaceVisibility: 'visible',
opacity: 0.5,
easing: 'ease-in',
transform: 'perspective(400px) rotateX(-20deg)'
},
{
offset: 0.6,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateX(10deg)'
},
{
offset: 0.8,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateX(-5deg)'
},
{
offset: 1,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateX(0deg)'
}
];
const FLIP_IN_Y: Keyframe[] = [
{
offset: 0,
backfaceVisibility: 'visible',
opacity: 0,
easing: 'ease-in',
transform: 'perspective(400px) rotateY(90deg)'
},
{
offset: 0.4,
backfaceVisibility: 'visible',
opacity: 0.5,
easing: 'ease-in',
transform: 'perspective(400px) rotateY(-20deg)'
},
{
offset: 0.6,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateY(10deg)'
},
{
offset: 0.8,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateY(-5deg)'
},
{
offset: 1,
backfaceVisibility: 'visible',
opacity: 1,
easing: 'ease-in',
transform: 'perspective(400px) rotateY(0deg)'
}
];
const FLIP_OUT_X: Keyframe[] = [
{ offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(0deg)' },
{ offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(-15deg)' },
{ offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateX(90deg)' }
];
const FLIP_OUT_Y: Keyframe[] = [
{ offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(0deg)' },
{ offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(-15deg)' },
{ offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateY(90deg)' }
];
export default {
[ANIMATIONS.FLIP]: FLIP,
[ANIMATIONS.FLIP_IN_X]: FLIP_IN_X,
[ANIMATIONS.FLIP_IN_Y]: FLIP_IN_Y,
[ANIMATIONS.FLIP_OUT_X]: FLIP_OUT_X,
[ANIMATIONS.FLIP_OUT_Y]: FLIP_OUT_Y
};

31
src/components/animation/animations/animate/index.ts
Wyświetl plik

@ -1,31 +0,0 @@
import ATTENTION_SEEKERS from './attention-seekers';
import BOUNCING_ENTRANCES from './bouncing-entrances';
import BOUNCING_EXITS from './bouncing-exits';
import FADING_ENTRANCES from './fading-entrances';
import FADING_EXITS from './fading-exits';
import FLIPPERS from './flippers';
import LIGHTSPEED from './lightspeed';
import ROTATING_ENTRANCES from './rotating-entrances';
import ROTATING_EXITS from './rotating-exits';
import SLIDING_ENTRANCES from './sliding-entrances';
import SLIDING_EXITS from './sliding-exits';
import SPECIALS from './specials';
import ZOOM_ENTRANCES from './zoom-entrances';
import ZOOM_EXITS from './zoom-exits';
export default {
...ATTENTION_SEEKERS,
...BOUNCING_ENTRANCES,
...BOUNCING_EXITS,
...FADING_ENTRANCES,
...FADING_EXITS,
...FLIPPERS,
...LIGHTSPEED,
...ROTATING_ENTRANCES,
...ROTATING_EXITS,
...SLIDING_ENTRANCES,
...SLIDING_EXITS,
...SPECIALS,
...ZOOM_ENTRANCES,
...ZOOM_EXITS
};

18
src/components/animation/animations/animate/lightspeed.ts
Wyświetl plik

@ -1,18 +0,0 @@
import { ANIMATIONS } from './common';
const LIGHT_SPEED_IN: Keyframe[] = [
{ offset: 0, easing: 'ease-out', opacity: 0, transform: 'translateX(200px) skewX(-30deg)' },
{ offset: 0.6, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(20deg)' },
{ offset: 0.8, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(-5deg)' },
{ offset: 1, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(0deg)' }
];
const LIGHT_SPEED_OUT: Keyframe[] = [
{ offset: 0, easing: 'ease-in', opacity: 1, transform: 'translateX(0px) skewX(0deg)' },
{ offset: 1, easing: 'ease-in', opacity: 0, transform: 'translateX(200px) skewX(30deg)' }
];
export default {
[ANIMATIONS.LIGHT_SPEED_IN]: LIGHT_SPEED_IN,
[ANIMATIONS.LIGHT_SPEED_OUT]: LIGHT_SPEED_OUT
};

40
src/components/animation/animations/animate/rotating-entrances.ts
Wyświetl plik

@ -1,40 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_IN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }
];
const ROTATE_IN_CLOCKWISE: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(-180deg)', transformOrigin: 'center' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }
];
const ROTATE_IN_DOWN_LEFT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'left bottom' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }
];
const ROTATE_IN_DOWN_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'right bottom' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }
];
const ROTATE_IN_UP_LEFT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'left bottom' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }
];
const ROTATE_IN_UP_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'right bottom' },
{ offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }
];
export default {
[ANIMATIONS.ROTATE_IN]: ROTATE_IN,
[ANIMATIONS.ROTATE_IN_CLOCKWISE]: ROTATE_IN_CLOCKWISE,
[ANIMATIONS.ROTATE_IN_DOWN_LEFT]: ROTATE_IN_DOWN_LEFT,
[ANIMATIONS.ROTATE_IN_DOWN_RIGHT]: ROTATE_IN_DOWN_RIGHT,
[ANIMATIONS.ROTATE_IN_UP_LEFT]: ROTATE_IN_UP_LEFT,
[ANIMATIONS.ROTATE_IN_UP_RIGHT]: ROTATE_IN_UP_RIGHT
};

40
src/components/animation/animations/animate/rotating-exits.ts
Wyświetl plik

@ -1,40 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_OUT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' },
{ offset: 1, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' }
];
const ROTATE_OUT_CLOCKWISE: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' },
{ offset: 1, opacity: 0, transform: 'rotateZ(-180deg)', transformOrigin: 'center' }
];
const ROTATE_OUT_DOWN_LEFT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' },
{ offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'left bottom' }
];
const ROTATE_OUT_DOWN_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' },
{ offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'right bottom' }
];
const ROTATE_OUT_UP_LEFT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' },
{ offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'left bottom' }
];
const ROTATE_OUT_UP_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' },
{ offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'right bottom' }
];
export default {
[ANIMATIONS.ROTATE_OUT]: ROTATE_OUT,
[ANIMATIONS.ROTATE_OUT_CLOCKWISE]: ROTATE_OUT_CLOCKWISE,
[ANIMATIONS.ROTATE_OUT_DOWN_LEFT]: ROTATE_OUT_DOWN_LEFT,
[ANIMATIONS.ROTATE_OUT_DOWN_RIGHT]: ROTATE_OUT_DOWN_RIGHT,
[ANIMATIONS.ROTATE_OUT_UP_LEFT]: ROTATE_OUT_UP_LEFT,
[ANIMATIONS.ROTATE_OUT_UP_RIGHT]: ROTATE_OUT_UP_RIGHT
};

28
src/components/animation/animations/animate/sliding-entrances.ts
Wyświetl plik

@ -1,28 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_UP: Keyframe[] = [
{ offset: 0, transform: 'translateY(100%)', visibility: 'hidden' },
{ offset: 1, transform: 'translateY(0)', visibility: 'visible' }
];
const SLIDE_IN_DOWN: Keyframe[] = [
{ offset: 0, transform: 'translateY(-100%)', visibility: 'hidden' },
{ offset: 1, transform: 'translateY(0)', visibility: 'visible' }
];
const SLIDE_IN_LEFT: Keyframe[] = [
{ offset: 0, transform: 'translateX(-100%)', visibility: 'hidden' },
{ offset: 1, transform: 'translateX(0)', visibility: 'visible' }
];
const SLIDE_IN_RIGHT: Keyframe[] = [
{ offset: 0, transform: 'translateX(100%)', visibility: 'hidden' },
{ offset: 1, transform: 'translateX(0)', visibility: 'visible' }
];
export default {
[ANIMATIONS.SLIDE_IN_UP]: SLIDE_IN_UP,
[ANIMATIONS.SLIDE_IN_DOWN]: SLIDE_IN_DOWN,
[ANIMATIONS.SLIDE_IN_LEFT]: SLIDE_IN_LEFT,
[ANIMATIONS.SLIDE_IN_RIGHT]: SLIDE_IN_RIGHT
};

28
src/components/animation/animations/animate/sliding-exits.ts
Wyświetl plik

@ -1,28 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_OUT_UP: Keyframe[] = [
{ offset: 0, transform: 'translateY(0)', visibility: 'visible' },
{ offset: 1, transform: 'translateY(-100%)', visibility: 'hidden' }
];
const SLIDE_OUT_DOWN: Keyframe[] = [
{ offset: 0, transform: 'translateY(0)', visibility: 'visible' },
{ offset: 1, transform: 'translateY(100%)', visibility: 'hidden' }
];
const SLIDE_OUT_LEFT: Keyframe[] = [
{ offset: 0, transform: 'translateX(0)', visibility: 'visible' },
{ offset: 1, transform: 'translateX(-100%)', visibility: 'hidden' }
];
const SLIDE_OUT_RIGHT: Keyframe[] = [
{ offset: 0, transform: 'translateX(0)', visibility: 'visible' },
{ offset: 1, transform: 'translateX(100%)', visibility: 'hidden' }
];
export default {
[ANIMATIONS.SLIDE_OUT_UP]: SLIDE_OUT_UP,
[ANIMATIONS.SLIDE_OUT_DOWN]: SLIDE_OUT_DOWN,
[ANIMATIONS.SLIDE_OUT_LEFT]: SLIDE_OUT_LEFT,
[ANIMATIONS.SLIDE_OUT_RIGHT]: SLIDE_OUT_RIGHT
};

40
src/components/animation/animations/animate/specials.ts
Wyświetl plik

@ -1,40 +0,0 @@
import { ANIMATIONS } from './common';
const HINGE_DEFAULT: Keyframe = {
opacity: 1,
transformOrigin: 'top left',
easing: 'ease-in-out'
};
const HINGE: Keyframe[] = [
{ offset: 0, transform: 'rotate(0)', ...HINGE_DEFAULT },
{ offset: 0.2, transform: 'rotateZ(80deg)', ...HINGE_DEFAULT },
{ offset: 0.4, transform: 'rotateZ(60deg)', ...HINGE_DEFAULT },
{ offset: 0.6, transform: 'rotateZ(80deg)', ...HINGE_DEFAULT },
{ offset: 0.8, transform: 'rotateZ(60deg)', ...HINGE_DEFAULT },
{ offset: 1, ...HINGE_DEFAULT, opacity: 0, transform: 'translateY(700px)' }
];
const JACK_IN_THE_BOX: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'scale(0.1) rotate(30deg)', transformOrigin: 'center bottom' },
{ offset: 0.5, opacity: 0.3, transform: 'rotate(-10deg)', transformOrigin: '50% 50% 0' },
{ offset: 0.7, opacity: 0.6, transform: 'rotate(3deg)', transformOrigin: '50% 50% 0' },
{ offset: 1, opacity: 1, transform: 'scale(1)', transformOrigin: '50% 50% 0' }
];
const ROLL_IN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'translateX(-100%) rotateZ(-120deg)' },
{ offset: 1, opacity: 1, transform: 'translateX(0%)' }
];
const ROLL_OUT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'translateX(0%)' },
{ offset: 1, opacity: 0, transform: 'translateX(100%) rotateZ(120deg)' }
];
export default {
[ANIMATIONS.HINGE]: HINGE,
[ANIMATIONS.JACK_IN_THE_BOX]: JACK_IN_THE_BOX,
[ANIMATIONS.ROLL_IN]: ROLL_IN,
[ANIMATIONS.ROLL_OUT]: ROLL_OUT
};

79
src/components/animation/animations/animate/zoom-entrances.ts
Wyświetl plik

@ -1,79 +0,0 @@
import { ANIMATIONS } from './common';
const ZOOM_IN: Keyframe[] = [
{ offset: 0, opacity: 0, transform: 'scale(1)' },
{ offset: 0.5, opacity: 0, transform: 'scale(0.3)' },
{ offset: 1, opacity: 1, transform: 'scale(1)' }
];
const ZOOM_IN_UP: Keyframe[] = [
{
offset: 0,
opacity: 0,
transform: 'scale(0.1) translateY(-100vh)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
{
offset: 0.6,
opacity: 1,
transform: 'scale(0.475) translateY(60px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{ offset: 1, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }
];
const ZOOM_IN_DOWN: Keyframe[] = [
{
offset: 0,
opacity: 0,
transform: 'scale(0.1) translateY(100vh)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
{
offset: 0.6,
opacity: 1,
transform: 'scale(0.475) translateY(-60px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{ offset: 1, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }
];
const ZOOM_IN_LEFT: Keyframe[] = [
{
offset: 0,
opacity: 0,
transform: 'scale(0.1) translateX(-100vw)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
{
offset: 0.6,
opacity: 1,
transform: 'scale(0.475) translateX(10px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{ offset: 1, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }
];
const ZOOM_IN_RIGHT: Keyframe[] = [
{
offset: 0,
opacity: 0,
transform: 'scale(0.1) translateX(100vw)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
{
offset: 0.6,
opacity: 1,
transform: 'scale(0.475) translateX(-10px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{ offset: 1, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }
];
export default {
[ANIMATIONS.ZOOM_IN]: ZOOM_IN,
[ANIMATIONS.ZOOM_IN_UP]: ZOOM_IN_UP,
[ANIMATIONS.ZOOM_IN_DOWN]: ZOOM_IN_DOWN,
[ANIMATIONS.ZOOM_IN_LEFT]: ZOOM_IN_LEFT,
[ANIMATIONS.ZOOM_IN_RIGHT]: ZOOM_IN_RIGHT
};

90
src/components/animation/animations/animate/zoom-exits.ts
Wyświetl plik

@ -1,90 +0,0 @@
import { ANIMATIONS } from './common';
const ZOOM_OUT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'scale(1)' },
{ offset: 0.5, opacity: 0, transform: 'scale(0.3)' },
{ offset: 1, opacity: 0, transform: 'scale(0)' }
];
const ZOOM_OUT_UP: Keyframe[] = [
{
offset: 0,
opacity: 1,
transform: 'scale(1) translateY(0px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
transformOrigin: 'center'
},
{
offset: 0.4,
opacity: 1,
transform: 'scale(0.475) translateY(60px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
transformOrigin: 'center'
},
{
offset: 1,
opacity: 0,
transform: 'scale(0.1) translateY(-100vh)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
transformOrigin: 'center bottom'
}
];
const ZOOM_OUT_DOWN: Keyframe[] = [
{
offset: 0,
opacity: 1,
transform: 'scale(1) translateY(0px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
transformOrigin: 'center'
},
{
offset: 0.4,
opacity: 1,
transform: 'scale(0.475) translateY(-60px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
transformOrigin: 'center'
},
{
offset: 1,
opacity: 0,
transform: 'scale(0.1) translateY(100vh)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
transformOrigin: 'center bottom'
}
];
const ZOOM_OUT_LEFT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' },
{
offset: 0.4,
opacity: 1,
transform: 'scale(0.475) translateX(10px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{
offset: 1,
opacity: 0,
transform: 'scale(0.1) translateX(-100vw)',
easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
}
];
const ZOOM_OUT_RIGHT: Keyframe[] = [
{ offset: 0, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' },
{
offset: 0.4,
opacity: 1,
transform: 'scale(0.475) translateX(-10px)',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)'
},
{ offset: 1, opacity: 0, transform: 'scale(0.1) translateX(100vw)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' }
];
export default {
[ANIMATIONS.ZOOM_OUT]: ZOOM_OUT,
[ANIMATIONS.ZOOM_OUT_UP]: ZOOM_OUT_UP,
[ANIMATIONS.ZOOM_OUT_DOWN]: ZOOM_OUT_DOWN,
[ANIMATIONS.ZOOM_OUT_LEFT]: ZOOM_OUT_LEFT,
[ANIMATIONS.ZOOM_OUT_RIGHT]: ZOOM_OUT_RIGHT
};

21
src/components/animation/animations/animatecss/LICENSE.md 100644
Wyświetl plik

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2020 Daniel Eden
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

1720
src/components/animation/animations/animatecss/index.ts 100644
Wyświetl plik

Plik diff jest za duży Load Diff

4
src/components/animation/animations/animista/LICENSE.md
Wyświetl plik

@ -1,7 +1,5 @@
LICENSE
All CSS animations generated with Animista.net are free for personal and commercial usage and are licensed under FreeBSD license.
FreeBSD License
COPYRIGHT 2017 ANA TRAVAS
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

56
src/components/animation/animations/animista/bg-pan.ts
Wyświetl plik

@ -1,56 +0,0 @@
import { ANIMATIONS } from './common';
const BG_PAN_DEFAULT: Keyframe = {
fillMode: 'both'
};
const BG_PAN_LEFT: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 50%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 50%' }
];
const BG_PAN_RIGHT: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 50%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 50%' }
];
const BG_PAN_TOP: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '50% 100%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '50% 0%' }
];
const BG_PAN_BOTTOM: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '50% 0%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '50% 100%' }
];
const BG_PAN_TR: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 100%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 0%' }
];
const BG_PAN_BR: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 0%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 100%' }
];
const BG_PAN_BL: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 0%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 100%' }
];
const BG_PAN_TL: Keyframe[] = [
{ offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 100%' },
{ offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 0%' }
];
export default {
[ANIMATIONS.BG_PAN_LEFT]: BG_PAN_LEFT,
[ANIMATIONS.BG_PAN_RIGHT]: BG_PAN_RIGHT,
[ANIMATIONS.BG_PAN_TOP]: BG_PAN_TOP,
[ANIMATIONS.BG_PAN_BOTTOM]: BG_PAN_BOTTOM,
[ANIMATIONS.BG_PAN_TR]: BG_PAN_TR,
[ANIMATIONS.BG_PAN_BR]: BG_PAN_BR,
[ANIMATIONS.BG_PAN_BL]: BG_PAN_BL,
[ANIMATIONS.BG_PAN_TL]: BG_PAN_TL
};

368
src/components/animation/animations/animista/bounce-in.ts
Wyświetl plik

@ -1,368 +0,0 @@
import { ANIMATIONS } from './common';
const BOUNCE_IN_DEFAULT: Keyframe = {
fillMode: 'both'
};
const BOUNCE_IN_TOP: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(-500px)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(-65px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(-28px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.9,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(-8px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
}
];
const BOUNCE_IN_RIGHT: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(600px)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(68px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(32px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.9,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(8px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
}
];
const BOUNCE_IN_BOTTOM: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(500px)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(65px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(28px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.9,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(8px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'translateY(0)',
easing: 'ease-out',
opacity: 1
}
];
const BOUNCE_IN_LEFT: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(-600px)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(-68px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(-28px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.9,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(-8px)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'translateX(0)',
easing: 'ease-out',
opacity: 1
}
];
const BOUNCE_IN_FWD: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'scale(0)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'scale(0.7)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'scale(0.84)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.89,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'scale(0.95)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
}
];
const BOUNCE_IN_BCK: Keyframe[] = [
{
offset: 0,
...BOUNCE_IN_DEFAULT,
transform: 'scale(7)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.38,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.55,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1.5)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.72,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.81,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1.24)',
easing: 'ease-in',
opacity: 1
},
{
offset: 0.89,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
},
{
offset: 0.95,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1.04)',
easing: 'ease-in',
opacity: 1
},
{
offset: 1,
...BOUNCE_IN_DEFAULT,
transform: 'scale(1)',
easing: 'ease-out',
opacity: 1
}
];
export default {
[ANIMATIONS.BOUNCE_IN_TOP]: BOUNCE_IN_TOP,
[ANIMATIONS.BOUNCE_IN_RIGHT]: BOUNCE_IN_RIGHT,
[ANIMATIONS.BOUNCE_IN_BOTTOM]: BOUNCE_IN_BOTTOM,
[ANIMATIONS.BOUNCE_IN_LEFT]: BOUNCE_IN_LEFT,
[ANIMATIONS.BOUNCE_IN_FWD]: BOUNCE_IN_FWD,
[ANIMATIONS.BOUNCE_IN_BCK]: BOUNCE_IN_BCK
};

70
src/components/animation/animations/animista/bounce.ts
Wyświetl plik

@ -1,70 +0,0 @@
import { ANIMATIONS } from './common';
const BOUNCE_DEFAULT: Keyframe = {
fillMode: 'both'
};
const BOUNCE_TOP: Keyframe[] = [
{ offset: 0, ...BOUNCE_DEFAULT, transform: 'translateY(-45px)', easing: 'ease-in', opacity: 1 },
{ offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 },
{ offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateY(-24px)', easing: 'ease-in' },
{ offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateY(-12px)', easing: 'ease-in' },
{ offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateY(-6px)', easing: 'ease-in' },
{ offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateY(-4px)', easing: 'ease-in' },
{ offset: 1, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out', opacity: 1 }
];
const BOUNCE_BOTTOM: Keyframe[] = [
{ offset: 0, ...BOUNCE_DEFAULT, transform: 'translateY(45px)', easing: 'ease-in', opacity: 1 },
{ offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 },
{ offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateY(24px)', easing: 'ease-in' },
{ offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateY(12px)', easing: 'ease-in' },
{ offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateY(6px)', easing: 'ease-in' },
{ offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' },
{ offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateY(4px)', easing: 'ease-in' },
{ offset: 1, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out', opacity: 1 }
];
const BOUNCE_LEFT: Keyframe[] = [
{ offset: 0, ...BOUNCE_DEFAULT, transform: 'translateX(-48px)', easing: 'ease-in', opacity: 1 },
{ offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 },
{ offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateX(-26px)', easing: 'ease-in' },
{ offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateX(-13px)', easing: 'ease-in' },
{ offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateX(-6.5px)', easing: 'ease-in' },
{ offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateX(-4px)', easing: 'ease-in' },
{ offset: 0.98, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 1, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out', opacity: 1 }
];
const BOUNCE_RIGHT: Keyframe[] = [
{ offset: 0, ...BOUNCE_DEFAULT, transform: 'translateX(48px)', easing: 'ease-in', opacity: 1 },
{ offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 },
{ offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateX(26px)', easing: 'ease-in' },
{ offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateX(13px)', easing: 'ease-in' },
{ offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateX(6.5px)', easing: 'ease-in' },
{ offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateX(4px)', easing: 'ease-in' },
{ offset: 0.98, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' },
{ offset: 1, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out', opacity: 1 }
];
export default {
[ANIMATIONS.BOUNCE_TOP]: BOUNCE_TOP,
[ANIMATIONS.BOUNCE_BOTTOM]: BOUNCE_BOTTOM,
[ANIMATIONS.BOUNCE_LEFT]: BOUNCE_LEFT,
[ANIMATIONS.BOUNCE_RIGHT]: BOUNCE_RIGHT
};

681
src/components/animation/animations/animista/common.ts
Wyświetl plik

@ -1,681 +0,0 @@
const ANIMATIONS_SCALE_UP = {
SCALE_UP_CENTER: 'scale-up-center',
SCALE_UP_TOP: 'scale-up-top',
SCALE_UP_TR: 'scale-up-tr',
SCALE_UP_RIGHT: 'scale-up-right',
SCALE_UP_BR: 'scale-up-br',
SCALE_UP_BOTTOM: 'scale-up-bottom',
SCALE_UP_BL: 'scale-up-bl',
SCALE_UP_LEFT: 'scale-up-left',
SCALE_UP_TL: 'scale-up-tl',
SCALE_UP_HOR_CENTER: 'scale-up-hor-center',
SCALE_UP_HOR_LEFT: 'scale-up-hor-left',
SCALE_UP_HOR_RIGHT: 'scale-up-hor-right',
SCALE_UP_VER_CENTER: 'scale-up-ver-center',
SCALE_UP_VER_TOP: 'scale-up-ver-top',
SCALE_UP_VER_BOTTOM: 'scale-up-ver-bottom'
} as const;
const ANIMATIONS_SCALE_DOWN = {
SCALE_DOWN_CENTER: 'scale-down-center',
SCALE_DOWN_TOP: 'scale-down-top',
SCALE_DOWN_TR: 'scale-down-tr',
SCALE_DOWN_RIGHT: 'scale-down-right',
SCALE_DOWN_BR: 'scale-down-br',
SCALE_DOWN_BOTTOM: 'scale-down-bottom',
SCALE_DOWN_BL: 'scale-down-bl',
SCALE_DOWN_LEFT: 'scale-down-left',
SCALE_DOWN_TL: 'scale-down-tl',
SCALE_DOWN_HOR_CENTER: 'scale-down-hor-center',
SCALE_DOWN_HOR_LEFT: 'scale-down-hor-left',
SCALE_DOWN_HOR_RIGHT: 'scale-down-hor-right',
SCALE_DOWN_VER_CENTER: 'scale-down-ver-center',
SCALE_DOWN_VER_TOP: 'scale-down-ver-top',
SCALE_DOWN_VER_BOTTOM: 'scale-down-ver-bottom'
} as const;
const ANIMATIONS_ROTATE = {
ROTATE_CENTER: 'rotate-center',
ROTATE_TOP: 'rotate-top',
ROTATE_TR: 'rotate-tr',
ROTATE_RIGHT: 'rotate-right',
ROTATE_BR: 'rotate-br',
ROTATE_BOTTOM: 'rotate-bottom',
ROTATE_BL: 'rotate-bl',
ROTATE_LEFT: 'rotate-left',
ROTATE_TL: 'rotate-tl',
ROTATE_HOR_CENTER: 'rotate-hor-center',
ROTATE_HOR_TOP: 'rotate-hor-top',
ROTATE_HOR_BOTTOM: 'rotate-hor-bottom',
ROTATE_VERT_CENTER: 'rotate-vert-center',
ROTATE_VERT_LEFT: 'rotate-vert-left',
ROTATE_VERT_RIGHT: 'rotate-vert-right',
ROTATE_DIAGONAL_1: 'rotate-diagonal-1',
ROTATE_DIAGONAL_2: 'rotate-diagonal-2',
ROTATE_DIAGONAL_TR: 'rotate-diagonal-tr',
ROTATE_DIAGONAL_BR: 'rotate-diagonal-br',
ROTATE_DIAGONAL_BL: 'rotate-diagonal-bl',
ROTATE_DIAGONAL_TL: 'rotate-diagonal-tl'
} as const;
const ANIMATIONS_ROTATE_SCALE = {
ROTATE_SCALE_UP: 'rotate-scale-up',
ROTATE_SCALE_DOWN: 'rotate-scale-down',
ROTATE_SCALE_UP_HOR: 'rotate-scale-up-hor',
ROTATE_SCALE_DOWN_HOR: 'rotate-scale-down-hor',
ROTATE_SCALE_UP_VER: 'rotate-scale-up-ver',
ROTATE_SCALE_DOWN_VER: 'rotate-scale-down-ver',
ROTATE_SCALE_UP_DIAG_1: 'rotate-scale-up-diag-1',
ROTATE_SCALE_DOWN_DIAG_1: 'rotate-scale-down-diag-1',
ROTATE_SCALE_UP_DIAG_2: 'rotate-scale-up-diag-2',
ROTATE_SCALE_DOWN_DIAG_2: 'rotate-scale-down-diag-2'
} as const;
const ANIMATIONS_ROTATE_90 = {
ROTATE_90_CW: 'rotate-90-cw',
ROTATE_90_CCW: 'rotate-90-ccw',
ROTATE_90_TOP_CW: 'rotate-90-top-cw',
ROTATE_90_TOP_CCW: 'rotate-90-top-ccw',
ROTATE_90_TR_CW: 'rotate-90-tr-cw',
ROTATE_90_TR_CCW: 'rotate-90-tr-ccw',
ROTATE_90_RIGHT_CW: 'rotate-90-right-cw',
ROTATE_90_RIGHT_CCW: 'rotate-90-right-ccw',
ROTATE_90_BR_CW: 'rotate-90-br-cw',
ROTATE_90_BR_CCW: 'rotate-90-br-ccw',
ROTATE_90_BOTTOM_CW: 'rotate-90-bottom-cw',
ROTATE_90_BOTTOM_CCW: 'rotate-90-bottom-ccw',
ROTATE_90_BL_CW: 'rotate-90-bl-cw',
ROTATE_90_BL_CCW: 'rotate-90-bl-ccw',
ROTATE_90_LEFT_CW: 'rotate-90-left-cw',
ROTATE_90_LEFT_CCW: 'rotate-90-left-ccw',
ROTATE_90_TL_CW: 'rotate-90-tl-cw',
ROTATE_90_TL_CCW: 'rotate-90-tl-ccw',
ROTATE_90_HORIZONTAL_FWD: 'rotate-90-horizontal-fwd',
ROTATE_90_HORIZONTAL_BCK: 'rotate-90-horizontal-bck',
ROTATE_90_VERTICAL_FWD: 'rotate-90-vertical-fwd',
ROTATE_90_VERTICAL_BCK: 'rotate-90-vertical-bck'
} as const;
const ANIMATIONS_FLIP = {
FLIP_HORIZONTAL_BOTTOM: 'flip-horizontal-bottom',
FLIP_HORIZONTAL_TOP: 'flip-horizontal-top',
FLIP_HORIZONTAL_BCK: 'flip-horizontal-bck',
FLIP_HORIZONTAL_FWD: 'flip-horizontal-fwd',
FLIP_VERTICAL_RIGHT: 'flip-vertical-right',
FLIP_VERTICAL_LEFT: 'flip-vertical-left',
FLIP_VERTICAL_BCK: 'flip-vertical-bck',
FLIP_VERTICAL_FWD: 'flip-vertical-fwd',
FLIP_DIAGONAL_1_TR: 'flip-diagonal-1-tr',
FLIP_DIAGONAL_1_BL: 'flip-diagonal-1-bl',
FLIP_DIAGONAL_1_BCK: 'flip-diagonal-1-bck',
FLIP_DIAGONAL_1_FWD: 'flip-diagonal-1-fwd',
FLIP_DIAGONAL_2_BR: 'flip-diagonal-2-br',
FLIP_DIAGONAL_2_TL: 'flip-diagonal-2-tl',
FLIP_DIAGONAL_2_BCK: 'flip-diagonal-2-bck',
FLIP_DIAGONAL_2_FWD: 'flip-diagonal-2-fwd'
} as const;
const ANIMATIONS_FLIP_2 = {
FLIP_2_HOR_TOP_1: 'flip-2-hor-top-1',
FLIP_2_HOR_TOP_2: 'flip-2-hor-top-2',
FLIP_2_HOR_TOP_BCK: 'flip-2-hor-top-bck',
FLIP_2_HOR_TOP_FWD: 'flip-2-hor-top-fwd',
FLIP_2_VER_RIGHT_1: 'flip-2-ver-right-1',
FLIP_2_VER_RIGHT_2: 'flip-2-ver-right-2',
FLIP_2_VER_RIGHT_BCK: 'flip-2-ver-right-bck',
FLIP_2_VER_RIGHT_FWD: 'flip-2-ver-right-fwd',
FLIP_2_HOR_BOTTOM_1: 'flip-2-hor-bottom-1',
FLIP_2_HOR_BOTTOM_2: 'flip-2-hor-bottom-2',
FLIP_2_HOR_BOTTOM_BCK: 'flip-2-hor-bottom-bck',
FLIP_2_HOR_BOTTOM_FWD: 'flip-2-hor-bottom-fwd',
FLIP_2_VER_LEFT_1: 'flip-2-ver-left-1',
FLIP_2_VER_LEFT_2: 'flip-2-ver-left-2',
FLIP_2_VER_LEFT_BCK: 'flip-2-ver-left-bck',
FLIP_2_VER_LEFT_FWD: 'flip-2-ver-left-fwd'
} as const;
const ANIMATIONS_FLIP_SCALE = {
FLIP_SCALE_UP_HOR: 'flip-scale-up-hor',
FLIP_SCALE_DOWN_HOR: 'flip-scale-down-hor',
FLIP_SCALE_UP_VER: 'flip-scale-up-ver',
FLIP_SCALE_DOWN_VER: 'flip-scale-down-ver',
FLIP_SCALE_UP_DIAG_1: 'flip-scale-up-diag-1',
FLIP_SCALE_DOWN_DIAG_1: 'flip-scale-down-diag-1',
FLIP_SCALE_UP_DIAG_2: 'flip-scale-up-diag-2',
FLIP_SCALE_DOWN_DIAG_2: 'flip-scale-down-diag-2'
} as const;
const ANIMATIONS_FLIP_SCALE_2 = {
FLIP_SCALE_2_HOR_TOP: 'flip-scale-2-hor-top',
FLIP_SCALE_2_VER_RIGHT: 'flip-scale-2-ver-right',
FLIP_SCALE_2_HOR_BOTTOM: 'flip-scale-2-hor-bottom',
FLIP_SCALE_2_VER_LEFT: 'flip-scale-2-ver-left'
} as const;
const ANIMATIONS_SWING = {
SWING_TOP_FWD: 'swing-top-fwd',
SWING_TOP_BCK: 'swing-top-bck',
SWING_TOP_RIGHT_FWD: 'swing-top-right-fwd',
SWING_TOP_RIGHT_BCK: 'swing-top-right-bck',
SWING_RIGHT_FWD: 'swing-right-fwd',
SWING_RIGHT_BCK: 'swing-right-bck',
SWING_BOTTOM_RIGHT_FWD: 'swing-bottom-right-fwd',
SWING_BOTTOM_RIGHT_BCK: 'swing-bottom-right-bck',
SWING_BOTTOM_FWD: 'swing-bottom-fwd',
SWING_BOTTOM_BCK: 'swing-bottom-bck',
SWING_BOTTOM_LEFT_FWD: 'swing-bottom-left-fwd',
SWING_BOTTOM_LEFT_BCK: 'swing-bottom-left-bck',
SWING_LEFT_FWD: 'swing-left-fwd',
SWING_LEFT_BCK: 'swing-left-bck',
SWING_TOP_LEFT_FWD: 'swing-top-left-fwd',
SWING_TOP_LEFT_BCK: 'swing-top-left-bck'
} as const;
const ANIMATIONS_SLIDE = {
SLIDE_TOP: 'slide-top',
SLIDE_TR: 'slide-tr',
SLIDE_RIGHT: 'slide-right',
SLIDE_BR: 'slide-br',
SLIDE_BOTTOM: 'slide-bottom',
SLIDE_BL: 'slide-bl',
SLIDE_LEFT: 'slide-left',
SLIDE_TL: 'slide-tl'
} as const;
const ANIMATIONS_SLIDE_BCK = {
SLIDE_BCK_CENTER: 'slide-bck-center',
SLIDE_BCK_TOP: 'slide-bck-top',
SLIDE_BCK_TR: 'slide-bck-tr',
SLIDE_BCK_RIGHT: 'slide-bck-right',
SLIDE_BCK_BR: 'slide-bck-br',
SLIDE_BCK_BOTTOM: 'slide-bck-bottom',
SLIDE_BCK_BL: 'slide-bck-bl',
SLIDE_BCK_LEFT: 'slide-bck-left',
SLIDE_BCK_TL: 'slide-bck-tl'
} as const;
const ANIMATIONS_SLIDE_FWD = {
SLIDE_FWD_CENTER: 'slide-fwd-center',
SLIDE_FWD_TOP: 'slide-fwd-top',
SLIDE_FWD_TR: 'slide-fwd-tr',
SLIDE_FWD_RIGHT: 'slide-fwd-right',
SLIDE_FWD_BR: 'slide-fwd-br',
SLIDE_FWD_BOTTOM: 'slide-fwd-bottom',
SLIDE_FWD_BL: 'slide-fwd-bl',
SLIDE_FWD_LEFT: 'slide-fwd-left',
SLIDE_FWD_TL: 'slide-fwd-tl'
} as const;
const ANIMATIONS_SLIDE_ROTATE = {
SLIDE_ROTATE_HOR_TOP: 'slide-rotate-hor-top',
SLIDE_ROTATE_HOR_T_BCK: 'slide-rotate-hor-t-bck',
SLIDE_ROTATE_HOR_T_FWD: 'slide-rotate-hor-t-fwd',
SLIDE_ROTATE_VER_RIGHT: 'slide-rotate-ver-right',
SLIDE_ROTATE_VER_R_BCK: 'slide-rotate-ver-r-bck',
SLIDE_ROTATE_VER_R_FWD: 'slide-rotate-ver-r-fwd',
SLIDE_ROTATE_HOR_BOTTOM: 'slide-rotate-hor-bottom',
SLIDE_ROTATE_HOR_B_BCK: 'slide-rotate-hor-b-bck',
SLIDE_ROTATE_HOR_B_FWD: 'slide-rotate-hor-b-fwd',
SLIDE_ROTATE_VER_LEFT: 'slide-rotate-ver-left',
SLIDE_ROTATE_VER_L_BCK: 'slide-rotate-ver-l-bck',
SLIDE_ROTATE_VER_L_FWD: 'slide-rotate-ver-l-fwd'
} as const;
const ANIMATIONS_SHADOW_DROP = {
SHADOW_DROP_CENTER: 'shadow-drop-center',
SHADOW_DROP_TOP: 'shadow-drop-top',
SHADOW_DROP_RIGHT: 'shadow-drop-right',
SHADOW_DROP_BOTTOM: 'shadow-drop-bottom',
SHADOW_DROP_LEFT: 'shadow-drop-left',
SHADOW_DROP_LR: 'shadow-drop-lr',
SHADOW_DROP_TB: 'shadow-drop-tb',
SHADOW_DROP_TR: 'shadow-drop-tr',
SHADOW_DROP_BR: 'shadow-drop-br',
SHADOW_DROP_BL: 'shadow-drop-bl',
SHADOW_DROP_TL: 'shadow-drop-tl'
} as const;
const ANIMATIONS_SHADOW_DROP_2 = {
SHADOW_DROP_2_CENTER: 'shadow-drop-2-center',
SHADOW_DROP_2_TOP: 'shadow-drop-2-top',
SHADOW_DROP_2_RIGHT: 'shadow-drop-2-right',
SHADOW_DROP_2_BOTTOM: 'shadow-drop-2-bottom',
SHADOW_DROP_2_LEFT: 'shadow-drop-2-left',
SHADOW_DROP_2_LR: 'shadow-drop-2-lr',
SHADOW_DROP_2_TB: 'shadow-drop-2-tb',
SHADOW_DROP_2_TR: 'shadow-drop-2-tr',
SHADOW_DROP_2_BR: 'shadow-drop-2-br',
SHADOW_DROP_2_BL: 'shadow-drop-2-bl',
SHADOW_DROP_2_TL: 'shadow-drop-2-tl'
} as const;
const ANIMATIONS_SHADOW_POP = {
SHADOW_POP_TR: 'shadow-pop-tr',
SHADOW_POP_BR: 'shadow-pop-br',
SHADOW_POP_BL: 'shadow-pop-bl',
SHADOW_POP_TL: 'shadow-pop-tl'
} as const;
const ANIMATIONS_SHADOW_INSET = {
SHADOW_INSET_CENTER: 'shadow-inset-center',
SHADOW_INSET_TOP: 'shadow-inset-top',
SHADOW_INSET_RIGHT: 'shadow-inset-right',
SHADOW_INSET_BOTTOM: 'shadow-inset-bottom',
SHADOW_INSET_LEFT: 'shadow-inset-left',
SHADOW_INSET_LR: 'shadow-inset-lr',
SHADOW_INSET_TB: 'shadow-inset-tb',
SHADOW_INSET_TR: 'shadow-inset-tr',
SHADOW_INSET_BR: 'shadow-inset-br',
SHADOW_INSET_BL: 'shadow-inset-bl',
SHADOW_INSET_TL: 'shadow-inset-tl'
} as const;
const ANIMATIONS_SCALE_IN = {
SCALE_IN_CENTER: 'scale-in-center',
SCALE_IN_TOP: 'scale-in-top',
SCALE_IN_TR: 'scale-in-tr',
SCALE_IN_RIGHT: 'scale-in-right',
SCALE_IN_BR: 'scale-in-br',
SCALE_IN_BOTTOM: 'scale-in-bottom',
SCALE_IN_BL: 'scale-in-bl',
SCALE_IN_LEFT: 'scale-in-left',
SCALE_IN_TL: 'scale-in-tl',
SCALE_IN_HOR_CENTER: 'scale-in-hor-center',
SCALE_IN_HOR_LEFT: 'scale-in-hor-left',
SCALE_IN_HOR_RIGHT: 'scale-in-hor-right',
SCALE_IN_VER_CENTER: 'scale-in-ver-center',
SCALE_IN_VER_TOP: 'scale-in-ver-top',
SCALE_IN_VER_BOTTOM: 'scale-in-ver-bottom'
} as const;
const ANIMATIONS_ROTATE_IN = {
ROTATE_IN_CENTER: 'rotate-in-center',
ROTATE_IN_TOP: 'rotate-in-top',
ROTATE_IN_TR: 'rotate-in-tr',
ROTATE_IN_RIGHT: 'rotate-in-right',
ROTATE_IN_BR: 'rotate-in-br',
ROTATE_IN_BOTTOM: 'rotate-in-bottom',
ROTATE_IN_BL: 'rotate-in-bl',
ROTATE_IN_LEFT: 'rotate-in-left',
ROTATE_IN_TL: 'rotate-in-tl',
ROTATE_IN_HOR: 'rotate-in-hor',
ROTATE_IN_VER: 'rotate-in-ver',
ROTATE_IN_DIAG_1: 'rotate-in-diag-1',
ROTATE_IN_DIAG_2: 'rotate-in-diag-2'
} as const;
const ANIMATIONS_ROTATE_IN_2 = {
ROTATE_IN_2_CW: 'rotate-in-2-cw',
ROTATE_IN_2_CCW: 'rotate-in-2-ccw',
ROTATE_IN_2_FWD_CW: 'rotate-in-2-fwd-cw',
ROTATE_IN_2_FWD_CCW: 'rotate-in-2-fwd-ccw',
ROTATE_IN_2_BCK_CW: 'rotate-in-2-bck-cw',
ROTATE_IN_2_BCK_CCW: 'rotate-in-2-bck-ccw',
ROTATE_IN_2_TR_CW: 'rotate-in-2-tr-cw',
ROTATE_IN_2_TR_CCW: 'rotate-in-2-tr-ccw',
ROTATE_IN_2_BR_CW: 'rotate-in-2-br-cw',
ROTATE_IN_2_BR_CCW: 'rotate-in-2-br-ccw',
ROTATE_IN_2_BL_CW: 'rotate-in-2-bl-cw',
ROTATE_IN_2_BL_CCW: 'rotate-in-2-bl-ccw',
ROTATE_IN_2_TL_CW: 'rotate-in-2-tl-cw',
ROTATE_IN_2_TL_CCW: 'rotate-in-2-tl-ccw'
} as const;
const ANIMATIONS_SWIRL_IN = {
SWIRL_IN_FWD: 'swirl-in-fwd',
SWIRL_IN_BCK: 'swirl-in-bck',
SWIRL_IN_TOP_FWD: 'swirl-in-top-fwd',
SWIRL_IN_TOP_BCK: 'swirl-in-top-bck',
SWIRL_IN_TR_FWD: 'swirl-in-tr-fwd',
SWIRL_IN_TR_BCK: 'swirl-in-tr-bck',
SWIRL_IN_RIGHT_FWD: 'swirl-in-right-fwd',
SWIRL_IN_RIGHT_BCK: 'swirl-in-right-bck',
SWIRL_IN_BR_FWD: 'swirl-in-br-fwd',
SWIRL_IN_BR_BCK: 'swirl-in-br-bck',
SWIRL_IN_BOTTOM_FWD: 'swirl-in-bottom-fwd',
SWIRL_IN_BOTTOM_BCK: 'swirl-in-bottom-bck',
SWIRL_IN_BL_FWD: 'swirl-in-bl-fwd',
SWIRL_IN_BL_BCK: 'swirl-in-bl-bck',
SWIRL_IN_LEFT_FWD: 'swirl-in-left-fwd',
SWIRL_IN_LEFT_BCK: 'swirl-in-left-bck',
SWIRL_IN_TL_FWD: 'swirl-in-tl-fwd',
SWIRL_IN_TL_BCK: 'swirl-in-tl-bck'
} as const;
const ANIMATIONS_FLIP_IN = {
FLIP_IN_HOR_BOTTOM: 'flip-in-hor-bottom',
FLIP_IN_HOR_TOP: 'flip-in-hor-top',
FLIP_IN_VER_RIGHT: 'flip-in-ver-right',
FLIP_IN_VER_LEFT: 'flip-in-ver-left',
FLIP_IN_DIAG_1_TR: 'flip-in-diag-1-tr',
FLIP_IN_DIAG_1_BL: 'flip-in-diag-1-bl',
FLIP_IN_DIAG_2_TL: 'flip-in-diag-2-tl',
FLIP_IN_DIAG_2_BR: 'flip-in-diag-2-br'
} as const;
const ANIMATIONS_SLIT_IN = {
SLIT_IN_VERTICAL: 'slit-in-vertical',
SLIT_IN_HORIZONTAL: 'slit-in-horizontal',
SLIT_IN_DIAGONAL_1: 'slit-in-diagonal-1',
SLIT_IN_DIAGONAL_2: 'slit-in-diagonal-2'
} as const;
const ANIMATIONS_SLIDE_IN = {
SLIDE_IN_TOP: 'slide-in-top',
SLIDE_IN_TR: 'slide-in-tr',
SLIDE_IN_RIGHT: 'slide-in-right',
SLIDE_IN_BR: 'slide-in-br',
SLIDE_IN_BOTTOM: 'slide-in-bottom',
SLIDE_IN_BL: 'slide-in-bl',
SLIDE_IN_LEFT: 'slide-in-left',
SLIDE_IN_TL: 'slide-in-tl'
} as const;
const ANIMATIONS_SLIDE_IN_FWD = {
SLIDE_IN_FWD_CENTER: 'slide-in-fwd-center',
SLIDE_IN_FWD_TOP: 'slide-in-fwd-top',
SLIDE_IN_FWD_TR: 'slide-in-fwd-tr',
SLIDE_IN_FWD_RIGHT: 'slide-in-fwd-right',
SLIDE_IN_FWD_BR: 'slide-in-fwd-br',
SLIDE_IN_FWD_BOTTOM: 'slide-in-fwd-bottom',
SLIDE_IN_FWD_BL: 'slide-in-fwd-bl',
SLIDE_IN_FWD_LEFT: 'slide-in-fwd-left',
SLIDE_IN_FWD_TL: 'slide-in-fwd-tl'
} as const;
const ANIMATIONS_SLIDE_IN_BCK = {
SLIDE_IN_BCK_CENTER: 'slide-in-bck-center',
SLIDE_IN_BCK_TOP: 'slide-in-bck-top',
SLIDE_IN_BCK_TR: 'slide-in-bck-tr',
SLIDE_IN_BCK_RIGHT: 'slide-in-bck-right',
SLIDE_IN_BCK_BR: 'slide-in-bck-br',
SLIDE_IN_BCK_BOTTOM: 'slide-in-bck-bottom',
SLIDE_IN_BCK_BL: 'slide-in-bck-bl',
SLIDE_IN_BCK_LEFT: 'slide-in-bck-left',
SLIDE_IN_BCK_TL: 'slide-in-bck-tl'
} as const;
const ANIMATIONS_SLIDE_IN_BLURRED = {
SLIDE_IN_BLURRED_TOP: 'slide-in-blurred-top',
SLIDE_IN_BLURRED_TR: 'slide-in-blurred-tr',
SLIDE_IN_BLURRED_RIGHT: 'slide-in-blurred-right',
SLIDE_IN_BLURRED_BR: 'slide-in-blurred-br',
SLIDE_IN_BLURRED_BOTTOM: 'slide-in-blurred-bottom',
SLIDE_IN_BLURRED_BL: 'slide-in-blurred-bl',
SLIDE_IN_BLURRED_LEFT: 'slide-in-blurred-left',
SLIDE_IN_BLURRED_TL: 'slide-in-blurred-tl'
} as const;
const ANIMATIONS_SLIDE_IN_ELLIPTIC = {
SLIDE_IN_ELLIPTIC_TOP_FWD: 'slide-in-elliptic-top-fwd',
SLIDE_IN_ELLIPTIC_TOP_BCK: 'slide-in-elliptic-top-bck',
SLIDE_IN_ELLIPTIC_RIGHT_FWD: 'slide-in-elliptic-right-fwd',
SLIDE_IN_ELLIPTIC_RIGHT_BCK: 'slide-in-elliptic-right-bck',
SLIDE_IN_ELLIPTIC_BOTTOM_FWD: 'slide-in-elliptic-bottom-fwd',
SLIDE_IN_ELLIPTIC_BOTTOM_BCK: 'slide-in-elliptic-bottom-bck',
SLIDE_IN_ELLIPTIC_LEFT_FWD: 'slide-in-elliptic-left-fwd',
SLIDE_IN_ELLIPTIC_LEFT_BCK: 'slide-in-elliptic-left-bck'
} as const;
const ANIMATIONS_BOUNCE_IN = {
BOUNCE_IN_TOP: 'bounce-in-top',
BOUNCE_IN_RIGHT: 'bounce-in-right',
BOUNCE_IN_BOTTOM: 'bounce-in-bottom',
BOUNCE_IN_LEFT: 'bounce-in-left',
BOUNCE_IN_FWD: 'bounce-in-fwd',
BOUNCE_IN_BCK: 'bounce-in-bck'
} as const;
const ANIMATIONS_ROLL_IN = {
ROLL_IN_LEFT: 'roll-in-left',
ROLL_IN_TOP: 'roll-in-top',
ROLL_IN_RIGHT: 'roll-in-right',
ROLL_IN_BOTTOM: 'roll-in-bottom'
} as const;
const ANIMATIONS_ROLL_IN_BLURRED = {
ROLL_IN_BLURRED_LEFT: 'roll-in-blurred-left',
ROLL_IN_BLURRED_TOP: 'roll-in-blurred-top',
ROLL_IN_BLURRED_RIGHT: 'roll-in-blurred-right',
ROLL_IN_BLURRED_BOTTOM: 'roll-in-blurred-bottom'
} as const;
const ANIMATIONS_TILT_IN = {
TILT_IN_TOP_1: 'tilt-in-top-1',
TILT_IN_TOP_2: 'tilt-in-top-2',
TILT_IN_TR: 'tilt-in-tr',
TILT_IN_RIGHT_1: 'tilt-in-right-1',
TILT_IN_RIGHT_2: 'tilt-in-right-2',
TILT_IN_BR: 'tilt-in-br',
TILT_IN_BOTTOM_1: 'tilt-in-bottom-1',
TILT_IN_BOTTOM_2: 'tilt-in-bottom-2',
TILT_IN_BL: 'tilt-in-bl',
TILT_IN_LEFT_1: 'tilt-in-left-1',
TILT_IN_LEFT_2: 'tilt-in-left-2',
TILT_IN_TL: 'tilt-in-tl'
} as const;
const ANIMATIONS_TILT_IN_FWD = {
TILT_IN_FWD_TR: 'tilt-in-fwd-tr',
TILT_IN_FWD_BR: 'tilt-in-fwd-br',
TILT_IN_FWD_BL: 'tilt-in-fwd-bl',
TILT_IN_FWD_TL: 'tilt-in-fwd-tl'
} as const;
const ANIMATIONS_SWING_IN = {
SWING_IN_TOP_FWD: 'swing-in-top-fwd',
SWING_IN_TOP_BCK: 'swing-in-top-bck',
SWING_IN_RIGHT_FWD: 'swing-in-right-fwd',
SWING_IN_RIGHT_BCK: 'swing-in-right-bck',
SWING_IN_BOTTOM_FWD: 'swing-in-bottom-fwd',
SWING_IN_BOTTOM_BCK: 'swing-in-bottom-bck',
SWING_IN_LEFT_FWD: 'swing-in-left-fwd',
SWING_IN_LEFT_BCK: 'swing-in-left-bck'
} as const;
const ANIMATIONS_FADE_IN = {
FADE_IN_FWD: 'fade-in-fwd',
FADE_IN_BCK: 'fade-in-bck',
FADE_IN_TOP: 'fade-in-top',
FADE_IN_TR: 'fade-in-tr',
FADE_IN_RIGHT: 'fade-in-right',
FADE_IN_BR: 'fade-in-br',
FADE_IN_BOTTOM: 'fade-in-bottom',
FADE_IN_BL: 'fade-in-bl',
FADE_IN_LEFT: 'fade-in-left',
FADE_IN_TL: 'fade-in-tl'
} as const;
const ANIMATIONS_PUFF_IN = {
PUFF_IN_CENTER: 'puff-in-center',
PUFF_IN_TOP: 'puff-in-top',
PUFF_IN_TR: 'puff-in-tr',
PUFF_IN_RIGHT: 'puff-in-right',
PUFF_IN_BR: 'puff-in-br',
PUFF_IN_BOTTOM: 'puff-in-bottom',
PUFF_IN_BL: 'puff-in-bl',
PUFF_IN_LEFT: 'puff-in-left',
PUFF_IN_TL: 'puff-in-tl',
PUFF_IN_HOR: 'puff-in-hor',
PUFF_IN_VER: 'puff-in-ver'
} as const;
const ANIMATIONS_FLICKER_IN = {
FLICKER_IN_1: 'flicker-in-1',
FLICKER_IN_2: 'flicker-in-2'
} as const;
const ANIMATIONS_TRACKING_IN = {
TRACKING_IN_EXPAND: 'tracking-in-expand',
TRACKING_IN_EXPAND_FWD: 'tracking-in-expand-fwd',
TRACKING_IN_EXPAND_FWD_TOP: 'tracking-in-expand-fwd-top',
TRACKING_IN_EXPAND_FWD_BOTTOM: 'tracking-in-expand-fwd-bottom',
TRACKING_IN_CONTRACT: 'tracking-in-contract',
TRACKING_IN_CONTRACT_BCK: 'tracking-in-contract-bck',
TRACKING_IN_CONTRACT_BCK_TOP: 'tracking-in-contract-bck-top',
TRACKING_IN_CONTRACT_BCK_BOTTOM: 'tracking-in-contract-bck-bottom'
} as const;
const ANIMATIONS_FOCUS_IN = {
TEXT_FOCUS_IN: 'text-focus-in',
FOCUS_IN_EXPAND: 'focus-in-expand',
FOCUS_IN_EXPAND_FWD: 'focus-in-expand-fwd',
FOCUS_IN_CONTRACT: 'focus-in-contract',
FOCUS_IN_CONTRACT_BCK: 'focus-in-contract-bck'
} as const;
const ANIMATIONS_TEXT_SHADOW_DROP = {
TEXT_SHADOW_DROP_CENTER: 'text-shadow-drop-center',
TEXT_SHADOW_DROP_TOP: 'text-shadow-drop-top',
TEXT_SHADOW_DROP_TR: 'text-shadow-drop-tr',
TEXT_SHADOW_DROP_RIGHT: 'text-shadow-drop-right',
TEXT_SHADOW_DROP_BR: 'text-shadow-drop-br',
TEXT_SHADOW_DROP_BOTTOM: 'text-shadow-drop-bottom',
TEXT_SHADOW_DROP_BL: 'text-shadow-drop-bl',
TEXT_SHADOW_DROP_LEFT: 'text-shadow-drop-left',
TEXT_SHADOW_DROP_TL: 'text-shadow-drop-tl'
} as const;
const ANIMATIONS_TEXT_SHADOW_POP = {
TEXT_SHADOW_POP_TOP: 'text-shadow-pop-top',
TEXT_SHADOW_POP_TR: 'text-shadow-pop-tr',
TEXT_SHADOW_POP_RIGHT: 'text-shadow-pop-right',
TEXT_SHADOW_POP_BR: 'text-shadow-pop-br',
TEXT_SHADOW_POP_BOTTOM: 'text-shadow-pop-bottom',
TEXT_SHADOW_POP_BL: 'text-shadow-pop-bl',
TEXT_SHADOW_POP_LEFT: 'text-shadow-pop-left',
TEXT_SHADOW_POP_TL: 'text-shadow-pop-tl'
} as const;
const ANIMATIONS_TEXT_POP_UP = {
TEXT_POP_UP_TOP: 'text-pop-up-top',
TEXT_POP_UP_TR: 'text-pop-up-tr',
TEXT_POP_UP_RIGHT: 'text-pop-up-right',
TEXT_POP_UP_BR: 'text-pop-up-br',
TEXT_POP_UP_BOTTOM: 'text-pop-up-bottom',
TEXT_POP_UP_BL: 'text-pop-up-bl',
TEXT_POP_UP_LEFT: 'text-pop-up-left',
TEXT_POP_UP_TL: 'text-pop-up-tl'
} as const;
const ANIMATIONS_VIBRATE = {
VIBRATE_1: 'vibrate-1',
VIBRATE_2: 'vibrate-2'
} as const;
const ANIMATIONS_SHAKE = {
SHAKE_HORIZONTAL: 'shake-horizontal',
SHAKE_VERTICAL: 'shake-vertical',
SHAKE_LR: 'shake-lr',
SHAKE_TOP: 'shake-top',
SHAKE_TR: 'shake-tr',
SHAKE_RIGHT: 'shake-right',
SHAKE_BR: 'shake-br',
SHAKE_BOTTOM: 'shake-bottom',
SHAKE_BL: 'shake-bl',
SHAKE_LEFT: 'shake-left',
SHAKE_TL: 'shake-tl'
} as const;
const ANIMATIONS_JELLO = {
JELLO_HORIZONTAL: 'jello-horizontal',
JELLO_VERTICAL: 'jello-vertical',
JELLO_DIAGONAL_1: 'jello-diagonal-1',
JELLO_DIAGONAL_2: 'jello-diagonal-2'
} as const;
const ANIMATIONS_WOBBLE = {
WOBBLE_HOR_BOTTOM: 'wobble-hor-bottom',
WOBBLE_HOR_TOP: 'wobble-hor-top',
WOBBLE_VER_LEFT: 'wobble-ver-left',
WOBBLE_VER_RIGHT: 'wobble-ver-right'
} as const;
const ANIMATIONS_BOUNCE = {
BOUNCE_TOP: 'bounce-top',
BOUNCE_BOTTOM: 'bounce-bottom',
BOUNCE_LEFT: 'bounce-left',
BOUNCE_RIGHT: 'bounce-right'
} as const;
const ANIMATIONS_PULSATE = {
PULSATE_BCK: 'pulsate-bck',
PULSATE_FWD: 'pulsate-fwd',
PING: 'ping'
} as const;
const ANIMATIONS_KEN_BURNS = {
KEN_BURNS_TOP: 'ken-burns-top',
KEN_BURNS_TOP_RIGHT: 'ken-burns-top-right',
KEN_BURNS_RIGHT: 'ken-burns-right',
KEN_BURNS_BOTTOM_RIGHT: 'ken-burns-bottom-right',
KEN_BURNS_BOTTOM: 'ken-burns-bottom',
KEN_BURNS_BOTTOM_LEFT: 'ken-burns-bottom-left',
KEN_BURNS_LEFT: 'ken-burns-left',
KEN_BURNS_TOP_LEFT: 'ken-burns-top-left'
} as const;
const ANIMATIONS_BG_PAN = {
BG_PAN_LEFT: 'bg-pan-left',
BG_PAN_RIGHT: 'bg-pan-right',
BG_PAN_TOP: 'bg-pan-top',
BG_PAN_BOTTOM: 'bg-pan-bottom',
BG_PAN_TR: 'bg-pan-tr',
BG_PAN_BR: 'bg-pan-br',
BG_PAN_BL: 'bg-pan-bl',
BG_PAN_TL: 'bg-pan-tl'
} as const;
export const ANIMATIONS = {
...ANIMATIONS_SCALE_UP,
...ANIMATIONS_SCALE_DOWN,
...ANIMATIONS_ROTATE,
...ANIMATIONS_ROTATE_SCALE,
...ANIMATIONS_ROTATE_90,
...ANIMATIONS_FLIP,
...ANIMATIONS_FLIP_2,
...ANIMATIONS_FLIP_SCALE,
...ANIMATIONS_FLIP_SCALE_2,
...ANIMATIONS_SWING,
...ANIMATIONS_SLIDE,
...ANIMATIONS_SLIDE_BCK,
...ANIMATIONS_SLIDE_FWD,
...ANIMATIONS_SLIDE_ROTATE,
...ANIMATIONS_SHADOW_DROP,
...ANIMATIONS_SHADOW_DROP_2,
...ANIMATIONS_SHADOW_POP,
...ANIMATIONS_SHADOW_INSET,
...ANIMATIONS_SCALE_IN,
...ANIMATIONS_ROTATE_IN,
...ANIMATIONS_ROTATE_IN_2,
...ANIMATIONS_SWIRL_IN,
...ANIMATIONS_FLIP_IN,
...ANIMATIONS_SLIT_IN,
...ANIMATIONS_SLIDE_IN,
...ANIMATIONS_SLIDE_IN_FWD,
...ANIMATIONS_SLIDE_IN_BCK,
...ANIMATIONS_SLIDE_IN_BLURRED,
...ANIMATIONS_SLIDE_IN_ELLIPTIC,
...ANIMATIONS_BOUNCE_IN,
...ANIMATIONS_ROLL_IN,
...ANIMATIONS_ROLL_IN_BLURRED,
...ANIMATIONS_TILT_IN,
...ANIMATIONS_TILT_IN_FWD,
...ANIMATIONS_SWING_IN,
...ANIMATIONS_FADE_IN,
...ANIMATIONS_PUFF_IN,
...ANIMATIONS_FLICKER_IN,
...ANIMATIONS_TRACKING_IN,
...ANIMATIONS_FOCUS_IN,
...ANIMATIONS_TEXT_SHADOW_DROP,
...ANIMATIONS_TEXT_SHADOW_POP,
...ANIMATIONS_TEXT_POP_UP,
...ANIMATIONS_VIBRATE,
...ANIMATIONS_SHAKE,
...ANIMATIONS_JELLO,
...ANIMATIONS_WOBBLE,
...ANIMATIONS_BOUNCE,
...ANIMATIONS_PULSATE,
...ANIMATIONS_KEN_BURNS,
...ANIMATIONS_BG_PAN
} as const;

169
src/components/animation/animations/animista/fade-in.ts
Wyświetl plik

@ -1,169 +0,0 @@
import { ANIMATIONS } from './common';
const FADE_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
fillMode: 'both'
};
const FADE_IN_FWD: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateZ(-80px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateZ(0)',
opacity: 1
}
];
const FADE_IN_BCK: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateZ(80px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateZ(0)',
opacity: 1
}
];
const FADE_IN_TOP: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateY(-50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateY(0)',
opacity: 1
}
];
const FADE_IN_TR: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(50px) translateY(-50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0) translateY(0)',
opacity: 1
}
];
const FADE_IN_RIGHT: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0)',
opacity: 1
}
];
const FADE_IN_BR: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(50px) translateY(50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0) translateY(0)',
opacity: 1
}
];
const FADE_IN_BOTTOM: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateY(50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateY(0)',
opacity: 1
}
];
const FADE_IN_BL: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(-50px) translateY(50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0) translateY(0)',
opacity: 1
}
];
const FADE_IN_LEFT: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(-50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0)',
opacity: 1
}
];
const FADE_IN_TL: Keyframe[] = [
{
offset: 0,
...FADE_IN_DEFAULT,
transform: 'translateX(-50px) translateY(-50px)',
opacity: 0
},
{
offset: 1,
...FADE_IN_DEFAULT,
transform: 'translateX(0) translateY(0)',
opacity: 1
}
];
export default {
[ANIMATIONS.FADE_IN_FWD]: FADE_IN_FWD,
[ANIMATIONS.FADE_IN_BCK]: FADE_IN_BCK,
[ANIMATIONS.FADE_IN_TOP]: FADE_IN_TOP,
[ANIMATIONS.FADE_IN_TR]: FADE_IN_TR,
[ANIMATIONS.FADE_IN_RIGHT]: FADE_IN_RIGHT,
[ANIMATIONS.FADE_IN_BR]: FADE_IN_BR,
[ANIMATIONS.FADE_IN_BOTTOM]: FADE_IN_BOTTOM,
[ANIMATIONS.FADE_IN_BL]: FADE_IN_BL,
[ANIMATIONS.FADE_IN_LEFT]: FADE_IN_LEFT,
[ANIMATIONS.FADE_IN_TL]: FADE_IN_TL
};

150
src/components/animation/animations/animista/flicker-in.ts
Wyświetl plik

@ -1,150 +0,0 @@
import { ANIMATIONS } from './common';
const FLICKER_IN_DEFAULT: Keyframe = {
easing: 'linear',
fillMode: 'both'
};
const FLICKER_IN_1: Keyframe[] = [
{ offset: 0, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.1, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.101, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.102, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.2, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.201, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.206, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.3, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.301, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.305, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.306, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.45, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.451, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.5, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.55, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.551, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.57, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.571, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.6, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.601, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.65, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.651, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.75, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.751, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.77, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.771, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.85, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 0.851, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.86, ...FLICKER_IN_DEFAULT, opacity: 0 },
{ offset: 0.861, ...FLICKER_IN_DEFAULT, opacity: 1 },
{ offset: 1, ...FLICKER_IN_DEFAULT, opacity: 1 }
];
const FLICKER_IN_2: Keyframe[] = [
{ offset: 0, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'initial' },
{ offset: 0.1, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.101, ...FLICKER_IN_DEFAULT, opacity: 1, boxShadow: 'none' },
{ offset: 0.102, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.2, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.201, ...FLICKER_IN_DEFAULT, opacity: 1, boxShadow: '0 0 30px rgba(255, 255, 255, 0.25)' },
{ offset: 0.206, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.3, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.301,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)'
},
{
offset: 0.305,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)'
},
{ offset: 0.306, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.45, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.451,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)'
},
{
offset: 0.5,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)'
},
{
offset: 0.55,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)'
},
{ offset: 0.551, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.57, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.571,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3)'
},
{
offset: 0.6,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow: '0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3)'
},
{ offset: 0.601, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.65, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.651,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3), 0 0 100px rgba(255, 255, 255, 0.1)'
},
{
offset: 0.75,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3), 0 0 100px rgba(255, 255, 255, 0.1)'
},
{ offset: 0.751, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.77, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.771,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1)'
},
{
offset: 0.85,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1)'
},
{ offset: 0.851, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{ offset: 0.86, ...FLICKER_IN_DEFAULT, opacity: 0, boxShadow: 'none' },
{
offset: 0.861,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1)'
},
{
offset: 1,
...FLICKER_IN_DEFAULT,
opacity: 1,
boxShadow:
'0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1)'
}
];
export default {
[ANIMATIONS.FLICKER_IN_1]: FLICKER_IN_1,
[ANIMATIONS.FLICKER_IN_2]: FLICKER_IN_2
};

145
src/components/animation/animations/animista/flip-2.ts
Wyświetl plik

@ -1,145 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP_2_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
fillMode: 'both'
};
const FLIP_2_HOR_TOP_1: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) rotateX(0)', transformOrigin: '50% 0%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateY(-100%) rotateX(-180deg)', transformOrigin: '50% 100%' }
];
const FLIP_2_HOR_TOP_2: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) rotateX(0)', transformOrigin: '50% 0%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateY(-100%) rotateX(180deg)', transformOrigin: '50% 100%' }
];
const FLIP_2_HOR_TOP_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0)', transformOrigin: '50% 0%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateY(-100%) translateZ(-260px) rotateX(180deg)',
transformOrigin: '50% 100%'
}
];
const FLIP_2_HOR_TOP_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0)', transformOrigin: '50% 0%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateY(-100%) translateZ(160px) rotateX(-180deg)',
transformOrigin: '50% 100%'
}
];
const FLIP_2_VER_RIGHT_1: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) rotateY(0)', transformOrigin: '100% 50%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateX(100%) rotateY(-180deg)', transformOrigin: '0% 50%' }
];
const FLIP_2_VER_RIGHT_2: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) rotateY(0)', transformOrigin: '100% 50%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateX(100%) rotateY(180deg)', transformOrigin: '0% 50%' }
];
const FLIP_2_VER_RIGHT_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: '100% 50%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateX(100%) translateZ(-260px) rotateY(180deg)',
transformOrigin: '0% 50%'
}
];
const FLIP_2_VER_RIGHT_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: '100% 50%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateX(100%) translateZ(160px) rotateY(-180deg)',
transformOrigin: '0% 50%'
}
];
const FLIP_2_HOR_BOTTOM_1: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) rotateX(0)', transformOrigin: '50% 100%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateY(100%) rotateX(180deg)', transformOrigin: '50% 0%' }
];
const FLIP_2_HOR_BOTTOM_2: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) rotateX(0)', transformOrigin: '50% 100%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateY(100%) rotateX(-180deg)', transformOrigin: '50% 0%' }
];
const FLIP_2_HOR_BOTTOM_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0)', transformOrigin: '50% 100%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateY(100%) translateZ(-260px) rotateX(-180deg)',
transformOrigin: '50% 0%'
}
];
const FLIP_2_HOR_BOTTOM_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0)', transformOrigin: '50% 100%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateY(100%) translateZ(160px) rotateX(180deg)',
transformOrigin: '50% 0%'
}
];
const FLIP_2_VER_LEFT_1: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) rotateY(0)', transformOrigin: '0% 50%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateX(-100%) rotateY(180deg)', transformOrigin: '100% 0%' }
];
const FLIP_2_VER_LEFT_2: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) rotateY(0)', transformOrigin: '0% 50%' },
{ offset: 1, ...FLIP_2_DEFAULT, transform: 'translateX(-100%) rotateY(-180deg)', transformOrigin: '100% 0%' }
];
const FLIP_2_VER_LEFT_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: '0% 50%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateX(-100%) translateZ(-260px) rotateY(-180deg)',
transformOrigin: '100% 0%'
}
];
const FLIP_2_VER_LEFT_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_2_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: '0% 50%' },
{
offset: 1,
...FLIP_2_DEFAULT,
transform: 'translateX(-100%) translateZ(160px) rotateY(180deg)',
transformOrigin: '100% 0%'
}
];
export default {
[ANIMATIONS.FLIP_2_HOR_TOP_1]: FLIP_2_HOR_TOP_1,
[ANIMATIONS.FLIP_2_HOR_TOP_2]: FLIP_2_HOR_TOP_2,
[ANIMATIONS.FLIP_2_HOR_TOP_BCK]: FLIP_2_HOR_TOP_BCK,
[ANIMATIONS.FLIP_2_HOR_TOP_FWD]: FLIP_2_HOR_TOP_FWD,
[ANIMATIONS.FLIP_2_VER_RIGHT_1]: FLIP_2_VER_RIGHT_1,
[ANIMATIONS.FLIP_2_VER_RIGHT_2]: FLIP_2_VER_RIGHT_2,
[ANIMATIONS.FLIP_2_VER_RIGHT_BCK]: FLIP_2_VER_RIGHT_BCK,
[ANIMATIONS.FLIP_2_VER_RIGHT_FWD]: FLIP_2_VER_RIGHT_FWD,
[ANIMATIONS.FLIP_2_HOR_BOTTOM_1]: FLIP_2_HOR_BOTTOM_1,
[ANIMATIONS.FLIP_2_HOR_BOTTOM_2]: FLIP_2_HOR_BOTTOM_2,
[ANIMATIONS.FLIP_2_HOR_BOTTOM_BCK]: FLIP_2_HOR_BOTTOM_BCK,
[ANIMATIONS.FLIP_2_HOR_BOTTOM_FWD]: FLIP_2_HOR_BOTTOM_FWD,
[ANIMATIONS.FLIP_2_VER_LEFT_1]: FLIP_2_VER_LEFT_1,
[ANIMATIONS.FLIP_2_VER_LEFT_2]: FLIP_2_VER_LEFT_2,
[ANIMATIONS.FLIP_2_VER_LEFT_BCK]: FLIP_2_VER_LEFT_BCK,
[ANIMATIONS.FLIP_2_VER_LEFT_FWD]: FLIP_2_VER_LEFT_FWD
};

58
src/components/animation/animations/animista/flip-in.ts
Wyświetl plik

@ -1,58 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const FLIP_IN_HOR_BOTTOM: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateX(80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateX(0)', opacity: 1 }
];
const FLIP_IN_HOR_TOP: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateX(-80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateX(0)', opacity: 1 }
];
const FLIP_IN_VER_RIGHT: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateY(-80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateY(0)', opacity: 1 }
];
const FLIP_IN_VER_LEFT: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateY(80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateY(0)', opacity: 1 }
];
const FLIP_IN_DIAG_1_TR: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, -80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 }
];
const FLIP_IN_DIAG_1_BL: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 }
];
const FLIP_IN_DIAG_2_TL: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, 80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 }
];
const FLIP_IN_DIAG_2_BR: Keyframe[] = [
{ offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, -80deg)', opacity: 0 },
{ offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 }
];
export default {
[ANIMATIONS.FLIP_IN_HOR_BOTTOM]: FLIP_IN_HOR_BOTTOM,
[ANIMATIONS.FLIP_IN_HOR_TOP]: FLIP_IN_HOR_TOP,
[ANIMATIONS.FLIP_IN_VER_RIGHT]: FLIP_IN_VER_RIGHT,
[ANIMATIONS.FLIP_IN_VER_LEFT]: FLIP_IN_VER_LEFT,
[ANIMATIONS.FLIP_IN_DIAG_1_TR]: FLIP_IN_DIAG_1_TR,
[ANIMATIONS.FLIP_IN_DIAG_1_BL]: FLIP_IN_DIAG_1_BL,
[ANIMATIONS.FLIP_IN_DIAG_2_TL]: FLIP_IN_DIAG_2_TL,
[ANIMATIONS.FLIP_IN_DIAG_2_BR]: FLIP_IN_DIAG_2_BR
};

77
src/components/animation/animations/animista/flip-scale-2.ts
Wyświetl plik

@ -1,77 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP_SCALE_2_DEFAULT: Keyframe = {
easing: 'linear',
fillMode: 'both'
};
const FLIP_SCALE_2_HOR_TOP: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(0) rotateX(0) scale(1)', transformOrigin: '50% 0%' },
{
offset: 0.5,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateY(-50%) rotateX(-90deg) scale(2)',
transformOrigin: '50% 50%'
},
{
offset: 1,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateY(-100%) rotateX(-180deg) scale(1)',
transformOrigin: '50% 100%'
}
];
const FLIP_SCALE_2_VER_RIGHT: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(0) rotateY(0) scale(1)', transformOrigin: '100% 50%' },
{
offset: 0.5,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateX(50%) rotateY(-90deg) scale(2)',
transformOrigin: '50% 50%'
},
{
offset: 1,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateX(100%) rotateY(-180deg) scale(1)',
transformOrigin: '0% 50%'
}
];
const FLIP_SCALE_2_HOR_BOTTOM: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(0) rotateX(0) scale(1)', transformOrigin: '50% 100%' },
{
offset: 0.5,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateY(50%) rotateX(90deg) scale(2)',
transformOrigin: '50% 50%'
},
{
offset: 1,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateY(100%) rotateX(180deg) scale(1)',
transformOrigin: '50% 0%'
}
];
const FLIP_SCALE_2_VER_LEFT: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(0) rotateY(0) scale(1)', transformOrigin: '0% 50%' },
{
offset: 0.5,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateX(-50%) rotateY(90deg) scale(2)',
transformOrigin: '50% 50%'
},
{
offset: 1,
...FLIP_SCALE_2_DEFAULT,
transform: 'translateX(-100%) rotateY(180deg) scale(1)',
transformOrigin: '100% 50%'
}
];
export default {
[ANIMATIONS.FLIP_SCALE_2_HOR_TOP]: FLIP_SCALE_2_HOR_TOP,
[ANIMATIONS.FLIP_SCALE_2_VER_RIGHT]: FLIP_SCALE_2_VER_RIGHT,
[ANIMATIONS.FLIP_SCALE_2_HOR_BOTTOM]: FLIP_SCALE_2_HOR_BOTTOM,
[ANIMATIONS.FLIP_SCALE_2_VER_LEFT]: FLIP_SCALE_2_VER_LEFT
};

65
src/components/animation/animations/animista/flip-scale.ts
Wyświetl plik

@ -1,65 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP_SCALE_DEFAULT: Keyframe = {
easing: 'linear',
fillMode: 'both'
};
const FLIP_SCALE_UP_HOR: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotateX(-90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(-180deg)' }
];
const FLIP_SCALE_DOWN_HOR: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotateX(90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(180deg)' }
];
const FLIP_SCALE_UP_VER: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotateY(90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(180deg)' }
];
const FLIP_SCALE_DOWN_VER: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotateY(-90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(-180deg)' }
];
const FLIP_SCALE_UP_DIAG_1: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotate3d(1, 1, 0, 90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 180deg)' }
];
const FLIP_SCALE_DOWN_DIAG_1: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotate3d(1, 1, 0, -90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -180deg)' }
];
const FLIP_SCALE_UP_DIAG_2: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotate3d(-1, 1, 0, 90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 180deg)' }
];
const FLIP_SCALE_DOWN_DIAG_2: Keyframe[] = [
{ offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotate3d(-1, 1, 0, -90deg)' },
{ offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, -180deg)' }
];
export default {
[ANIMATIONS.FLIP_SCALE_UP_HOR]: FLIP_SCALE_UP_HOR,
[ANIMATIONS.FLIP_SCALE_DOWN_HOR]: FLIP_SCALE_DOWN_HOR,
[ANIMATIONS.FLIP_SCALE_UP_VER]: FLIP_SCALE_UP_VER,
[ANIMATIONS.FLIP_SCALE_DOWN_VER]: FLIP_SCALE_DOWN_VER,
[ANIMATIONS.FLIP_SCALE_UP_DIAG_1]: FLIP_SCALE_UP_DIAG_1,
[ANIMATIONS.FLIP_SCALE_DOWN_DIAG_1]: FLIP_SCALE_DOWN_DIAG_1,
[ANIMATIONS.FLIP_SCALE_UP_DIAG_2]: FLIP_SCALE_UP_DIAG_2,
[ANIMATIONS.FLIP_SCALE_DOWN_DIAG_2]: FLIP_SCALE_DOWN_DIAG_2
};

105
src/components/animation/animations/animista/flip.ts
Wyświetl plik

@ -1,105 +0,0 @@
import { ANIMATIONS } from './common';
const FLIP_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
fillMode: 'both'
};
const FLIP_HORIZONTAL_BOTTOM: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotateX(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotateX(-180deg)' }
];
const FLIP_HORIZONTAL_TOP: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotateX(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotateX(180deg)' }
];
const FLIP_HORIZONTAL_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateX(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotateX(180deg)' }
];
const FLIP_HORIZONTAL_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateX(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotateX(-180deg)' }
];
const FLIP_VERTICAL_RIGHT: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotateY(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotateY(180deg)' }
];
const FLIP_VERTICAL_LEFT: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotateY(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotateY(-180deg)' }
];
const FLIP_VERTICAL_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateY(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotateY(-180deg)' }
];
const FLIP_VERTICAL_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateY(0)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotateY(180deg)' }
];
const FLIP_DIAGONAL_1_TR: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 180deg)' }
];
const FLIP_DIAGONAL_1_BL: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, -180deg)' }
];
const FLIP_DIAGONAL_1_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotate3d(1, 1, 0, -180deg)' }
];
const FLIP_DIAGONAL_1_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotate3d(1, 1, 0, 180deg)' }
];
const FLIP_DIAGONAL_2_BR: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 180deg)' }
];
const FLIP_DIAGONAL_2_TL: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, -180deg)' }
];
const FLIP_DIAGONAL_2_BCK: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotate3d(-1, 1, 0, -180deg)' }
];
const FLIP_DIAGONAL_2_FWD: Keyframe[] = [
{ offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotate3d(-1, 1, 0, 180deg)' }
];
export default {
[ANIMATIONS.FLIP_HORIZONTAL_BOTTOM]: FLIP_HORIZONTAL_BOTTOM,
[ANIMATIONS.FLIP_HORIZONTAL_TOP]: FLIP_HORIZONTAL_TOP,
[ANIMATIONS.FLIP_HORIZONTAL_BCK]: FLIP_HORIZONTAL_BCK,
[ANIMATIONS.FLIP_HORIZONTAL_FWD]: FLIP_HORIZONTAL_FWD,
[ANIMATIONS.FLIP_VERTICAL_RIGHT]: FLIP_VERTICAL_RIGHT,
[ANIMATIONS.FLIP_VERTICAL_LEFT]: FLIP_VERTICAL_LEFT,
[ANIMATIONS.FLIP_VERTICAL_BCK]: FLIP_VERTICAL_BCK,
[ANIMATIONS.FLIP_VERTICAL_FWD]: FLIP_VERTICAL_FWD,
[ANIMATIONS.FLIP_DIAGONAL_1_TR]: FLIP_DIAGONAL_1_TR,
[ANIMATIONS.FLIP_DIAGONAL_1_BL]: FLIP_DIAGONAL_1_BL,
[ANIMATIONS.FLIP_DIAGONAL_1_BCK]: FLIP_DIAGONAL_1_BCK,
[ANIMATIONS.FLIP_DIAGONAL_1_FWD]: FLIP_DIAGONAL_1_FWD,
[ANIMATIONS.FLIP_DIAGONAL_2_BR]: FLIP_DIAGONAL_2_BR,
[ANIMATIONS.FLIP_DIAGONAL_2_TL]: FLIP_DIAGONAL_2_TL,
[ANIMATIONS.FLIP_DIAGONAL_2_BCK]: FLIP_DIAGONAL_2_BCK,
[ANIMATIONS.FLIP_DIAGONAL_2_FWD]: FLIP_DIAGONAL_2_FWD
};

67
src/components/animation/animations/animista/focus-in.ts
Wyświetl plik

@ -1,67 +0,0 @@
import { ANIMATIONS } from './common';
const FOCUS_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const TEXT_FOCUS_IN: Keyframe[] = [
{ offset: 0, easing: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', filter: 'blur(12px)', opacity: 0 },
{ offset: 1, easing: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', filter: 'blur(0px)', opacity: 1 }
];
const FOCUS_IN_EXPAND: Keyframe[] = [
{ offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '-0.5em', filter: 'blur(12px)', opacity: 0 },
{ offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', filter: 'blur(0px)', opacity: 1 }
];
const FOCUS_IN_EXPAND_FWD: Keyframe[] = [
{
offset: 0,
...FOCUS_IN_DEFAULT,
letterSpacing: '-0.5em',
transform: 'translateZ(-800px)',
filter: 'blur(12px)',
opacity: 0
},
{
offset: 1,
...FOCUS_IN_DEFAULT,
letterSpacing: 'normal',
transform: 'translateZ(0)',
filter: 'blur(0px)',
opacity: 1
}
];
const FOCUS_IN_CONTRACT: Keyframe[] = [
{ offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '1em', filter: 'blur(12px)', opacity: 0 },
{ offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', filter: 'blur(0px)', opacity: 1 }
];
const FOCUS_IN_CONTRACT_BCK: Keyframe[] = [
{
offset: 0,
...FOCUS_IN_DEFAULT,
letterSpacing: '1em',
transform: 'translateZ(300px)',
filter: 'blur(12px)',
opacity: 0
},
{
offset: 1,
...FOCUS_IN_DEFAULT,
letterSpacing: 'normal',
transform: 'translateZ(12px)',
filter: 'blur(0px)',
opacity: 1
}
];
export default {
[ANIMATIONS.TEXT_FOCUS_IN]: TEXT_FOCUS_IN,
[ANIMATIONS.FOCUS_IN_EXPAND]: FOCUS_IN_EXPAND,
[ANIMATIONS.FOCUS_IN_EXPAND_FWD]: FOCUS_IN_EXPAND_FWD,
[ANIMATIONS.FOCUS_IN_CONTRACT]: FOCUS_IN_CONTRACT,
[ANIMATIONS.FOCUS_IN_CONTRACT_BCK]: FOCUS_IN_CONTRACT_BCK
};

9477
src/components/animation/animations/animista/index.ts
Wyświetl plik

Plik diff jest za duży Load Diff

52
src/components/animation/animations/animista/jello.ts
Wyświetl plik

@ -1,52 +0,0 @@
import { ANIMATIONS } from './common';
const JELLO_DEFAULT: Keyframe = {
fillMode: 'both'
};
const JELLO_HORIZONTAL: Keyframe[] = [
{ offset: 0, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' },
{ offset: 0.3, ...JELLO_DEFAULT, transform: 'scale3d(1.25, 0.75, 1)' },
{ offset: 0.4, ...JELLO_DEFAULT, transform: 'scale3d(0.75, 1.25, 1)' },
{ offset: 0.5, ...JELLO_DEFAULT, transform: 'scale3d(1.15, 0.85, 1)' },
{ offset: 0.65, ...JELLO_DEFAULT, transform: 'scale3d(0.95, 1.05, 1)' },
{ offset: 0.75, ...JELLO_DEFAULT, transform: 'scale3d(1.05, 0.95, 1)' },
{ offset: 1, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' }
];
const JELLO_VERTICAL: Keyframe[] = [
{ offset: 0, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' },
{ offset: 0.3, ...JELLO_DEFAULT, transform: 'scale3d(0.75, 1.25, 1)' },
{ offset: 0.4, ...JELLO_DEFAULT, transform: 'scale3d(1.25, 0.75, 1)' },
{ offset: 0.5, ...JELLO_DEFAULT, transform: 'scale3d(0.85, 1.15, 1)' },
{ offset: 0.65, ...JELLO_DEFAULT, transform: 'scale3d(1.05, 0.95, 1)' },
{ offset: 0.75, ...JELLO_DEFAULT, transform: 'scale3d(0.95, 1.05, 1)' },
{ offset: 1, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' }
];
const JELLO_DIAGONAL_1: Keyframe[] = [
{ offset: 0, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' },
{ offset: 0.3, ...JELLO_DEFAULT, transform: ' skew(25deg, 25deg)' },
{ offset: 0.4, ...JELLO_DEFAULT, transform: 'skew(-15deg, -15deg)' },
{ offset: 0.5, ...JELLO_DEFAULT, transform: 'skew(15deg, 15deg)' },
{ offset: 0.65, ...JELLO_DEFAULT, transform: 'skew(-5deg, -5deg)' },
{ offset: 0.75, ...JELLO_DEFAULT, transform: 'skew(5deg, 5deg)' },
{ offset: 1, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' }
];
const JELLO_DIAGONAL_2: Keyframe[] = [
{ offset: 0, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' },
{ offset: 0.3, ...JELLO_DEFAULT, transform: 'skew(-25deg, -25deg)' },
{ offset: 0.4, ...JELLO_DEFAULT, transform: 'skew(15deg, 15deg)' },
{ offset: 0.5, ...JELLO_DEFAULT, transform: 'skew(-15deg, -15deg)' },
{ offset: 0.65, ...JELLO_DEFAULT, transform: 'skew(5deg, 5deg)' },
{ offset: 0.75, ...JELLO_DEFAULT, transform: 'skew(-5deg, -5deg)' },
{ offset: 1, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' }
];
export default {
[ANIMATIONS.JELLO_HORIZONTAL]: JELLO_HORIZONTAL,
[ANIMATIONS.JELLO_VERTICAL]: JELLO_VERTICAL,
[ANIMATIONS.JELLO_DIAGONAL_1]: JELLO_DIAGONAL_1,
[ANIMATIONS.JELLO_DIAGONAL_2]: JELLO_DIAGONAL_2
};

57
src/components/animation/animations/animista/ken-burns.ts
Wyświetl plik

@ -1,57 +0,0 @@
import { ANIMATIONS } from './common';
const KEN_BURNS_DEFAULT: Keyframe = {
easing: 'ease-out',
fillMode: 'both'
};
const KEN_BURNS_TOP: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translateY(0)', transformOrigin: '50% 16%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateY(-15px)', transformOrigin: 'top' }
];
const KEN_BURNS_TOP_RIGHT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 16%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(20px, -15px)', transformOrigin: 'right top' }
];
const KEN_BURNS_RIGHT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 50%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateX(20px)', transformOrigin: 'right' }
];
const KEN_BURNS_BOTTOM_RIGHT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 84%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(20px, 15px)', transformOrigin: 'right bottom' }
];
const KEN_BURNS_BOTTOM: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translateY(0)', transformOrigin: '50% 84%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateY(15px)', transformOrigin: 'bottom' }
];
const KEN_BURNS_BOTTOM_LEFT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 84%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(-20px, 15px)', transformOrigin: 'left bottom' }
];
const KEN_BURNS_LEFT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 50%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateX(-20px)', transformOrigin: 'left' }
];
const KEN_BURNS_TOP_LEFT: Keyframe[] = [
{ offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 16%' },
{ offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(-20px, -15px)', transformOrigin: 'left top' }
];
export default {
[ANIMATIONS.KEN_BURNS_TOP]: KEN_BURNS_TOP,
[ANIMATIONS.KEN_BURNS_TOP_RIGHT]: KEN_BURNS_TOP_RIGHT,
[ANIMATIONS.KEN_BURNS_RIGHT]: KEN_BURNS_RIGHT,
[ANIMATIONS.KEN_BURNS_BOTTOM_RIGHT]: KEN_BURNS_BOTTOM_RIGHT,
[ANIMATIONS.KEN_BURNS_BOTTOM]: KEN_BURNS_BOTTOM,
[ANIMATIONS.KEN_BURNS_BOTTOM_LEFT]: KEN_BURNS_BOTTOM_LEFT,
[ANIMATIONS.KEN_BURNS_LEFT]: KEN_BURNS_LEFT,
[ANIMATIONS.KEN_BURNS_TOP_LEFT]: KEN_BURNS_TOP_LEFT
};

227
src/components/animation/animations/animista/puff-in.ts
Wyświetl plik

@ -1,227 +0,0 @@
import { ANIMATIONS } from './common';
const PUFF_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
fillMode: 'both'
};
const PUFF_IN_CENTER: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_TOP: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '50% 0%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '50% 0%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_TR: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '100% 0%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 0%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_RIGHT: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '100% 50%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_BR: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '100% 100%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 100%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_BOTTOM: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '50% 100%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '50% 100%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_BL: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '0% 100%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 100%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_LEFT: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '0% 50%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_TL: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scale(2)',
transformOrigin: '0% 0%',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 0%',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_HOR: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scaleX(2)',
transformOrigin: 'center center',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scaleX(1)',
transformOrigin: 'center center',
filter: 'blur(0)',
opacity: 1
}
];
const PUFF_IN_VER: Keyframe[] = [
{
offset: 0,
...PUFF_IN_DEFAULT,
transform: 'scaleY(2)',
transformOrigin: 'center center',
filter: 'blur(4px)',
opacity: 0
},
{
offset: 1,
...PUFF_IN_DEFAULT,
transform: 'scaleY(1)',
transformOrigin: 'center center',
filter: 'blur(0)',
opacity: 1
}
];
export default {
[ANIMATIONS.PUFF_IN_CENTER]: PUFF_IN_CENTER,
[ANIMATIONS.PUFF_IN_TOP]: PUFF_IN_TOP,
[ANIMATIONS.PUFF_IN_TR]: PUFF_IN_TR,
[ANIMATIONS.PUFF_IN_RIGHT]: PUFF_IN_RIGHT,
[ANIMATIONS.PUFF_IN_BR]: PUFF_IN_BR,
[ANIMATIONS.PUFF_IN_BOTTOM]: PUFF_IN_BOTTOM,
[ANIMATIONS.PUFF_IN_BL]: PUFF_IN_BL,
[ANIMATIONS.PUFF_IN_LEFT]: PUFF_IN_LEFT,
[ANIMATIONS.PUFF_IN_TL]: PUFF_IN_TL,
[ANIMATIONS.PUFF_IN_HOR]: PUFF_IN_HOR,
[ANIMATIONS.PUFF_IN_VER]: PUFF_IN_VER
};

30
src/components/animation/animations/animista/pulsate.ts
Wyświetl plik

@ -1,30 +0,0 @@
import { ANIMATIONS } from './common';
const PULSATE_DEFAULT: Keyframe = {
easing: 'ease-in-out',
fillMode: 'both'
};
const PULSATE_BCK: Keyframe[] = [
{ offset: 0, ...PULSATE_DEFAULT, transform: 'scale(1)' },
{ offset: 0.5, ...PULSATE_DEFAULT, transform: 'scale(0.9)' },
{ offset: 1, ...PULSATE_DEFAULT, transform: 'scale(1)' }
];
const PULSATE_FWD: Keyframe[] = [
{ offset: 0, ...PULSATE_DEFAULT, transform: 'scale(1)' },
{ offset: 0.5, ...PULSATE_DEFAULT, transform: 'scale(1.1)' },
{ offset: 1, ...PULSATE_DEFAULT, transform: 'scale(1)' }
];
const PING: Keyframe[] = [
{ offset: 0, ...PULSATE_DEFAULT, transform: 'scale(0.2)', opacity: 0.8 },
{ offset: 0.8, ...PULSATE_DEFAULT, transform: 'scale(1.2)', opacity: 0 },
{ offset: 1, ...PULSATE_DEFAULT, transform: 'scale(2.2)', opacity: 0 }
];
export default {
[ANIMATIONS.PULSATE_BCK]: PULSATE_BCK,
[ANIMATIONS.PULSATE_FWD]: PULSATE_FWD,
[ANIMATIONS.PING]: PING
};

81
src/components/animation/animations/animista/roll-in-blurred.ts
Wyświetl plik

@ -1,81 +0,0 @@
import { ANIMATIONS } from './common';
const ROLL_IN_BLURRED_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
fillMode: 'both'
};
const ROLL_IN_BLURRED_LEFT: Keyframe[] = [
{
offset: 0,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateX(-100vw) rotate(-540deg)',
filter: 'blur(50px)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateX(0) rotate(0deg)',
filter: 'blur(0)',
opacity: 1
}
];
const ROLL_IN_BLURRED_TOP: Keyframe[] = [
{
offset: 0,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateY(-100vh) rotate(-720deg)',
filter: 'blur(50px)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateY(0) rotate(0deg)',
filter: 'blur(0)',
opacity: 1
}
];
const ROLL_IN_BLURRED_RIGHT: Keyframe[] = [
{
offset: 0,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateX(100vw) rotate(720deg)',
filter: 'blur(50px)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateX(0) rotate(0deg)',
filter: 'blur(0)',
opacity: 1
}
];
const ROLL_IN_BLURRED_BOTTOM: Keyframe[] = [
{
offset: 0,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateY(800px) rotate(720deg)',
filter: 'blur(50px)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_BLURRED_DEFAULT,
transform: 'translateY(0) rotate(0deg)',
filter: 'blur(0)',
opacity: 1
}
];
export default {
[ANIMATIONS.ROLL_IN_BLURRED_LEFT]: ROLL_IN_BLURRED_LEFT,
[ANIMATIONS.ROLL_IN_BLURRED_TOP]: ROLL_IN_BLURRED_TOP,
[ANIMATIONS.ROLL_IN_BLURRED_RIGHT]: ROLL_IN_BLURRED_RIGHT,
[ANIMATIONS.ROLL_IN_BLURRED_BOTTOM]: ROLL_IN_BLURRED_BOTTOM
};

73
src/components/animation/animations/animista/roll-in.ts
Wyświetl plik

@ -1,73 +0,0 @@
import { ANIMATIONS } from './common';
const ROLL_IN_DEFAULT: Keyframe = {
easing: 'ease-out',
fillMode: 'both'
};
const ROLL_IN_LEFT: Keyframe[] = [
{
offset: 0,
...ROLL_IN_DEFAULT,
transform: 'translateX(-800px) rotate(-540deg)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_DEFAULT,
transform: 'translateX(0) rotate(0deg)',
opacity: 1
}
];
const ROLL_IN_TOP: Keyframe[] = [
{
offset: 0,
...ROLL_IN_DEFAULT,
transform: 'translateY(-800px) rotate(-540deg)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_DEFAULT,
transform: 'translateY(0) rotate(0deg)',
opacity: 1
}
];
const ROLL_IN_RIGHT: Keyframe[] = [
{
offset: 0,
...ROLL_IN_DEFAULT,
transform: 'translateX(800px) rotate(540deg)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_DEFAULT,
transform: 'translateX(0) rotate(0deg)',
opacity: 1
}
];
const ROLL_IN_BOTTOM: Keyframe[] = [
{
offset: 0,
...ROLL_IN_DEFAULT,
transform: 'translateY(800px) rotate(540deg)',
opacity: 0
},
{
offset: 1,
...ROLL_IN_DEFAULT,
transform: 'translateY(0) rotate(0deg)',
opacity: 1
}
];
export default {
[ANIMATIONS.ROLL_IN_LEFT]: ROLL_IN_LEFT,
[ANIMATIONS.ROLL_IN_TOP]: ROLL_IN_TOP,
[ANIMATIONS.ROLL_IN_RIGHT]: ROLL_IN_RIGHT,
[ANIMATIONS.ROLL_IN_BOTTOM]: ROLL_IN_BOTTOM
};

142
src/components/animation/animations/animista/rotate-90.ts
Wyświetl plik

@ -1,142 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_90_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const ROTATE_90_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)' }
];
const ROTATE_90_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)' }
];
const ROTATE_90_TOP_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: 'top' }
];
const ROTATE_90_TOP_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: 'top' }
];
const ROTATE_90_TR_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top right' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: 'top right' }
];
const ROTATE_90_TR_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top right' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: 'top right' }
];
const ROTATE_90_RIGHT_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'right' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: 'right' }
];
const ROTATE_90_RIGHT_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'right' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: 'right' }
];
const ROTATE_90_BR_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: '100% 100%' }
];
const ROTATE_90_BR_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: '100% 100%' }
];
const ROTATE_90_BOTTOM_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: 'bottom' }
];
const ROTATE_90_BOTTOM_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: 'bottom' }
];
const ROTATE_90_BL_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '0% 100%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: '0% 100%' }
];
const ROTATE_90_BL_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '0% 100%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: '0% 100%' }
];
const ROTATE_90_LEFT_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'left' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: 'left' }
];
const ROTATE_90_LEFT_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: 'left' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: 'left' }
];
const ROTATE_90_TL_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '0% 0%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(90deg)', transformOrigin: '0% 0%' }
];
const ROTATE_90_TL_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotate(0)', transformOrigin: '0% 0%' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotate(-90deg)', transformOrigin: '0% 0%' }
];
const ROTATE_90_HORIZONTAL_FWD: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotateX(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotateX(90deg)' }
];
const ROTATE_90_HORIZONTAL_BCK: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotateX(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotateX(-90deg)' }
];
const ROTATE_90_VERTICAL_FWD: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotateY(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotateY(90deg)' }
];
const ROTATE_90_VERTICAL_BCK: Keyframe[] = [
{ offset: 0, ...ROTATE_90_DEFAULT, transform: 'rotateY(0)' },
{ offset: 1, ...ROTATE_90_DEFAULT, transform: 'rotateY(-90deg)' }
];
export default {
[ANIMATIONS.ROTATE_90_CW]: ROTATE_90_CW,
[ANIMATIONS.ROTATE_90_CCW]: ROTATE_90_CCW,
[ANIMATIONS.ROTATE_90_TOP_CW]: ROTATE_90_TOP_CW,
[ANIMATIONS.ROTATE_90_TOP_CCW]: ROTATE_90_TOP_CCW,
[ANIMATIONS.ROTATE_90_TR_CW]: ROTATE_90_TR_CW,
[ANIMATIONS.ROTATE_90_TR_CCW]: ROTATE_90_TR_CCW,
[ANIMATIONS.ROTATE_90_RIGHT_CW]: ROTATE_90_RIGHT_CW,
[ANIMATIONS.ROTATE_90_RIGHT_CCW]: ROTATE_90_RIGHT_CCW,
[ANIMATIONS.ROTATE_90_BR_CW]: ROTATE_90_BR_CW,
[ANIMATIONS.ROTATE_90_BR_CCW]: ROTATE_90_BR_CCW,
[ANIMATIONS.ROTATE_90_BOTTOM_CW]: ROTATE_90_BOTTOM_CW,
[ANIMATIONS.ROTATE_90_BOTTOM_CCW]: ROTATE_90_BOTTOM_CCW,
[ANIMATIONS.ROTATE_90_BL_CW]: ROTATE_90_BL_CW,
[ANIMATIONS.ROTATE_90_BL_CCW]: ROTATE_90_BL_CCW,
[ANIMATIONS.ROTATE_90_LEFT_CW]: ROTATE_90_LEFT_CW,
[ANIMATIONS.ROTATE_90_LEFT_CCW]: ROTATE_90_LEFT_CCW,
[ANIMATIONS.ROTATE_90_TL_CW]: ROTATE_90_TL_CW,
[ANIMATIONS.ROTATE_90_TL_CCW]: ROTATE_90_TL_CCW,
[ANIMATIONS.ROTATE_90_HORIZONTAL_FWD]: ROTATE_90_HORIZONTAL_FWD,
[ANIMATIONS.ROTATE_90_HORIZONTAL_BCK]: ROTATE_90_HORIZONTAL_BCK,
[ANIMATIONS.ROTATE_90_VERTICAL_FWD]: ROTATE_90_VERTICAL_FWD,
[ANIMATIONS.ROTATE_90_VERTICAL_BCK]: ROTATE_90_VERTICAL_BCK
};

94
src/components/animation/animations/animista/rotate-in-2.ts
Wyświetl plik

@ -1,94 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_IN_2_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const ROTATE_IN_2_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_FWD_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(-200px) rotate(-45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_FWD_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(-200px) rotate(45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_BCK_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(200px) rotate(-45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_BCK_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(200px) rotate(45deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 }
];
const ROTATE_IN_2_TR_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '100% 0%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 0%', opacity: 1 }
];
const ROTATE_IN_2_TR_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '100% 0%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 0%', opacity: 1 }
];
const ROTATE_IN_2_BR_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '100% 100%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%', opacity: 1 }
];
const ROTATE_IN_2_BR_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '100% 100%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%', opacity: 1 }
];
const ROTATE_IN_2_BL_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '0 100%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 100%', opacity: 1 }
];
const ROTATE_IN_2_BL_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '0 100%', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 100%', opacity: 1 }
];
const ROTATE_IN_2_TL_CW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '0 0', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 0', opacity: 1 }
];
const ROTATE_IN_2_TL_CCW: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '0 0', opacity: 0 },
{ offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 0', opacity: 1 }
];
export default {
[ANIMATIONS.ROTATE_IN_2_CW]: ROTATE_IN_2_CW,
[ANIMATIONS.ROTATE_IN_2_CCW]: ROTATE_IN_2_CCW,
[ANIMATIONS.ROTATE_IN_2_FWD_CW]: ROTATE_IN_2_FWD_CW,
[ANIMATIONS.ROTATE_IN_2_FWD_CCW]: ROTATE_IN_2_FWD_CCW,
[ANIMATIONS.ROTATE_IN_2_BCK_CW]: ROTATE_IN_2_BCK_CW,
[ANIMATIONS.ROTATE_IN_2_BCK_CCW]: ROTATE_IN_2_BCK_CCW,
[ANIMATIONS.ROTATE_IN_2_TR_CW]: ROTATE_IN_2_TR_CW,
[ANIMATIONS.ROTATE_IN_2_TR_CCW]: ROTATE_IN_2_TR_CCW,
[ANIMATIONS.ROTATE_IN_2_BR_CW]: ROTATE_IN_2_BR_CW,
[ANIMATIONS.ROTATE_IN_2_BR_CCW]: ROTATE_IN_2_BR_CCW,
[ANIMATIONS.ROTATE_IN_2_BL_CW]: ROTATE_IN_2_BL_CW,
[ANIMATIONS.ROTATE_IN_2_BL_CCW]: ROTATE_IN_2_BL_CCW,
[ANIMATIONS.ROTATE_IN_2_TL_CW]: ROTATE_IN_2_TL_CW,
[ANIMATIONS.ROTATE_IN_2_TL_CCW]: ROTATE_IN_2_TL_CCW
};

88
src/components/animation/animations/animista/rotate-in.ts
Wyświetl plik

@ -1,88 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const ROTATE_IN_CENTER: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 }
];
const ROTATE_IN_TOP: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top', opacity: 1 }
];
const ROTATE_IN_TR: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top right', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top right', opacity: 1 }
];
const ROTATE_IN_RIGHT: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'right', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'right', opacity: 1 }
];
const ROTATE_IN_BR: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom right', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom right', opacity: 1 }
];
const ROTATE_IN_BOTTOM: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom', opacity: 1 }
];
const ROTATE_IN_BL: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom left', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom left', opacity: 1 }
];
const ROTATE_IN_LEFT: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'left', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'left', opacity: 1 }
];
const ROTATE_IN_TL: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top left', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top left', opacity: 1 }
];
const ROTATE_IN_HOR: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(360deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 }
];
const ROTATE_IN_VER: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 }
];
const ROTATE_IN_DIAG_1: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, -360deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 }
];
const ROTATE_IN_DIAG_2: Keyframe[] = [
{ offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, -360deg)', opacity: 0 },
{ offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', opacity: 1 }
];
export default {
[ANIMATIONS.ROTATE_IN_CENTER]: ROTATE_IN_CENTER,
[ANIMATIONS.ROTATE_IN_TOP]: ROTATE_IN_TOP,
[ANIMATIONS.ROTATE_IN_TR]: ROTATE_IN_TR,
[ANIMATIONS.ROTATE_IN_RIGHT]: ROTATE_IN_RIGHT,
[ANIMATIONS.ROTATE_IN_BR]: ROTATE_IN_BR,
[ANIMATIONS.ROTATE_IN_BOTTOM]: ROTATE_IN_BOTTOM,
[ANIMATIONS.ROTATE_IN_BL]: ROTATE_IN_BL,
[ANIMATIONS.ROTATE_IN_LEFT]: ROTATE_IN_LEFT,
[ANIMATIONS.ROTATE_IN_TL]: ROTATE_IN_TL,
[ANIMATIONS.ROTATE_IN_HOR]: ROTATE_IN_HOR,
[ANIMATIONS.ROTATE_IN_VER]: ROTATE_IN_VER,
[ANIMATIONS.ROTATE_IN_DIAG_1]: ROTATE_IN_DIAG_1,
[ANIMATIONS.ROTATE_IN_DIAG_2]: ROTATE_IN_DIAG_2
};

79
src/components/animation/animations/animista/rotate-scale.ts
Wyświetl plik

@ -1,79 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_SCALE_DEFAULT: Keyframe = {
easing: 'linear',
fillMode: 'both'
};
const ROTATE_SCALE_UP: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateZ(180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(360deg)' }
];
const ROTATE_SCALE_DOWN: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateZ(180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(360deg)' }
];
const ROTATE_SCALE_UP_HOR: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateX(-180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(-360deg)' }
];
const ROTATE_SCALE_DOWN_HOR: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateX(-180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(-360deg)' }
];
const ROTATE_SCALE_UP_VER: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateY(180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(360deg)' }
];
const ROTATE_SCALE_DOWN_VER: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateY(180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(360deg)' }
];
const ROTATE_SCALE_UP_DIAG_1: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotate3d(1, 1, 0, -180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -360deg)' }
];
const ROTATE_SCALE_DOWN_DIAG_1: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotate3d(1, 1, 0, -180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -360deg)' }
];
const ROTATE_SCALE_UP_DIAG_2: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotate3d(-1, 1, 0, 180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 360deg)' }
];
const ROTATE_SCALE_DOWN_DIAG_2: Keyframe[] = [
{ offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotate3d(-1, 1, 0, 180deg)' },
{ offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 360deg)' }
];
export default {
[ANIMATIONS.ROTATE_SCALE_UP]: ROTATE_SCALE_UP,
[ANIMATIONS.ROTATE_SCALE_DOWN]: ROTATE_SCALE_DOWN,
[ANIMATIONS.ROTATE_SCALE_UP_HOR]: ROTATE_SCALE_UP_HOR,
[ANIMATIONS.ROTATE_SCALE_DOWN_HOR]: ROTATE_SCALE_DOWN_HOR,
[ANIMATIONS.ROTATE_SCALE_UP_VER]: ROTATE_SCALE_UP_VER,
[ANIMATIONS.ROTATE_SCALE_DOWN_VER]: ROTATE_SCALE_DOWN_VER,
[ANIMATIONS.ROTATE_SCALE_UP_DIAG_1]: ROTATE_SCALE_UP_DIAG_1,
[ANIMATIONS.ROTATE_SCALE_DOWN_DIAG_1]: ROTATE_SCALE_DOWN_DIAG_1,
[ANIMATIONS.ROTATE_SCALE_UP_DIAG_2]: ROTATE_SCALE_UP_DIAG_2,
[ANIMATIONS.ROTATE_SCALE_DOWN_DIAG_2]: ROTATE_SCALE_DOWN_DIAG_2
};

328
src/components/animation/animations/animista/rotate.ts
Wyświetl plik

@ -1,328 +0,0 @@
import { ANIMATIONS } from './common';
const ROTATE_DEFAULT: Keyframe = {
easing: 'ease-in-out',
fillMode: 'both',
transformOrigin: 'center center'
};
const ROTATE_CENTER: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, transform: 'rotate(0)' },
{ offset: 1, ...ROTATE_DEFAULT, transform: 'rotate(360deg)' }
];
const ROTATE_TOP: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'top'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'top'
}
];
const ROTATE_TR: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'top right'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'top right'
}
];
const ROTATE_RIGHT: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'right'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'right'
}
];
const ROTATE_BR: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'bottom right'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'bottom right'
}
];
const ROTATE_BOTTOM: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'bottom'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'bottom'
}
];
const ROTATE_BL: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'bottom left'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'bottom left'
}
];
const ROTATE_LEFT: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'left'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'left'
}
];
const ROTATE_TL: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(0)',
transformOrigin: 'top left'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transform: 'rotate(360deg)',
transformOrigin: 'top left'
}
];
const ROTATE_HOR_CENTER: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateX(0)' },
{ offset: 1, ...ROTATE_DEFAULT, easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateX(-360deg)' }
];
const ROTATE_HOR_TOP: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateX(0)',
transformOrigin: 'top'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateX(-360deg)',
transformOrigin: 'top'
}
];
const ROTATE_HOR_BOTTOM: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateX(0)',
transformOrigin: 'bottom'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateX(360deg)',
transformOrigin: 'bottom'
}
];
const ROTATE_VERT_CENTER: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateY(0)' },
{ offset: 1, ...ROTATE_DEFAULT, easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateY(360deg)' }
];
const ROTATE_VERT_LEFT: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateY(0)',
transformOrigin: 'left'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateY(360deg)',
transformOrigin: 'left'
}
];
const ROTATE_VERT_RIGHT: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateY(0)',
transformOrigin: 'right'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
transform: 'rotateY(-360deg)',
transformOrigin: 'right'
}
];
const ROTATE_DIAGONAL_1: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, -180deg)' },
{ offset: 1, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, -360deg)' }
];
const ROTATE_DIAGONAL_2: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(-1, 1, 0, 0deg)' },
{ offset: 0.5, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(-1, 1, 0, 180deg)' },
{ offset: 1, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(-1, 1, 0, 360deg)' }
];
const ROTATE_DIAGONAL_TR: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '100% 0%' },
{
offset: 0.5,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(1, 1, 0, -180deg)',
transformOrigin: '100% 0%'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(1, 1, 0, -360deg)',
transformOrigin: '100% 0%'
}
];
const ROTATE_DIAGONAL_BR: Keyframe[] = [
{
offset: 0,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(-1, 1, 0, 0deg)',
transformOrigin: '100% 100%'
},
{
offset: 0.5,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(-1, 1, 0, -180deg)',
transformOrigin: '100% 100%'
},
{
offset: 1,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(-1, 1, 0, -360deg)',
transformOrigin: '100% 100%'
}
];
const ROTATE_DIAGONAL_BL: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '0% 100%' },
{
offset: 0.5,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(1, 1, 0, 180deg)',
transformOrigin: '0% 100%'
},
{ offset: 1, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(1, 1, 0, 360deg)', transformOrigin: '0% 100%' }
];
const ROTATE_DIAGONAL_TL: Keyframe[] = [
{ offset: 0, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '0% 0%' },
{
offset: 0.5,
...ROTATE_DEFAULT,
easing: 'linear',
transform: 'rotate3d(-1, 1, 0, 180deg)',
transformOrigin: '0% 0%'
},
{ offset: 1, ...ROTATE_DEFAULT, easing: 'linear', transform: 'rotate3d(-1, 1, 0, 360deg)', transformOrigin: '0% 0%' }
];
export default {
[ANIMATIONS.ROTATE_CENTER]: ROTATE_CENTER,
[ANIMATIONS.ROTATE_TOP]: ROTATE_TOP,
[ANIMATIONS.ROTATE_TR]: ROTATE_TR,
[ANIMATIONS.ROTATE_RIGHT]: ROTATE_RIGHT,
[ANIMATIONS.ROTATE_BR]: ROTATE_BR,
[ANIMATIONS.ROTATE_BOTTOM]: ROTATE_BOTTOM,
[ANIMATIONS.ROTATE_BL]: ROTATE_BL,
[ANIMATIONS.ROTATE_LEFT]: ROTATE_LEFT,
[ANIMATIONS.ROTATE_TL]: ROTATE_TL,
[ANIMATIONS.ROTATE_HOR_CENTER]: ROTATE_HOR_CENTER,
[ANIMATIONS.ROTATE_HOR_TOP]: ROTATE_HOR_TOP,
[ANIMATIONS.ROTATE_HOR_BOTTOM]: ROTATE_HOR_BOTTOM,
[ANIMATIONS.ROTATE_VERT_CENTER]: ROTATE_VERT_CENTER,
[ANIMATIONS.ROTATE_VERT_LEFT]: ROTATE_VERT_LEFT,
[ANIMATIONS.ROTATE_VERT_RIGHT]: ROTATE_VERT_RIGHT,
[ANIMATIONS.ROTATE_DIAGONAL_1]: ROTATE_DIAGONAL_1,
[ANIMATIONS.ROTATE_DIAGONAL_2]: ROTATE_DIAGONAL_2,
[ANIMATIONS.ROTATE_DIAGONAL_TR]: ROTATE_DIAGONAL_TR,
[ANIMATIONS.ROTATE_DIAGONAL_BR]: ROTATE_DIAGONAL_BR,
[ANIMATIONS.ROTATE_DIAGONAL_BL]: ROTATE_DIAGONAL_BL,
[ANIMATIONS.ROTATE_DIAGONAL_TL]: ROTATE_DIAGONAL_TL
};

100
src/components/animation/animations/animista/scale-down.ts
Wyświetl plik

@ -1,100 +0,0 @@
import { ANIMATIONS } from './common';
const SCALE_DOWN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const SCALE_DOWN_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)' }
];
const SCALE_DOWN_TOP: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 0%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 0%' }
];
const SCALE_DOWN_TR: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 0%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 0%' }
];
const SCALE_DOWN_RIGHT: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 50%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 50%' }
];
const SCALE_DOWN_BR: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 100%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 100%' }
];
const SCALE_DOWN_BOTTOM: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 100%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 100%' }
];
const SCALE_DOWN_BL: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 100%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 100%' }
];
const SCALE_DOWN_LEFT: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 50%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 50%' }
];
const SCALE_DOWN_TL: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 0%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 0%' }
];
const SCALE_DOWN_HOR_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)' }
];
const SCALE_DOWN_HOR_LEFT: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)', transformOrigin: '0% 0%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)', transformOrigin: '0% 0%' }
];
const SCALE_DOWN_HOR_RIGHT: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)', transformOrigin: '100% 100%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)', transformOrigin: '100% 100%' }
];
const SCALE_DOWN_VER_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)' }
];
const SCALE_DOWN_VER_TOP: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)', transformOrigin: '100% 0%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)', transformOrigin: '100% 0%' }
];
const SCALE_DOWN_VER_BOTTOM: Keyframe[] = [
{ offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)', transformOrigin: '0% 100%' },
{ offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)', transformOrigin: '0% 100%' }
];
export default {
[ANIMATIONS.SCALE_DOWN_CENTER]: SCALE_DOWN_CENTER,
[ANIMATIONS.SCALE_DOWN_TOP]: SCALE_DOWN_TOP,
[ANIMATIONS.SCALE_DOWN_TR]: SCALE_DOWN_TR,
[ANIMATIONS.SCALE_DOWN_RIGHT]: SCALE_DOWN_RIGHT,
[ANIMATIONS.SCALE_DOWN_BR]: SCALE_DOWN_BR,
[ANIMATIONS.SCALE_DOWN_BOTTOM]: SCALE_DOWN_BOTTOM,
[ANIMATIONS.SCALE_DOWN_BL]: SCALE_DOWN_BL,
[ANIMATIONS.SCALE_DOWN_LEFT]: SCALE_DOWN_LEFT,
[ANIMATIONS.SCALE_DOWN_TL]: SCALE_DOWN_TL,
[ANIMATIONS.SCALE_DOWN_HOR_CENTER]: SCALE_DOWN_HOR_CENTER,
[ANIMATIONS.SCALE_DOWN_HOR_LEFT]: SCALE_DOWN_HOR_LEFT,
[ANIMATIONS.SCALE_DOWN_HOR_RIGHT]: SCALE_DOWN_HOR_RIGHT,
[ANIMATIONS.SCALE_DOWN_VER_CENTER]: SCALE_DOWN_VER_CENTER,
[ANIMATIONS.SCALE_DOWN_VER_TOP]: SCALE_DOWN_VER_TOP,
[ANIMATIONS.SCALE_DOWN_VER_BOTTOM]: SCALE_DOWN_VER_BOTTOM
};

279
src/components/animation/animations/animista/scale-in.ts
Wyświetl plik

@ -1,279 +0,0 @@
import { ANIMATIONS } from './common';
const SCALE_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SCALE_IN_CENTER: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: 'center center',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: 'center center',
opacity: 1
}
];
const SCALE_IN_TOP: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '50% 0%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '50% 0%',
opacity: 1
}
];
const SCALE_IN_TR: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '100% 0%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 0%',
opacity: 1
}
];
const SCALE_IN_RIGHT: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '100% 50%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 50%',
opacity: 1
}
];
const SCALE_IN_BR: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '100% 100%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '100% 100%',
opacity: 1
}
];
const SCALE_IN_BOTTOM: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '50% 100%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '50% 100%',
opacity: 1
}
];
const SCALE_IN_BL: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '0% 100%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 100%',
opacity: 1
}
];
const SCALE_IN_LEFT: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '0% 50%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 50%',
opacity: 1
}
];
const SCALE_IN_TL: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scale(0)',
transformOrigin: '0% 0%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scale(1)',
transformOrigin: '0% 0%',
opacity: 1
}
];
const SCALE_IN_HOR_CENTER: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleX(0)',
transformOrigin: 'center center',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleX(1)',
transformOrigin: 'center center',
opacity: 1
}
];
const SCALE_IN_HOR_LEFT: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleX(0)',
transformOrigin: '0% 0%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleX(1)',
transformOrigin: '0% 0%',
opacity: 1
}
];
const SCALE_IN_HOR_RIGHT: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleX(0)',
transformOrigin: '100% 100%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleX(1)',
transformOrigin: '100% 100%',
opacity: 1
}
];
const SCALE_IN_VER_CENTER: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleY(0)',
transformOrigin: 'center center',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleY(1)',
transformOrigin: 'center center',
opacity: 1
}
];
const SCALE_IN_VER_TOP: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleY(0)',
transformOrigin: '100% 0%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleY(1)',
transformOrigin: '100% 0%',
opacity: 1
}
];
const SCALE_IN_VER_BOTTOM: Keyframe[] = [
{
offset: 0,
...SCALE_IN_DEFAULT,
transform: 'scaleY(0)',
transformOrigin: '0% 100%',
opacity: 1
},
{
offset: 1,
...SCALE_IN_DEFAULT,
transform: 'scaleY(1)',
transformOrigin: '0% 100%',
opacity: 1
}
];
export default {
[ANIMATIONS.SCALE_IN_CENTER]: SCALE_IN_CENTER,
[ANIMATIONS.SCALE_IN_TOP]: SCALE_IN_TOP,
[ANIMATIONS.SCALE_IN_TR]: SCALE_IN_TR,
[ANIMATIONS.SCALE_IN_RIGHT]: SCALE_IN_RIGHT,
[ANIMATIONS.SCALE_IN_BR]: SCALE_IN_BR,
[ANIMATIONS.SCALE_IN_BOTTOM]: SCALE_IN_BOTTOM,
[ANIMATIONS.SCALE_IN_BL]: SCALE_IN_BL,
[ANIMATIONS.SCALE_IN_LEFT]: SCALE_IN_LEFT,
[ANIMATIONS.SCALE_IN_TL]: SCALE_IN_TL,
[ANIMATIONS.SCALE_IN_HOR_CENTER]: SCALE_IN_HOR_CENTER,
[ANIMATIONS.SCALE_IN_HOR_LEFT]: SCALE_IN_HOR_LEFT,
[ANIMATIONS.SCALE_IN_HOR_RIGHT]: SCALE_IN_HOR_RIGHT,
[ANIMATIONS.SCALE_IN_VER_CENTER]: SCALE_IN_VER_CENTER,
[ANIMATIONS.SCALE_IN_VER_TOP]: SCALE_IN_VER_TOP,
[ANIMATIONS.SCALE_IN_VER_BOTTOM]: SCALE_IN_VER_BOTTOM
};

100
src/components/animation/animations/animista/scale-up.ts
Wyświetl plik

@ -1,100 +0,0 @@
import { ANIMATIONS } from './common';
const SCALE_UP_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
fillMode: 'both',
transformOrigin: 'center center'
};
const SCALE_UP_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)' }
];
const SCALE_UP_TOP: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 0%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 0%' }
];
const SCALE_UP_TR: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 0%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 0%' }
];
const SCALE_UP_RIGHT: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 50%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 50%' }
];
const SCALE_UP_BR: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 100%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 100%' }
];
const SCALE_UP_BOTTOM: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 100%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 100%' }
];
const SCALE_UP_BL: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 100%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 100%' }
];
const SCALE_UP_LEFT: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 50%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 50%' }
];
const SCALE_UP_TL: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 0%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 0%' }
];
const SCALE_UP_HOR_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)' }
];
const SCALE_UP_HOR_LEFT: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)', transformOrigin: '0% 0%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)', transformOrigin: '0% 0%' }
];
const SCALE_UP_HOR_RIGHT: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)', transformOrigin: '100% 100%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)', transformOrigin: '100% 100%' }
];
const SCALE_UP_VER_CENTER: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)' }
];
const SCALE_UP_VER_TOP: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)', transformOrigin: '100% 0%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)', transformOrigin: '100% 0%' }
];
const SCALE_UP_VER_BOTTOM: Keyframe[] = [
{ offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)', transformOrigin: '0% 100%' },
{ offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)', transformOrigin: '0% 100%' }
];
export default {
[ANIMATIONS.SCALE_UP_CENTER]: SCALE_UP_CENTER,
[ANIMATIONS.SCALE_UP_TOP]: SCALE_UP_TOP,
[ANIMATIONS.SCALE_UP_TR]: SCALE_UP_TR,
[ANIMATIONS.SCALE_UP_RIGHT]: SCALE_UP_RIGHT,
[ANIMATIONS.SCALE_UP_BR]: SCALE_UP_BR,
[ANIMATIONS.SCALE_UP_BOTTOM]: SCALE_UP_BOTTOM,
[ANIMATIONS.SCALE_UP_BL]: SCALE_UP_BL,
[ANIMATIONS.SCALE_UP_LEFT]: SCALE_UP_LEFT,
[ANIMATIONS.SCALE_UP_TL]: SCALE_UP_TL,
[ANIMATIONS.SCALE_UP_HOR_CENTER]: SCALE_UP_HOR_CENTER,
[ANIMATIONS.SCALE_UP_HOR_LEFT]: SCALE_UP_HOR_LEFT,
[ANIMATIONS.SCALE_UP_HOR_RIGHT]: SCALE_UP_HOR_RIGHT,
[ANIMATIONS.SCALE_UP_VER_CENTER]: SCALE_UP_VER_CENTER,
[ANIMATIONS.SCALE_UP_VER_TOP]: SCALE_UP_VER_TOP,
[ANIMATIONS.SCALE_UP_VER_BOTTOM]: SCALE_UP_VER_BOTTOM
};

175
src/components/animation/animations/animista/shadow-drop-2.ts
Wyświetl plik

@ -1,175 +0,0 @@
import { ANIMATIONS } from './common';
const SHADOW_DROP_2_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SHADOW_DROP_2_CENTER: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0)' },
{ offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 20px 0px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px)' }
];
const SHADOW_DROP_2_TOP: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateY(12px)'
}
];
const SHADOW_DROP_2_RIGHT: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '12px 0 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(-12px)'
}
];
const SHADOW_DROP_2_BOTTOM: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateY(-12px)'
}
];
const SHADOW_DROP_2_LEFT: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateX(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(12px)'
}
];
const SHADOW_DROP_2_LR: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px)'
}
];
const SHADOW_DROP_2_TB: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px)'
}
];
const SHADOW_DROP_2_TR: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '12px -12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(-12px) translateY(12px)'
}
];
const SHADOW_DROP_2_BR: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '12px 12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(-12px) translateY(-12px)'
}
];
const SHADOW_DROP_2_BL: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '-12px 12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(12px) translateY(-12px)'
}
];
const SHADOW_DROP_2_TL: Keyframe[] = [
{
offset: 0,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
transform: 'translateZ(0) translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_DROP_2_DEFAULT,
boxShadow: '-12px -12px 20px -12px rgba(0, 0, 0, 0.35)',
transform: 'translateZ(50px) translateX(12px) translateY(12px)'
}
];
export default {
[ANIMATIONS.SHADOW_DROP_2_CENTER]: SHADOW_DROP_2_CENTER,
[ANIMATIONS.SHADOW_DROP_2_TOP]: SHADOW_DROP_2_TOP,
[ANIMATIONS.SHADOW_DROP_2_RIGHT]: SHADOW_DROP_2_RIGHT,
[ANIMATIONS.SHADOW_DROP_2_BOTTOM]: SHADOW_DROP_2_BOTTOM,
[ANIMATIONS.SHADOW_DROP_2_LEFT]: SHADOW_DROP_2_LEFT,
[ANIMATIONS.SHADOW_DROP_2_LR]: SHADOW_DROP_2_LR,
[ANIMATIONS.SHADOW_DROP_2_TB]: SHADOW_DROP_2_TB,
[ANIMATIONS.SHADOW_DROP_2_TR]: SHADOW_DROP_2_TR,
[ANIMATIONS.SHADOW_DROP_2_BR]: SHADOW_DROP_2_BR,
[ANIMATIONS.SHADOW_DROP_2_BL]: SHADOW_DROP_2_BL,
[ANIMATIONS.SHADOW_DROP_2_TL]: SHADOW_DROP_2_TL
};

83
src/components/animation/animations/animista/shadow-drop.ts
Wyświetl plik

@ -1,83 +0,0 @@
import { ANIMATIONS } from './common';
const SHADOW_DROP_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SHADOW_DROP_CENTER: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 20px 0px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_TOP: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_RIGHT: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px 0 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_BOTTOM: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_LEFT: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_LR: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' },
{
offset: 1,
...SHADOW_DROP_DEFAULT,
boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35)'
}
];
const SHADOW_DROP_TB: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' },
{
offset: 1,
...SHADOW_DROP_DEFAULT,
boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35)'
}
];
const SHADOW_DROP_TR: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px -12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_BR: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px 12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_BL: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px 12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
const SHADOW_DROP_TL: Keyframe[] = [
{ offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px -12px 20px -12px rgba(0, 0, 0, 0.35)' }
];
export default {
[ANIMATIONS.SHADOW_DROP_CENTER]: SHADOW_DROP_CENTER,
[ANIMATIONS.SHADOW_DROP_TOP]: SHADOW_DROP_TOP,
[ANIMATIONS.SHADOW_DROP_RIGHT]: SHADOW_DROP_RIGHT,
[ANIMATIONS.SHADOW_DROP_BOTTOM]: SHADOW_DROP_BOTTOM,
[ANIMATIONS.SHADOW_DROP_LEFT]: SHADOW_DROP_LEFT,
[ANIMATIONS.SHADOW_DROP_LR]: SHADOW_DROP_LR,
[ANIMATIONS.SHADOW_DROP_TB]: SHADOW_DROP_TB,
[ANIMATIONS.SHADOW_DROP_TR]: SHADOW_DROP_TR,
[ANIMATIONS.SHADOW_DROP_BR]: SHADOW_DROP_BR,
[ANIMATIONS.SHADOW_DROP_BL]: SHADOW_DROP_BL,
[ANIMATIONS.SHADOW_DROP_TL]: SHADOW_DROP_TL
};

163
src/components/animation/animations/animista/shadow-inset.ts
Wyświetl plik

@ -1,163 +0,0 @@
import { ANIMATIONS } from './common';
const SHADOW_INSET_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SHADOW_INSET_CENTER: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 14px 0px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_TOP: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_RIGHT: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset -6px 0 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_BOTTOM: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 -6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_LEFT: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 6px 0 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_LR: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset -6px 0 14px -6px rgba(0, 0, 0, 0.5), inset 6px 0 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_TB: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 -6px 14px -6px rgba(0, 0, 0, 0.5), inset 0 6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_TR: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset -6px 6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_BR: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset -6px -6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_BL: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 6px -6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
const SHADOW_INSET_TL: Keyframe[] = [
{
offset: 0,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)'
},
{
offset: 1,
...SHADOW_INSET_DEFAULT,
boxShadow: 'inset 6px 6px 14px -6px rgba(0, 0, 0, 0.5)'
}
];
export default {
[ANIMATIONS.SHADOW_INSET_CENTER]: SHADOW_INSET_CENTER,
[ANIMATIONS.SHADOW_INSET_TOP]: SHADOW_INSET_TOP,
[ANIMATIONS.SHADOW_INSET_RIGHT]: SHADOW_INSET_RIGHT,
[ANIMATIONS.SHADOW_INSET_BOTTOM]: SHADOW_INSET_BOTTOM,
[ANIMATIONS.SHADOW_INSET_LEFT]: SHADOW_INSET_LEFT,
[ANIMATIONS.SHADOW_INSET_LR]: SHADOW_INSET_LR,
[ANIMATIONS.SHADOW_INSET_TB]: SHADOW_INSET_TB,
[ANIMATIONS.SHADOW_INSET_TR]: SHADOW_INSET_TR,
[ANIMATIONS.SHADOW_INSET_BR]: SHADOW_INSET_BR,
[ANIMATIONS.SHADOW_INSET_BL]: SHADOW_INSET_BL,
[ANIMATIONS.SHADOW_INSET_TL]: SHADOW_INSET_TL
};

77
src/components/animation/animations/animista/shadow-pop.ts
Wyświetl plik

@ -1,77 +0,0 @@
import { ANIMATIONS } from './common';
const SHADOW_POP_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
fillMode: 'both'
};
const SHADOW_POP_TR: Keyframe[] = [
{
offset: 0,
...SHADOW_POP_DEFAULT,
boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e',
transform: 'translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_POP_DEFAULT,
boxShadow:
'1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e',
transform: 'translateX(-8px) translateY(8px)'
}
];
const SHADOW_POP_BR: Keyframe[] = [
{
offset: 0,
...SHADOW_POP_DEFAULT,
boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e',
transform: 'translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_POP_DEFAULT,
boxShadow:
'1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e',
transform: 'translateX(-8px) translateY(-8px)'
}
];
const SHADOW_POP_BL: Keyframe[] = [
{
offset: 0,
...SHADOW_POP_DEFAULT,
boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e',
transform: 'translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_POP_DEFAULT,
boxShadow:
'-1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e',
transform: 'translateX(8px) translateY(-8px)'
}
];
const SHADOW_POP_TL: Keyframe[] = [
{
offset: 0,
...SHADOW_POP_DEFAULT,
boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e',
transform: 'translateX(0) translateY(0)'
},
{
offset: 1,
...SHADOW_POP_DEFAULT,
boxShadow:
'-1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e, -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e',
transform: 'translateX(8px) translateY(8px)'
}
];
export default {
[ANIMATIONS.SHADOW_POP_TR]: SHADOW_POP_TR,
[ANIMATIONS.SHADOW_POP_BR]: SHADOW_POP_BR,
[ANIMATIONS.SHADOW_POP_BL]: SHADOW_POP_BL,
[ANIMATIONS.SHADOW_POP_TL]: SHADOW_POP_TL
};

174
src/components/animation/animations/animista/shake.ts
Wyświetl plik

@ -1,174 +0,0 @@
import { ANIMATIONS } from './common';
const SHAKE_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
fillMode: 'both'
};
const SHAKE_HORIZONTAL: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'translateX(0)' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'translateX(-10px)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'translateX(10px)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'translateX(-10px)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'translateX(10px)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'translateX(-10px)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'translateX(10px)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'translateX(-10px)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'translateX(8px)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'translateX(-8px)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'translateX(0)' }
];
const SHAKE_VERTICAL: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'translateY(0)' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'translateY(-8px)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'translateY(8px)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'translateY(-8px)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'translateY(8px)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'translateY(-8px)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'translateY(8px)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'translateY(-8px)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'translateY(6.4px)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'translateY(-6.4px)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'translateY(0)' }
];
const SHAKE_LR: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 50%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(8deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-10deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(10deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-10deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(10deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-10deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(10deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-8deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(8deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 50%' }
];
const SHAKE_TOP: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 0' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 0' }
];
const SHAKE_TR: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 0' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 0' }
];
const SHAKE_RIGHT: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 50%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 50%' }
];
const SHAKE_BR: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 100%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '100% 100%' }
];
const SHAKE_BOTTOM: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 100%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '50% 100%' }
];
const SHAKE_BL: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 100%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 100%' }
];
const SHAKE_LEFT: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 50%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 50%' }
];
const SHAKE_TL: Keyframe[] = [
{ offset: 0, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 0%' },
{ offset: 0.1, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 0.2, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.3, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.4, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.5, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.6, ...SHAKE_DEFAULT, transform: 'rotate(-4deg)' },
{ offset: 0.7, ...SHAKE_DEFAULT, transform: 'rotate(4deg)' },
{ offset: 0.8, ...SHAKE_DEFAULT, transform: 'rotate(-2deg)' },
{ offset: 0.9, ...SHAKE_DEFAULT, transform: 'rotate(2deg)' },
{ offset: 1, ...SHAKE_DEFAULT, transform: 'rotate(0deg)', transformOrigin: '0% 0%' }
];
export default {
[ANIMATIONS.SHAKE_HORIZONTAL]: SHAKE_HORIZONTAL,
[ANIMATIONS.SHAKE_VERTICAL]: SHAKE_VERTICAL,
[ANIMATIONS.SHAKE_LR]: SHAKE_LR,
[ANIMATIONS.SHAKE_TOP]: SHAKE_TOP,
[ANIMATIONS.SHAKE_TR]: SHAKE_TR,
[ANIMATIONS.SHAKE_RIGHT]: SHAKE_RIGHT,
[ANIMATIONS.SHAKE_BR]: SHAKE_BR,
[ANIMATIONS.SHAKE_BOTTOM]: SHAKE_BOTTOM,
[ANIMATIONS.SHAKE_BL]: SHAKE_BL,
[ANIMATIONS.SHAKE_LEFT]: SHAKE_LEFT,
[ANIMATIONS.SHAKE_TL]: SHAKE_TL
};

63
src/components/animation/animations/animista/slide-bck.ts
Wyświetl plik

@ -1,63 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_BCK_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
fillMode: 'both'
};
const SLIDE_BCK_CENTER: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px)' }
];
const SLIDE_BCK_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px)' }
];
const SLIDE_BCK_TR: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px) translateX(200px)' }
];
const SLIDE_BCK_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateX(200px)' }
];
const SLIDE_BCK_BR: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px) translateX(200px)' }
];
const SLIDE_BCK_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px)' }
];
const SLIDE_BCK_BL: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px) translateX(-200px)' }
];
const SLIDE_BCK_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateX(-200px)' }
];
const SLIDE_BCK_TL: Keyframe[] = [
{ offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px) translateX(-200px)' }
];
export default {
[ANIMATIONS.SLIDE_BCK_CENTER]: SLIDE_BCK_CENTER,
[ANIMATIONS.SLIDE_BCK_TOP]: SLIDE_BCK_TOP,
[ANIMATIONS.SLIDE_BCK_TR]: SLIDE_BCK_TR,
[ANIMATIONS.SLIDE_BCK_RIGHT]: SLIDE_BCK_RIGHT,
[ANIMATIONS.SLIDE_BCK_BR]: SLIDE_BCK_BR,
[ANIMATIONS.SLIDE_BCK_BOTTOM]: SLIDE_BCK_BOTTOM,
[ANIMATIONS.SLIDE_BCK_BL]: SLIDE_BCK_BL,
[ANIMATIONS.SLIDE_BCK_LEFT]: SLIDE_BCK_LEFT,
[ANIMATIONS.SLIDE_BCK_TL]: SLIDE_BCK_TL
};

63
src/components/animation/animations/animista/slide-fwd.ts
Wyświetl plik

@ -1,63 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_FWD_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_FWD_CENTER: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px)' }
];
const SLIDE_FWD_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px)' }
];
const SLIDE_FWD_TR: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px) translateX(100px)' }
];
const SLIDE_FWD_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateX(100px)' }
];
const SLIDE_FWD_BR: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px) translateX(100px)' }
];
const SLIDE_FWD_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px)' }
];
const SLIDE_FWD_BL: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px) translateX(-100px)' }
];
const SLIDE_FWD_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateX(-100px)' }
];
const SLIDE_FWD_TL: Keyframe[] = [
{ offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px) translateX(-100px)' }
];
export default {
[ANIMATIONS.SLIDE_FWD_CENTER]: SLIDE_FWD_CENTER,
[ANIMATIONS.SLIDE_FWD_TOP]: SLIDE_FWD_TOP,
[ANIMATIONS.SLIDE_FWD_TR]: SLIDE_FWD_TR,
[ANIMATIONS.SLIDE_FWD_RIGHT]: SLIDE_FWD_RIGHT,
[ANIMATIONS.SLIDE_FWD_BR]: SLIDE_FWD_BR,
[ANIMATIONS.SLIDE_FWD_BOTTOM]: SLIDE_FWD_BOTTOM,
[ANIMATIONS.SLIDE_FWD_BL]: SLIDE_FWD_BL,
[ANIMATIONS.SLIDE_FWD_LEFT]: SLIDE_FWD_LEFT,
[ANIMATIONS.SLIDE_FWD_TL]: SLIDE_FWD_TL
};

83
src/components/animation/animations/animista/slide-in-bck.ts
Wyświetl plik

@ -1,83 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_BCK_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_IN_BCK_CENTER: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(600px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0)', opacity: 1 }
];
const SLIDE_IN_BCK_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(-300px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const SLIDE_IN_BCK_TR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BCK_DEFAULT,
transform: 'translateZ(700px) translateY(-300px) translateX(400px)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BCK_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateX(400px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BCK_BR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BCK_DEFAULT,
transform: 'translateZ(700px) translateY(300px) translateX(400px)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BCK_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(300px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const SLIDE_IN_BCK_BL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BCK_DEFAULT,
transform: 'translateZ(700px) translateY(300px) translateX(-400px)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BCK_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateX(-400px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BCK_TL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BCK_DEFAULT,
transform: 'translateZ(700px) translateY(-300px) translateX(-400px)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
export default {
[ANIMATIONS.SLIDE_IN_BCK_CENTER]: SLIDE_IN_BCK_CENTER,
[ANIMATIONS.SLIDE_IN_BCK_TOP]: SLIDE_IN_BCK_TOP,
[ANIMATIONS.SLIDE_IN_BCK_TR]: SLIDE_IN_BCK_TR,
[ANIMATIONS.SLIDE_IN_BCK_RIGHT]: SLIDE_IN_BCK_RIGHT,
[ANIMATIONS.SLIDE_IN_BCK_BR]: SLIDE_IN_BCK_BR,
[ANIMATIONS.SLIDE_IN_BCK_BOTTOM]: SLIDE_IN_BCK_BOTTOM,
[ANIMATIONS.SLIDE_IN_BCK_BL]: SLIDE_IN_BCK_BL,
[ANIMATIONS.SLIDE_IN_BCK_LEFT]: SLIDE_IN_BCK_LEFT,
[ANIMATIONS.SLIDE_IN_BCK_TL]: SLIDE_IN_BCK_TL
};

169
src/components/animation/animations/animista/slide-in-blurred.ts
Wyświetl plik

@ -1,169 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_BLURRED_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
fillMode: 'both'
};
const SLIDE_IN_BLURRED_TOP: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateY(-100vh) scaleY(2.5) scaleX(0.2)',
transformOrigin: '50% 0%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateY(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_TR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(100vw, -100vh) skew(-80deg, -10deg)',
transformOrigin: '0% 0%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(0, 0) skew(0deg, 0deg)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_RIGHT: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateX(100vw) scaleX(2.5) scaleY(0.2)',
transformOrigin: '0% 50%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateX(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_BR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(100vw, 100vh) skew(80deg, 10deg)',
transformOrigin: '0% 100%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(0, 0) skew(0deg, 0deg)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_BOTTOM: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateY(100vh) scaleY(2.5) scaleX(0.2)',
transformOrigin: '50% 100%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateY(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_BL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(-100vw, 100vh) skew(-80deg, -10deg)',
transformOrigin: '100% 100%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(0, 0) skew(0deg, 0deg)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_LEFT: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateX(-100vw) scaleX(2.5) scaleY(0.2)',
transformOrigin: '100% 50%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translateX(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
const SLIDE_IN_BLURRED_TL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(-100vw, -100vh) skew(80deg, 10deg)',
transformOrigin: '100% 0%',
filter: 'blur(40px)',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_BLURRED_DEFAULT,
transform: 'translate(0, 0) skew(0deg, 0deg)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];
export default {
[ANIMATIONS.SLIDE_IN_BLURRED_TOP]: SLIDE_IN_BLURRED_TOP,
[ANIMATIONS.SLIDE_IN_BLURRED_TR]: SLIDE_IN_BLURRED_TR,
[ANIMATIONS.SLIDE_IN_BLURRED_RIGHT]: SLIDE_IN_BLURRED_RIGHT,
[ANIMATIONS.SLIDE_IN_BLURRED_BR]: SLIDE_IN_BLURRED_BR,
[ANIMATIONS.SLIDE_IN_BLURRED_BOTTOM]: SLIDE_IN_BLURRED_BOTTOM,
[ANIMATIONS.SLIDE_IN_BLURRED_BL]: SLIDE_IN_BLURRED_BL,
[ANIMATIONS.SLIDE_IN_BLURRED_LEFT]: SLIDE_IN_BLURRED_LEFT,
[ANIMATIONS.SLIDE_IN_BLURRED_TL]: SLIDE_IN_BLURRED_TL
};

153
src/components/animation/animations/animista/slide-in-elliptic.ts
Wyświetl plik

@ -1,153 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_ELLIPTIC_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_IN_ELLIPTIC_TOP_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(-600px) rotateX(-30deg) scale(0)',
transformOrigin: '50% 100%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(0) rotateX(0) scale(1)',
transformOrigin: '50% 100vh',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_TOP_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(-600px) rotateX(30deg) scale(6.5)',
transformOrigin: '50% 200%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(0) rotateX(0) scale(1)',
transformOrigin: '50% -500px',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_RIGHT_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(800px) rotateY(-30deg) scale(0)',
transformOrigin: '100% 50%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(0) rotateY(0) scale(1)',
transformOrigin: '-100vw 50%',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_RIGHT_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(800px) rotateY(30deg) scale(6.5)',
transformOrigin: '-100% 50%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(0) rotateY(0) scale(1)',
transformOrigin: '600px 50%',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_BOTTOM_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(600px) rotateX(30deg) scale(0)',
transformOrigin: '50% 100%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(0) rotateX(0) scale(1)',
transformOrigin: '50% -100vh',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_BOTTOM_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(600px) rotateX(-30deg) scale(6.5)',
transformOrigin: '50% -100%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateY(0) rotateX(0) scale(1)',
transformOrigin: '50% 500px',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_LEFT_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(-800px) rotateY(30deg) scale(0)',
transformOrigin: '-100% 50%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(0) rotateY(0) scale(1)',
transformOrigin: '100vw 50%',
opacity: 1
}
];
const SLIDE_IN_ELLIPTIC_LEFT_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(-800px) rotateY(-30deg) scale(6.5)',
transformOrigin: '200% 50%',
opacity: 0
},
{
offset: 1,
...SLIDE_IN_ELLIPTIC_DEFAULT,
transform: 'translateX(0) rotateY(0) scale(1)',
transformOrigin: '-600px 50%',
opacity: 1
}
];
export default {
[ANIMATIONS.SLIDE_IN_ELLIPTIC_TOP_FWD]: SLIDE_IN_ELLIPTIC_TOP_FWD,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_TOP_BCK]: SLIDE_IN_ELLIPTIC_TOP_BCK,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_RIGHT_FWD]: SLIDE_IN_ELLIPTIC_RIGHT_FWD,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_RIGHT_BCK]: SLIDE_IN_ELLIPTIC_RIGHT_BCK,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_BOTTOM_FWD]: SLIDE_IN_ELLIPTIC_BOTTOM_FWD,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_BOTTOM_BCK]: SLIDE_IN_ELLIPTIC_BOTTOM_BCK,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_LEFT_FWD]: SLIDE_IN_ELLIPTIC_LEFT_FWD,
[ANIMATIONS.SLIDE_IN_ELLIPTIC_LEFT_BCK]: SLIDE_IN_ELLIPTIC_LEFT_BCK
};

83
src/components/animation/animations/animista/slide-in-fwd.ts
Wyświetl plik

@ -1,83 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_FWD_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_IN_FWD_CENTER: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0)', opacity: 1 }
];
const SLIDE_IN_FWD_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(-100vh)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const SLIDE_IN_FWD_TR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_FWD_DEFAULT,
transform: 'translateZ(-1400px) translateY(-100vh) translateX(100vw)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_FWD_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateX(100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_FWD_BR: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_FWD_DEFAULT,
transform: 'translateZ(-1400px) translateY(100vh) translateX(100vw)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_FWD_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(100vh)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const SLIDE_IN_FWD_BL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_FWD_DEFAULT,
transform: 'translateZ(-1400px) translateY(100vh) translateX(-100vw)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_FWD_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateX(-100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_FWD_TL: Keyframe[] = [
{
offset: 0,
...SLIDE_IN_FWD_DEFAULT,
transform: 'translateZ(-1400px) translateY(-100vh) translateX(-100vw)',
opacity: 0
},
{ offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 }
];
export default {
[ANIMATIONS.SLIDE_IN_FWD_CENTER]: SLIDE_IN_FWD_CENTER,
[ANIMATIONS.SLIDE_IN_FWD_TOP]: SLIDE_IN_FWD_TOP,
[ANIMATIONS.SLIDE_IN_FWD_TR]: SLIDE_IN_FWD_TR,
[ANIMATIONS.SLIDE_IN_FWD_RIGHT]: SLIDE_IN_FWD_RIGHT,
[ANIMATIONS.SLIDE_IN_FWD_BR]: SLIDE_IN_FWD_BR,
[ANIMATIONS.SLIDE_IN_FWD_BOTTOM]: SLIDE_IN_FWD_BOTTOM,
[ANIMATIONS.SLIDE_IN_FWD_BL]: SLIDE_IN_FWD_BL,
[ANIMATIONS.SLIDE_IN_FWD_LEFT]: SLIDE_IN_FWD_LEFT,
[ANIMATIONS.SLIDE_IN_FWD_TL]: SLIDE_IN_FWD_TL
};

57
src/components/animation/animations/animista/slide-in.ts
Wyświetl plik

@ -1,57 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_IN_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0)', opacity: 1 }
];
const SLIDE_IN_TR: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh) translateX(100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateX(100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateX(0)', opacity: 1 }
];
const SLIDE_IN_BR: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh) translateX(100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0)', opacity: 1 }
];
const SLIDE_IN_BL: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh) translateX(-100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 }
];
const SLIDE_IN_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateX(-100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateX(0)', opacity: 1 }
];
const SLIDE_IN_TL: Keyframe[] = [
{ offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh) translateX(-100vw)', opacity: 0 },
{ offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 }
];
export default {
[ANIMATIONS.SLIDE_IN_TOP]: SLIDE_IN_TOP,
[ANIMATIONS.SLIDE_IN_TR]: SLIDE_IN_TR,
[ANIMATIONS.SLIDE_IN_RIGHT]: SLIDE_IN_RIGHT,
[ANIMATIONS.SLIDE_IN_BR]: SLIDE_IN_BR,
[ANIMATIONS.SLIDE_IN_BOTTOM]: SLIDE_IN_BOTTOM,
[ANIMATIONS.SLIDE_IN_BL]: SLIDE_IN_BL,
[ANIMATIONS.SLIDE_IN_LEFT]: SLIDE_IN_LEFT,
[ANIMATIONS.SLIDE_IN_TL]: SLIDE_IN_TL
};

161
src/components/animation/animations/animista/slide-rotate.ts
Wyświetl plik

@ -1,161 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_ROTATE_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_ROTATE_HOR_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) rotateX(0deg)' },
{ offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(-150px) rotateX(-90deg)' }
];
const SLIDE_ROTATE_HOR_T_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(0) translateZ(0) rotateX(0deg)',
transformOrigin: 'top center'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(-150px) translateZ(-230px) rotateX(-90deg)',
transformOrigin: 'top center'
}
];
const SLIDE_ROTATE_HOR_T_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(0) translateZ(0) rotateX(0deg)',
transformOrigin: 'bottom center'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(-150px) translateZ(130px) rotateX(-90deg)',
transformOrigin: 'bottom center'
}
];
const SLIDE_ROTATE_VER_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) rotateY(0)' },
{ offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(150px) rotateY(-90deg)' }
];
const SLIDE_ROTATE_VER_R_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(0) translateZ(0) rotateY(0)',
transformOrigin: 'center right'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(150px) translateZ(-230px) rotateY(-90deg)',
transformOrigin: 'center right'
}
];
const SLIDE_ROTATE_VER_R_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(0) translateZ(0) rotateY(0)',
transformOrigin: 'center left'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(150px) translateZ(130px) rotateY(-90deg)',
transformOrigin: 'center left'
}
];
const SLIDE_ROTATE_HOR_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) rotateX(0deg)' },
{ offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(150px) rotateX(90deg)' }
];
const SLIDE_ROTATE_HOR_B_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(0) translateZ(0) rotateX(0deg)',
transformOrigin: 'bottom center'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(150px) translateZ(-230px) rotateX(90deg)',
transformOrigin: 'bottom center'
}
];
const SLIDE_ROTATE_HOR_B_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(0) translateZ(0) rotateX(0deg)',
transformOrigin: 'top center'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateY(150px) translateZ(130px) rotateX(90deg)',
transformOrigin: 'top center'
}
];
const SLIDE_ROTATE_VER_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) rotateY(0)' },
{ offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(-150px) rotateY(90deg)' }
];
const SLIDE_ROTATE_VER_L_BCK: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(0) translateZ(0) rotateY(0)',
transformOrigin: 'center left'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(-150px) translateZ(-230px) rotateY(90deg)',
transformOrigin: 'center left'
}
];
const SLIDE_ROTATE_VER_L_FWD: Keyframe[] = [
{
offset: 0,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(0) translateZ(0) rotateY(0)',
transformOrigin: 'center right'
},
{
offset: 1,
...SLIDE_ROTATE_DEFAULT,
transform: 'translateX(-150px) translateZ(130px) rotateY(90deg)',
transformOrigin: 'center right'
}
];
export default {
[ANIMATIONS.SLIDE_ROTATE_HOR_TOP]: SLIDE_ROTATE_HOR_TOP,
[ANIMATIONS.SLIDE_ROTATE_HOR_T_BCK]: SLIDE_ROTATE_HOR_T_BCK,
[ANIMATIONS.SLIDE_ROTATE_HOR_T_FWD]: SLIDE_ROTATE_HOR_T_FWD,
[ANIMATIONS.SLIDE_ROTATE_VER_RIGHT]: SLIDE_ROTATE_VER_RIGHT,
[ANIMATIONS.SLIDE_ROTATE_VER_R_BCK]: SLIDE_ROTATE_VER_R_BCK,
[ANIMATIONS.SLIDE_ROTATE_VER_R_FWD]: SLIDE_ROTATE_VER_R_FWD,
[ANIMATIONS.SLIDE_ROTATE_HOR_BOTTOM]: SLIDE_ROTATE_HOR_BOTTOM,
[ANIMATIONS.SLIDE_ROTATE_HOR_B_BCK]: SLIDE_ROTATE_HOR_B_BCK,
[ANIMATIONS.SLIDE_ROTATE_HOR_B_FWD]: SLIDE_ROTATE_HOR_B_FWD,
[ANIMATIONS.SLIDE_ROTATE_VER_LEFT]: SLIDE_ROTATE_VER_LEFT,
[ANIMATIONS.SLIDE_ROTATE_VER_L_BCK]: SLIDE_ROTATE_VER_L_BCK,
[ANIMATIONS.SLIDE_ROTATE_VER_L_FWD]: SLIDE_ROTATE_VER_L_FWD
};

57
src/components/animation/animations/animista/slide.ts
Wyświetl plik

@ -1,57 +0,0 @@
import { ANIMATIONS } from './common';
const SLIDE_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SLIDE_TOP: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px)' }
];
const SLIDE_TR: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px) translateX(100px)' }
];
const SLIDE_RIGHT: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateX(100px)' }
];
const SLIDE_BR: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px) translateX(100px)' }
];
const SLIDE_BOTTOM: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px)' }
];
const SLIDE_BL: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px) translateX(-100px)' }
];
const SLIDE_LEFT: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateX(-100px)' }
];
const SLIDE_TL: Keyframe[] = [
{ offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' },
{ offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px) translateX(-100px)' }
];
export default {
[ANIMATIONS.SLIDE_TOP]: SLIDE_TOP,
[ANIMATIONS.SLIDE_TR]: SLIDE_TR,
[ANIMATIONS.SLIDE_RIGHT]: SLIDE_RIGHT,
[ANIMATIONS.SLIDE_BR]: SLIDE_BR,
[ANIMATIONS.SLIDE_BOTTOM]: SLIDE_BOTTOM,
[ANIMATIONS.SLIDE_BL]: SLIDE_BL,
[ANIMATIONS.SLIDE_LEFT]: SLIDE_LEFT,
[ANIMATIONS.SLIDE_TL]: SLIDE_TL
};

74
src/components/animation/animations/animista/slit-in.ts
Wyświetl plik

@ -1,74 +0,0 @@
import { ANIMATIONS } from './common';
const SLIT_IN_DEFAULT: Keyframe = {
easing: 'ease-out',
fillMode: 'both',
transformOrigin: 'center center'
};
const SLIT_IN_VERTICAL: Keyframe[] = [
{ offset: 0, ...SLIT_IN_DEFAULT, transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0 },
{ offset: 0.54, ...SLIT_IN_DEFAULT, transform: 'translateZ(-160px) rotateY(87deg)', opacity: 1 },
{ offset: 1, ...SLIT_IN_DEFAULT, transform: 'translateZ(0) rotateY(0)', opacity: 1 }
];
const SLIT_IN_HORIZONTAL: Keyframe[] = [
{ offset: 0, ...SLIT_IN_DEFAULT, transform: 'translateZ(-800px) rotateX(90deg)', opacity: 0 },
{ offset: 0.54, ...SLIT_IN_DEFAULT, transform: 'translateZ(-160px) rotateX(87deg)', opacity: 1 },
{ offset: 1, ...SLIT_IN_DEFAULT, transform: 'translateZ(0) rotateX(0)', opacity: 1 }
];
const SLIT_IN_DIAGONAL_1: Keyframe[] = [
{
offset: 0,
...SLIT_IN_DEFAULT,
transform: 'translateZ(-800px) rotate3d(1, 1, 0, 90deg)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.54,
...SLIT_IN_DEFAULT,
transform: 'translateZ(-160px) rotate3d(1, 1, 0, 87deg)',
easing: 'ease-in-out',
opacity: 1
},
{
offset: 1,
...SLIT_IN_DEFAULT,
transform: 'translateZ(0) rotate3d(1, 1, 0, 0)',
easing: 'ease-out',
opacity: 1
}
];
const SLIT_IN_DIAGONAL_2: Keyframe[] = [
{
offset: 0,
...SLIT_IN_DEFAULT,
transform: 'translateZ(-800px) rotate3d(-1, 1, 0, -90deg)',
easing: 'ease-in',
opacity: 0
},
{
offset: 0.54,
...SLIT_IN_DEFAULT,
transform: 'translateZ(-160px) rotate3d(-1, 1, 0, -87deg)',
easing: 'ease-in-out',
opacity: 1
},
{
offset: 1,
...SLIT_IN_DEFAULT,
transform: 'translateZ(0) rotate3d(-1, 1, 0, 0)',
easing: 'ease-out',
opacity: 1
}
];
export default {
[ANIMATIONS.SLIT_IN_VERTICAL]: SLIT_IN_VERTICAL,
[ANIMATIONS.SLIT_IN_HORIZONTAL]: SLIT_IN_HORIZONTAL,
[ANIMATIONS.SLIT_IN_DIAGONAL_1]: SLIT_IN_DIAGONAL_1,
[ANIMATIONS.SLIT_IN_DIAGONAL_2]: SLIT_IN_DIAGONAL_2
};

153
src/components/animation/animations/animista/swing-in.ts
Wyświetl plik

@ -1,153 +0,0 @@
import { ANIMATIONS } from './common';
const SWING_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
fillMode: 'both'
};
const SWING_IN_TOP_FWD: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateX(-100deg)',
transformOrigin: 'top',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateX(0deg)',
transformOrigin: 'top',
opacity: 1
}
];
const SWING_IN_TOP_BCK: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateX(70deg)',
transformOrigin: 'top',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateX(0deg)',
transformOrigin: 'top',
opacity: 1
}
];
const SWING_IN_RIGHT_FWD: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateY(-100deg)',
transformOrigin: 'right',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateY(0)',
transformOrigin: 'right',
opacity: 1
}
];
const SWING_IN_RIGHT_BCK: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateY(70deg)',
transformOrigin: 'right',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateY(0)',
transformOrigin: 'right',
opacity: 1
}
];
const SWING_IN_BOTTOM_FWD: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateX(100deg)',
transformOrigin: 'bottom',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateX(0)',
transformOrigin: 'bottom',
opacity: 1
}
];
const SWING_IN_BOTTOM_BCK: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateX(-70deg)',
transformOrigin: 'bottom',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateX(0)',
transformOrigin: 'bottom',
opacity: 1
}
];
const SWING_IN_LEFT_FWD: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateY(100deg)',
transformOrigin: 'left',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateY(0)',
transformOrigin: 'left',
opacity: 1
}
];
const SWING_IN_LEFT_BCK: Keyframe[] = [
{
offset: 0,
...SWING_IN_DEFAULT,
transform: 'rotateY(-70deg)',
transformOrigin: 'left',
opacity: 0
},
{
offset: 1,
...SWING_IN_DEFAULT,
transform: 'rotateY(0)',
transformOrigin: 'left',
opacity: 1
}
];
export default {
[ANIMATIONS.SWING_IN_TOP_FWD]: SWING_IN_TOP_FWD,
[ANIMATIONS.SWING_IN_TOP_BCK]: SWING_IN_TOP_BCK,
[ANIMATIONS.SWING_IN_RIGHT_FWD]: SWING_IN_RIGHT_FWD,
[ANIMATIONS.SWING_IN_RIGHT_BCK]: SWING_IN_RIGHT_BCK,
[ANIMATIONS.SWING_IN_BOTTOM_FWD]: SWING_IN_BOTTOM_FWD,
[ANIMATIONS.SWING_IN_BOTTOM_BCK]: SWING_IN_BOTTOM_BCK,
[ANIMATIONS.SWING_IN_LEFT_FWD]: SWING_IN_LEFT_FWD,
[ANIMATIONS.SWING_IN_LEFT_BCK]: SWING_IN_LEFT_BCK
};

105
src/components/animation/animations/animista/swing.ts
Wyświetl plik

@ -1,105 +0,0 @@
import { ANIMATIONS } from './common';
const SWING_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const SWING_TOP_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateX(0)', transformOrigin: 'top' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateX(180deg)', transformOrigin: 'top' }
];
const SWING_TOP_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateX(0)', transformOrigin: 'top' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateX(-180deg)', transformOrigin: 'top' }
];
const SWING_TOP_RIGHT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '100% 0%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 180deg)', transformOrigin: '100% 0%' }
];
const SWING_TOP_RIGHT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '100% 0%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, -180deg)', transformOrigin: '100% 0%' }
];
const SWING_RIGHT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateY(0)', transformOrigin: 'right' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateY(180deg)', transformOrigin: 'right' }
];
const SWING_RIGHT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateY(0)', transformOrigin: 'right' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateY(-180deg)', transformOrigin: 'right' }
];
const SWING_BOTTOM_RIGHT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '100% 100%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 180deg)', transformOrigin: '100% 100%' }
];
const SWING_BOTTOM_RIGHT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '100% 100%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, -180deg)', transformOrigin: '100% 100%' }
];
const SWING_BOTTOM_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateX(0)', transformOrigin: 'bottom' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateX(-180deg)', transformOrigin: 'bottom' }
];
const SWING_BOTTOM_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateX(0)', transformOrigin: 'bottom' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateX(180deg)', transformOrigin: 'bottom' }
];
const SWING_BOTTOM_LEFT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '0% 100%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, -180deg)', transformOrigin: '0% 100%' }
];
const SWING_BOTTOM_LEFT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '0% 100%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(1, 1, 0, 180deg)', transformOrigin: '0% 100%' }
];
const SWING_LEFT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateY(0)', transformOrigin: 'left bottom' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateY(-180deg)', transformOrigin: 'left bottom' }
];
const SWING_LEFT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotateY(0)', transformOrigin: 'left bottom' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotateY(180deg)', transformOrigin: 'left bottom' }
];
const SWING_TOP_LEFT_FWD: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '0% 0%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, -180deg)', transformOrigin: '0% 0%' }
];
const SWING_TOP_LEFT_BCK: Keyframe[] = [
{ offset: 0, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '0% 0%' },
{ offset: 1, ...SWING_DEFAULT, transform: 'rotate3d(-1, 1, 0, 180deg)', transformOrigin: '0% 0%' }
];
export default {
[ANIMATIONS.SWING_TOP_FWD]: SWING_TOP_FWD,
[ANIMATIONS.SWING_TOP_BCK]: SWING_TOP_BCK,
[ANIMATIONS.SWING_TOP_RIGHT_FWD]: SWING_TOP_RIGHT_FWD,
[ANIMATIONS.SWING_TOP_RIGHT_BCK]: SWING_TOP_RIGHT_BCK,
[ANIMATIONS.SWING_RIGHT_FWD]: SWING_RIGHT_FWD,
[ANIMATIONS.SWING_RIGHT_BCK]: SWING_RIGHT_BCK,
[ANIMATIONS.SWING_BOTTOM_RIGHT_FWD]: SWING_BOTTOM_RIGHT_FWD,
[ANIMATIONS.SWING_BOTTOM_RIGHT_BCK]: SWING_BOTTOM_RIGHT_BCK,
[ANIMATIONS.SWING_BOTTOM_FWD]: SWING_BOTTOM_FWD,
[ANIMATIONS.SWING_BOTTOM_BCK]: SWING_BOTTOM_BCK,
[ANIMATIONS.SWING_BOTTOM_LEFT_FWD]: SWING_BOTTOM_LEFT_FWD,
[ANIMATIONS.SWING_BOTTOM_LEFT_BCK]: SWING_BOTTOM_LEFT_BCK,
[ANIMATIONS.SWING_LEFT_FWD]: SWING_LEFT_FWD,
[ANIMATIONS.SWING_LEFT_BCK]: SWING_LEFT_BCK,
[ANIMATIONS.SWING_TOP_LEFT_FWD]: SWING_TOP_LEFT_FWD,
[ANIMATIONS.SWING_TOP_LEFT_BCK]: SWING_TOP_LEFT_BCK
};

118
src/components/animation/animations/animista/swirl-in.ts
Wyświetl plik

@ -1,118 +0,0 @@
import { ANIMATIONS } from './common';
const SWIRL_IN_DEFAULT: Keyframe = {
easing: 'ease-out',
fillMode: 'both',
transformOrigin: 'center center'
};
const SWIRL_IN_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', opacity: 1 }
];
const SWIRL_IN_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', opacity: 1 }
];
const SWIRL_IN_TOP_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '50% 0', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '50% 0', opacity: 1 }
];
const SWIRL_IN_TOP_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '50% 0', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '50% 0', opacity: 1 }
];
const SWIRL_IN_TR_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '100% 0%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 0%', opacity: 1 }
];
const SWIRL_IN_TR_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '100% 0%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 0%', opacity: 1 }
];
const SWIRL_IN_RIGHT_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '100% 50%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 50%', opacity: 1 }
];
const SWIRL_IN_RIGHT_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '100% 50%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 50%', opacity: 1 }
];
const SWIRL_IN_BR_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '100% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 100%', opacity: 1 }
];
const SWIRL_IN_BR_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '100% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '100% 100%', opacity: 1 }
];
const SWIRL_IN_BOTTOM_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '50% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '50% 100%', opacity: 1 }
];
const SWIRL_IN_BOTTOM_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '50% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '50% 100%', opacity: 1 }
];
const SWIRL_IN_BL_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '0% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0% 100%', opacity: 1 }
];
const SWIRL_IN_BL_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '0% 100%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0% 100%', opacity: 1 }
];
const SWIRL_IN_LEFT_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '0 50%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0 50%', opacity: 1 }
];
const SWIRL_IN_LEFT_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '0 50%', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0 50%', opacity: 1 }
];
const SWIRL_IN_TL_FWD: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(-540deg) scale(0)', transformOrigin: '0 0', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0 0', opacity: 1 }
];
const SWIRL_IN_TL_BCK: Keyframe[] = [
{ offset: 0, ...SWIRL_IN_DEFAULT, transform: 'rotate(540deg) scale(5)', transformOrigin: '0 0', opacity: 0 },
{ offset: 1, ...SWIRL_IN_DEFAULT, transform: 'rotate(0) scale(1)', transformOrigin: '0 0', opacity: 1 }
];
export default {
[ANIMATIONS.SWIRL_IN_FWD]: SWIRL_IN_FWD,
[ANIMATIONS.SWIRL_IN_BCK]: SWIRL_IN_BCK,
[ANIMATIONS.SWIRL_IN_TOP_FWD]: SWIRL_IN_TOP_FWD,
[ANIMATIONS.SWIRL_IN_TOP_BCK]: SWIRL_IN_TOP_BCK,
[ANIMATIONS.SWIRL_IN_TR_FWD]: SWIRL_IN_TR_FWD,
[ANIMATIONS.SWIRL_IN_TR_BCK]: SWIRL_IN_TR_BCK,
[ANIMATIONS.SWIRL_IN_RIGHT_FWD]: SWIRL_IN_RIGHT_FWD,
[ANIMATIONS.SWIRL_IN_RIGHT_BCK]: SWIRL_IN_RIGHT_BCK,
[ANIMATIONS.SWIRL_IN_BR_FWD]: SWIRL_IN_BR_FWD,
[ANIMATIONS.SWIRL_IN_BR_BCK]: SWIRL_IN_BR_BCK,
[ANIMATIONS.SWIRL_IN_BOTTOM_FWD]: SWIRL_IN_BOTTOM_FWD,
[ANIMATIONS.SWIRL_IN_BOTTOM_BCK]: SWIRL_IN_BOTTOM_BCK,
[ANIMATIONS.SWIRL_IN_BL_FWD]: SWIRL_IN_BL_FWD,
[ANIMATIONS.SWIRL_IN_BL_BCK]: SWIRL_IN_BL_BCK,
[ANIMATIONS.SWIRL_IN_LEFT_FWD]: SWIRL_IN_LEFT_FWD,
[ANIMATIONS.SWIRL_IN_LEFT_BCK]: SWIRL_IN_LEFT_BCK,
[ANIMATIONS.SWIRL_IN_TL_FWD]: SWIRL_IN_TL_FWD,
[ANIMATIONS.SWIRL_IN_TL_BCK]: SWIRL_IN_TL_BCK
};

161
src/components/animation/animations/animista/text-pop-up.ts
Wyświetl plik

@ -1,161 +0,0 @@
import { ANIMATIONS } from './common';
const TEXT_POP_UP_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const TEXT_POP_UP_TOP: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(-50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_TR: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0) translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(-50px) translateX(50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_RIGHT: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateX(50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_BR: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0) translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(50px) translateX(50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_BOTTOM: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_BL: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0) translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(50px) translateX(-50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_LEFT: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateX(-50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
const TEXT_POP_UP_TL: Keyframe[] = [
{
offset: 0,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(0) translateX(0)',
transformOrigin: '50% 50%',
textShadow: 'none'
},
{
offset: 1,
...TEXT_POP_UP_DEFAULT,
transform: 'translateY(-50px) translateX(-50px)',
transformOrigin: '50% 50%',
textShadow:
'0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3)'
}
];
export default {
[ANIMATIONS.TEXT_POP_UP_TOP]: TEXT_POP_UP_TOP,
[ANIMATIONS.TEXT_POP_UP_TR]: TEXT_POP_UP_TR,
[ANIMATIONS.TEXT_POP_UP_RIGHT]: TEXT_POP_UP_RIGHT,
[ANIMATIONS.TEXT_POP_UP_BR]: TEXT_POP_UP_BR,
[ANIMATIONS.TEXT_POP_UP_BOTTOM]: TEXT_POP_UP_BOTTOM,
[ANIMATIONS.TEXT_POP_UP_BL]: TEXT_POP_UP_BL,
[ANIMATIONS.TEXT_POP_UP_LEFT]: TEXT_POP_UP_LEFT,
[ANIMATIONS.TEXT_POP_UP_TL]: TEXT_POP_UP_TL
};

62
src/components/animation/animations/animista/text-shadow-drop.ts
Wyświetl plik

@ -1,62 +0,0 @@
import { ANIMATIONS } from './common';
const TEXT_SHADOW_DROP_DEFAULT: Keyframe = {
fillMode: 'both'
};
const TEXT_SHADOW_DROP_CENTER: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_TOP: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 -6px 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_TR: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px -6px 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_RIGHT: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px 0 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_BR: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px 6px 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_BOTTOM: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 6px 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_BL: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px 6px 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_LEFT: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px 0 18px rgba(0, 0, 0, 0.35)' }
];
const TEXT_SHADOW_DROP_TL: Keyframe[] = [
{ offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' },
{ offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px -6px 18px rgba(0, 0, 0, 0.35)' }
];
export default {
[ANIMATIONS.TEXT_SHADOW_DROP_CENTER]: TEXT_SHADOW_DROP_CENTER,
[ANIMATIONS.TEXT_SHADOW_DROP_TOP]: TEXT_SHADOW_DROP_TOP,
[ANIMATIONS.TEXT_SHADOW_DROP_TR]: TEXT_SHADOW_DROP_TR,
[ANIMATIONS.TEXT_SHADOW_DROP_RIGHT]: TEXT_SHADOW_DROP_RIGHT,
[ANIMATIONS.TEXT_SHADOW_DROP_BR]: TEXT_SHADOW_DROP_BR,
[ANIMATIONS.TEXT_SHADOW_DROP_BOTTOM]: TEXT_SHADOW_DROP_BOTTOM,
[ANIMATIONS.TEXT_SHADOW_DROP_BL]: TEXT_SHADOW_DROP_BL,
[ANIMATIONS.TEXT_SHADOW_DROP_LEFT]: TEXT_SHADOW_DROP_LEFT,
[ANIMATIONS.TEXT_SHADOW_DROP_TL]: TEXT_SHADOW_DROP_TL
};

144
src/components/animation/animations/animista/text-shadow-pop.ts
Wyświetl plik

@ -1,144 +0,0 @@
import { ANIMATIONS } from './common';
const TEXT_SHADOW_POP_DEFAULT: Keyframe = {
fillMode: 'both'
};
const TEXT_SHADOW_POP_TOP: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateY(8px)',
textShadow:
'0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555, 0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555'
}
];
const TEXT_SHADOW_POP_TR: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0) translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(-8px) translateY(8px)',
textShadow:
'1px -1px #555555, 2px -2px #555555, 3px -3px #555555, 4px -4px #555555, 5px -5px #555555, 6px -6px #555555, 7px -7px #555555, 8px -8px #555555'
}
];
const TEXT_SHADOW_POP_RIGHT: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(-8px)',
textShadow:
'1px 0 #555555, 2px 0 #555555, 3px 0 #555555, 4px 0 #555555, 5px 0 #555555, 6px 0 #555555, 7px 0 #555555, 8px 0 #555555'
}
];
const TEXT_SHADOW_POP_BR: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0) translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(-8px) translateY(-8px)',
textShadow:
'1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 7px 7px #555555, 8px 8px #555555'
}
];
const TEXT_SHADOW_POP_BOTTOM: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateY(-8px)',
textShadow:
'0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555'
}
];
const TEXT_SHADOW_POP_BL: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0) translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(8px) translateY(-8px)',
textShadow:
'-1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555'
}
];
const TEXT_SHADOW_POP_LEFT: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(8px)',
textShadow:
'-1px 0 #555555, -2px 0 #555555, -3px 0 #555555, -4px 0 #555555, -5px 0 #555555, -6px 0 #555555, -7px 0 #555555, -8px 0 #555555'
}
];
const TEXT_SHADOW_POP_TL: Keyframe[] = [
{
offset: 0,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(0) translateY(0)',
textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555'
},
{
offset: 1,
...TEXT_SHADOW_POP_DEFAULT,
transform: 'translateX(8px) translateY(8px)',
textShadow:
'-1px -1px #555555, -2px -2px #555555, -3px -3px #555555, -4px -4px #555555, -5px -5px #555555, -6px -6px #555555, -7px -7px #555555, -8px -8px #555555'
}
];
export default {
[ANIMATIONS.TEXT_SHADOW_POP_TOP]: TEXT_SHADOW_POP_TOP,
[ANIMATIONS.TEXT_SHADOW_POP_TR]: TEXT_SHADOW_POP_TR,
[ANIMATIONS.TEXT_SHADOW_POP_RIGHT]: TEXT_SHADOW_POP_RIGHT,
[ANIMATIONS.TEXT_SHADOW_POP_BR]: TEXT_SHADOW_POP_BR,
[ANIMATIONS.TEXT_SHADOW_POP_BOTTOM]: TEXT_SHADOW_POP_BOTTOM,
[ANIMATIONS.TEXT_SHADOW_POP_BL]: TEXT_SHADOW_POP_BL,
[ANIMATIONS.TEXT_SHADOW_POP_LEFT]: TEXT_SHADOW_POP_LEFT,
[ANIMATIONS.TEXT_SHADOW_POP_TL]: TEXT_SHADOW_POP_TL
};

73
src/components/animation/animations/animista/tilt-in-fwd.ts
Wyświetl plik

@ -1,73 +0,0 @@
import { ANIMATIONS } from './common';
const TILT_IN_FWD_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const TILT_IN_FWD_TR: Keyframe[] = [
{
offset: 0,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_FWD_BR: Keyframe[] = [
{
offset: 0,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_FWD_BL: Keyframe[] = [
{
offset: 0,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_FWD_TL: Keyframe[] = [
{
offset: 0,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_FWD_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
export default {
[ANIMATIONS.TILT_IN_FWD_TR]: TILT_IN_FWD_TR,
[ANIMATIONS.TILT_IN_FWD_BR]: TILT_IN_FWD_BR,
[ANIMATIONS.TILT_IN_FWD_BL]: TILT_IN_FWD_BL,
[ANIMATIONS.TILT_IN_FWD_TL]: TILT_IN_FWD_TL
};

201
src/components/animation/animations/animista/tilt-in.ts
Wyświetl plik

@ -1,201 +0,0 @@
import { ANIMATIONS } from './common';
const TILT_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both'
};
const TILT_IN_TOP_1: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(30deg) translateY(-300px) skewY(-30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0deg) translateY(0) skewY(0deg)',
opacity: 1
}
];
const TILT_IN_TOP_2: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(-30deg) translateY(-300px) skewY(30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0deg) translateY(0) skewY(0deg)',
opacity: 1
}
];
const TILT_IN_TR: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(-35deg) rotateX(20deg) translate(250px, -250px) skew(-12deg, -15deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_RIGHT_1: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateX(-30deg) translateX(300px) skewX(30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateX(0deg) translateX(0) skewX(0deg)',
opacity: 1
}
];
const TILT_IN_RIGHT_2: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateX(30deg) translateX(300px) skewX(-30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateX(0deg) translateX(0) skewX(0deg)',
opacity: 1
}
];
const TILT_IN_BR: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_BOTTOM_1: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(30deg) translateY(300px) skewY(-30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0deg) translateY(0) skewY(0deg)',
opacity: 1
}
];
const TILT_IN_BOTTOM_2: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(-30deg) translateY(300px) skewY(30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0deg) translateY(0) skewY(0deg)',
opacity: 1
}
];
const TILT_IN_BL: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(35deg) rotateX(-20deg) translate(-250px, 250px) skew(-12deg, -15deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
const TILT_IN_LEFT_1: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateX(-30deg) translateX(-300px) skewX(-30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateX(0deg) translateX(0) skewX(0deg)',
opacity: 1
}
];
const TILT_IN_LEFT_2: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateX(30deg) translateX(-300px) skewX(30deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateX(0deg) translateX(0) skewX(0deg)',
opacity: 1
}
];
const TILT_IN_TL: Keyframe[] = [
{
offset: 0,
...TILT_IN_DEFAULT,
transform: 'rotateY(35deg) rotateX(20deg) translate(-250px, -250px) skew(12deg, 15deg)',
opacity: 0
},
{
offset: 1,
...TILT_IN_DEFAULT,
transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
opacity: 1
}
];
export default {
[ANIMATIONS.TILT_IN_TOP_1]: TILT_IN_TOP_1,
[ANIMATIONS.TILT_IN_TOP_2]: TILT_IN_TOP_2,
[ANIMATIONS.TILT_IN_TR]: TILT_IN_TR,
[ANIMATIONS.TILT_IN_RIGHT_1]: TILT_IN_RIGHT_1,
[ANIMATIONS.TILT_IN_RIGHT_2]: TILT_IN_RIGHT_2,
[ANIMATIONS.TILT_IN_BR]: TILT_IN_BR,
[ANIMATIONS.TILT_IN_BOTTOM_1]: TILT_IN_BOTTOM_1,
[ANIMATIONS.TILT_IN_BOTTOM_2]: TILT_IN_BOTTOM_2,
[ANIMATIONS.TILT_IN_BL]: TILT_IN_BL,
[ANIMATIONS.TILT_IN_LEFT_1]: TILT_IN_LEFT_1,
[ANIMATIONS.TILT_IN_LEFT_2]: TILT_IN_LEFT_2,
[ANIMATIONS.TILT_IN_TL]: TILT_IN_TL
};

89
src/components/animation/animations/animista/tracking-in.ts
Wyświetl plik

@ -1,89 +0,0 @@
import { ANIMATIONS } from './common';
const TRACKING_IN_DEFAULT: Keyframe = {
easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
fillMode: 'both'
};
const TRACKING_IN_EXPAND: Keyframe[] = [
{ offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', opacity: 0 },
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 1 }
];
const TRACKING_IN_EXPAND_FWD: Keyframe[] = [
{ offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', transform: 'translateZ(-700px)', opacity: 0 },
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0)', opacity: 1 }
];
const TRACKING_IN_EXPAND_FWD_TOP: Keyframe[] = [
{
offset: 0,
...TRACKING_IN_DEFAULT,
letterSpacing: '-0.5em',
transform: 'translateZ(-700px) translateY(-500px)',
opacity: 0
},
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const TRACKING_IN_EXPAND_FWD_BOTTOM: Keyframe[] = [
{
offset: 0,
...TRACKING_IN_DEFAULT,
letterSpacing: '-0.5em',
transform: 'translateZ(-700px) translateY(500px)',
opacity: 0
},
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const TRACKING_IN_CONTRACT: Keyframe[] = [
{ offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', opacity: 0 },
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 1 }
];
const TRACKING_IN_CONTRACT_BCK: Keyframe[] = [
{ offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', transform: 'translateZ(400px)', opacity: 0 },
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0)', opacity: 1 }
];
const TRACKING_IN_CONTRACT_BCK_TOP: Keyframe[] = [
{
offset: 0,
...TRACKING_IN_DEFAULT,
letterSpacing: '1em',
transform: 'translateZ(400px) translateY(-300px)',
opacity: 0
},
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
const TRACKING_IN_CONTRACT_BCK_BOTTOM: Keyframe[] = [
{
offset: 0,
...TRACKING_IN_DEFAULT,
letterSpacing: '1em',
transform: 'translateZ(400px) translateY(300px)',
opacity: 0
},
{ offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 },
{ offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 }
];
export default {
[ANIMATIONS.TRACKING_IN_EXPAND]: TRACKING_IN_EXPAND,
[ANIMATIONS.TRACKING_IN_EXPAND_FWD]: TRACKING_IN_EXPAND_FWD,
[ANIMATIONS.TRACKING_IN_EXPAND_FWD_TOP]: TRACKING_IN_EXPAND_FWD_TOP,
[ANIMATIONS.TRACKING_IN_EXPAND_FWD_BOTTOM]: TRACKING_IN_EXPAND_FWD_BOTTOM,
[ANIMATIONS.TRACKING_IN_CONTRACT]: TRACKING_IN_CONTRACT,
[ANIMATIONS.TRACKING_IN_CONTRACT_BCK]: TRACKING_IN_CONTRACT_BCK,
[ANIMATIONS.TRACKING_IN_CONTRACT_BCK_TOP]: TRACKING_IN_CONTRACT_BCK_TOP,
[ANIMATIONS.TRACKING_IN_CONTRACT_BCK_BOTTOM]: TRACKING_IN_CONTRACT_BCK_BOTTOM
};

34
src/components/animation/animations/animista/vibrate.ts
Wyświetl plik

@ -1,34 +0,0 @@
import { ANIMATIONS } from './common';
const VIBRATE_DEFAULT: Keyframe = {
easing: 'linear',
fillMode: 'both'
};
const VIBRATE_1: Keyframe[] = [
{ offset: 0, ...VIBRATE_DEFAULT, transform: 'translate(0)' },
{ offset: 0.2, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' },
{ offset: 0.4, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' },
{ offset: 0.6, ...VIBRATE_DEFAULT, transform: 'translate(2px, 2px)' },
{ offset: 0.8, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' },
{ offset: 1, ...VIBRATE_DEFAULT, transform: 'translate(0)' }
];
const VIBRATE_2: Keyframe[] = [
{ offset: 0, ...VIBRATE_DEFAULT, transform: 'translate(0)' },
{ offset: 0.1, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' },
{ offset: 0.2, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' },
{ offset: 0.3, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' },
{ offset: 0.4, ...VIBRATE_DEFAULT, transform: 'translate(2px, 2px)' },
{ offset: 0.5, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' },
{ offset: 0.6, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' },
{ offset: 0.7, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' },
{ offset: 0.8, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' },
{ offset: 0.9, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' },
{ offset: 1, ...VIBRATE_DEFAULT, transform: 'translate(0)' }
];
export default {
[ANIMATIONS.VIBRATE_1]: VIBRATE_1,
[ANIMATIONS.VIBRATE_2]: VIBRATE_2
};

52
src/components/animation/animations/animista/wobble.ts
Wyświetl plik

@ -1,52 +0,0 @@
import { ANIMATIONS } from './common';
const WOBBLE_DEFAULT: Keyframe = {
fillMode: 'both'
};
const WOBBLE_HOR_BOTTOM: Keyframe[] = [
{ offset: 0, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' },
{ offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateX(-30px) rotate(-6deg)' },
{ offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateX(15px) rotate(6deg)' },
{ offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateX(-15px) rotate(-3.6deg)' },
{ offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateX(9px) rotate(2.4deg)' },
{ offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateX(-6px) rotate(-1.2deg)' },
{ offset: 1, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' }
];
const WOBBLE_HOR_TOP: Keyframe[] = [
{ offset: 0, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' },
{ offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateX(-30px) rotate(6deg)' },
{ offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateX(15px) rotate(-6deg)' },
{ offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateX(-15px) rotate(3.6deg)' },
{ offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateX(9px) rotate(-2.4deg)' },
{ offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateX(-6px) rotate(1.2deg)' },
{ offset: 1, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' }
];
const WOBBLE_VER_LEFT: Keyframe[] = [
{ offset: 0, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' },
{ offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateY(-30px) rotate(-6deg)' },
{ offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateY(15px) rotate(6deg)' },
{ offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateY(-15px) rotate(-3.6deg)' },
{ offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateY(9px) rotate(2.4deg)' },
{ offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateY(-6px) rotate(-1.2deg)' },
{ offset: 1, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' }
];
const WOBBLE_VER_RIGHT: Keyframe[] = [
{ offset: 0, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' },
{ offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateY(-30px) rotate(6deg)' },
{ offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateY(15px) rotate(-6deg)' },
{ offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateY(-15px) rotate(3.6deg)' },
{ offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateY(9px) rotate(-2.4deg)' },
{ offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateY(-6px) rotate(1.2deg)' },
{ offset: 1, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' }
];
export default {
[ANIMATIONS.WOBBLE_HOR_BOTTOM]: WOBBLE_HOR_BOTTOM,
[ANIMATIONS.WOBBLE_HOR_TOP]: WOBBLE_HOR_TOP,
[ANIMATIONS.WOBBLE_VER_LEFT]: WOBBLE_VER_LEFT,
[ANIMATIONS.WOBBLE_VER_RIGHT]: WOBBLE_VER_RIGHT
};

20
src/components/animation/animations/common.ts
Wyświetl plik

@ -1,20 +0,0 @@
/**
* Animate.css Animations
*/
import { ANIMATIONS as ANIMATIONS_ANIMATE_CSS } from './animate/common';
/**
* Animista Animations
*/
import { ANIMATIONS as ANIMATIONS_ANIMISTA } from './animista/common';
export const ANIMATIONS = {
/**
* DEFAULT ANIMATION
*/
NONE: 'none',
...ANIMATIONS_ANIMATE_CSS,
...ANIMATIONS_ANIMISTA
} as const;
export type AnimationsType = typeof ANIMATIONS[keyof typeof ANIMATIONS];

28
src/components/animation/animations/index.ts
Wyświetl plik

@ -1,20 +1,12 @@
import { ANIMATIONS, AnimationsType } from './common';
import ANIMATE from './animate';
import ANIMISTA from './animista';
import animatecss from './animatecss';
import animista from './animista';
export const ANIMATION_KEY_ERROR = 'Animation not supported';
export { ANIMATIONS, AnimationsType };
export const KEYFRAMES = {
[ANIMATIONS.NONE]: [] as Keyframe[],
...ANIMATE,
...ANIMISTA
} as const;
const sortObject = (o: any) =>
Object.keys(o)
.sort()
.reduce((r, k) => ((r[k] = o[k]), r), {});
export function getKeyFramesByAnimation(animation: AnimationsType) {
const keyFrames = KEYFRAMES[animation];
if (keyFrames !== undefined) {
return keyFrames;
} else {
throw new Error(ANIMATION_KEY_ERROR);
}
}
export default {
none: [],
...sortObject({ ...animatecss, ...animista })
};

65
src/components/animation/easing/easing.ts
Wyświetl plik

@ -1,65 +0,0 @@
export const EASING = {
LINEAR: 'linear',
EASE: 'ease',
EASE_IN: 'ease-in',
EASE_OUT: 'ease-out',
EASE_IN_OUT: 'ease-in-out',
EASE_IN_CUBIC: 'ease-in-cubic',
EASE_OUT_CUBIC: 'ease-out-cubic',
EASE_IN_OUT_CUBIC: 'ease-in-out-cubic',
EASE_IN_CIRC: 'ease-in-circ',
EASE_OUT_CIRC: 'ease-out-circ',
EASE_IN_OUT_CIRC: 'ease-in-out-circ',
EASE_IN_EXPO: 'ease-in-expo',
EASE_OUT_EXPO: 'ease-out-expo',
EASE_IN_OUT_EXPO: 'ease-in-out-expo',
EASE_IN_QUAD: 'ease-in-quad',
EASE_OUT_QUAD: 'ease-out-quad',
EASE_IN_OUT_QUAD: 'ease-in-out-quad',
EASE_IN_QUART: 'ease-in-quart',
EASE_OUT_QUART: 'ease-out-quart',
EASE_IN_OUT_QUART: 'ease-in-out-quart',
EASE_IN_QUINT: 'ease-in-quint',
EASE_OUT_QUINT: 'ease-out-quint',
EASE_IN_OUT_QUINT: 'ease-in-out-quint',
EASE_IN_SINE: 'ease-in-sine',
EASE_OUT_SINE: 'ease-out-sine',
EASE_IN_OUT_SINE: 'ease-in-out-sine',
EASE_IN_BACK: 'ease-in-back',
EASE_OUT_BACK: 'ease-out-back',
EASE_IN_OUT_BACK: 'ease-in-out-back'
} as const;
export const EASING_FUNCTIONS = {
[EASING.LINEAR]: 'linear',
[EASING.EASE]: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
[EASING.EASE_IN]: 'cubic-bezier(0.42, 0, 1, 1)',
[EASING.EASE_OUT]: 'cubic-bezier(0, 0, 0.58, 1)',
[EASING.EASE_IN_OUT]: 'cubic-bezier(0.42, 0, 0.58, 1)',
[EASING.EASE_IN_CUBIC]: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
[EASING.EASE_OUT_CUBIC]: 'cubic-bezier(0.215, 0.61, 0.355, 1.0)',
[EASING.EASE_IN_OUT_CUBIC]: 'cubic-bezier(0.645, 0.045, 0.355, 1.0)',
[EASING.EASE_IN_CIRC]: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
[EASING.EASE_OUT_CIRC]: 'cubic-bezier(0.075, 0.82, 0.165, 1.0)',
[EASING.EASE_IN_OUT_CIRC]: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
[EASING.EASE_IN_EXPO]: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
[EASING.EASE_OUT_EXPO]: 'cubic-bezier(0.19, 1.0, 0.22, 1.0)',
[EASING.EASE_IN_OUT_EXPO]: 'cubic-bezier(1.0, 0.0, 0.0, 1.0)',
[EASING.EASE_IN_QUAD]: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
[EASING.EASE_OUT_QUAD]: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
[EASING.EASE_IN_OUT_QUAD]: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
[EASING.EASE_IN_QUART]: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
[EASING.EASE_OUT_QUART]: 'cubic-bezier(0.165, 0.84, 0.44, 1.0)',
[EASING.EASE_IN_OUT_QUART]: 'cubic-bezier(0.77, 0.0, 0.175, 1.0)',
[EASING.EASE_IN_QUINT]: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
[EASING.EASE_OUT_QUINT]: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
[EASING.EASE_IN_OUT_QUINT]: 'cubic-bezier(0.86, 0.0, 0.07, 1.0)',
[EASING.EASE_IN_SINE]: 'cubic-bezier(0.47, 0.0, 0.745, 0.715)',
[EASING.EASE_OUT_SINE]: 'cubic-bezier(0.39, 0.575, 0.565, 1.0)',
[EASING.EASE_IN_OUT_SINE]: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
[EASING.EASE_IN_BACK]: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
[EASING.EASE_OUT_BACK]: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
[EASING.EASE_IN_OUT_BACK]: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
};
export type EasingType = typeof EASING[keyof typeof EASING];

31
src/components/animation/easings/index.ts 100644
Wyświetl plik

@ -0,0 +1,31 @@
export default {
linear: 'linear',
ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
'ease-in-cubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1.0)',
'ease-in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.0)',
'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
'ease-out-circ': 'cubic-bezier(0.075, 0.82, 0.165, 1.0)',
'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
'ease-in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
'ease-out-expo': 'cubic-bezier(0.19, 1.0, 0.22, 1.0)',
'ease-in-out-expo': 'cubic-bezier(1.0, 0.0, 0.0, 1.0)',
'ease-in-quad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
'ease-out-quad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'ease-in-out-quad': 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
'ease-in-quart': 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
'ease-out-quart': 'cubic-bezier(0.165, 0.84, 0.44, 1.0)',
'ease-in-out-quart': 'cubic-bezier(0.77, 0.0, 0.175, 1.0)',
'ease-in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
'ease-out-quint': 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
'ease-in-out-quint': 'cubic-bezier(0.86, 0.0, 0.07, 1.0)',
'ease-in-sine': 'cubic-bezier(0.47, 0.0, 0.745, 0.715)',
'ease-out-sine': 'cubic-bezier(0.39, 0.575, 0.565, 1.0)',
'ease-in-out-sine': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
'ease-in-back': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'ease-in-out-back': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
};

116
src/components/animation/manager.ts
Wyświetl plik

@ -1,116 +0,0 @@
import { IAnimatable } from './models/animatable';
import { KEYFRAMES } from './animations';
import { EasingType, EASING_FUNCTIONS } from './easing/easing';
function createAnimation(element: HTMLElement, context: IAnimatable): Animation {
const newKeyFrames = context.keyFrames || (context.name && KEYFRAMES[context.name]) || [];
const options = getAnimationOptions(context);
const newAnimation = element.animate(newKeyFrames, options);
newAnimation.pause();
if (context.currentTime !== undefined) newAnimation.currentTime = context.currentTime;
if (context.startTime !== undefined) newAnimation.startTime = context.startTime;
return newAnimation;
}
function getAnimationOptions(context: IAnimatable): KeyframeAnimationOptions {
const animationOptions: KeyframeAnimationOptions = context.options || {};
if (context.delay !== undefined) animationOptions.delay = context.delay;
if (context.duration !== undefined) animationOptions.duration = context.duration;
if (context.direction !== undefined) animationOptions.direction = context.direction;
if (context.composite !== undefined) animationOptions.composite = context.composite;
const easingType = (context.easing || animationOptions.easing) as EasingType;
animationOptions.easing = EASING_FUNCTIONS[easingType] || easingType;
if (context.endDelay !== undefined) animationOptions.endDelay = context.endDelay;
if (context.fill !== undefined) animationOptions.fill = context.fill;
if (context.iterations !== undefined) animationOptions.iterations = context.iterations;
if (context.iterationStart !== undefined) animationOptions.iterationStart = context.iterationStart;
if (context.iterationComposite !== undefined) animationOptions.iterationComposite = context.iterationComposite;
return animationOptions;
}
export class AnimationManager {
private element: HTMLElement;
private state: IAnimatable;
private name: Animation = null;
private isUpdatingState: boolean;
constructor(initState: IAnimatable) {
this.state = initState;
}
get currentAnimation(): Animation {
return this.name || this.loadAnimation();
}
set currentAnimation(value: Animation) {
this.name = value;
}
loadAnimation() {
const { element, state } = this;
const newAnimation = createAnimation(element, state);
newAnimation.addEventListener('finish', this.onFinishAnimation);
newAnimation.addEventListener('cancel', this.onCancelAnimation);
return (this.name = newAnimation);
}
clearAnimation() {
if (this.name === null) return;
this.name.removeEventListener('finish', this.onFinishAnimation);
this.name.removeEventListener('cancel', this.onCancelAnimation);
this.name = null;
}
destroyAnimation() {
if (this.name === null) return;
const currentAnimation = this.name;
this.clearAnimation();
currentAnimation.cancel();
}
playAnimation() {
// If the animation is playing, do nothing
if (this.currentAnimation.playState === 'running' && !this.isUpdatingState) {
return;
}
// Cancel current animation before creating another one
if (this.isUpdatingState) {
this.destroyAnimation();
}
this.currentAnimation.play();
this.onStartAnimation();
}
setState(element: HTMLElement, newState: IAnimatable) {
this.isUpdatingState = true;
this.element = element;
this.state = newState;
}
savedState() {
// Check if `autoPlay` is enabled to play a new animation and emit the event.
if (this.state.autoPlay) {
this.playAnimation();
}
this.isUpdatingState = false;
}
onStartAnimation = () => {
this.state.slStart.emit(this.element);
};
onCancelAnimation = () => {
this.state.slCancel.emit(this.element);
};
onFinishAnimation = () => {
const { element, state } = this;
state.slFinish.emit(element);
};
}

27
src/components/animation/models/animatable.ts
Wyświetl plik

@ -1,27 +0,0 @@
import { EventEmitter, ComponentInterface } from '@stencil/core';
import { AnimationsType } from '../animations';
export interface IAnimatable {
name?: AnimationsType;
keyFrames?: Keyframe[];
options?: KeyframeAnimationOptions;
delay?: number;
endDelay?: number;
duration?: number;
direction?: PlaybackDirection;
composite?: CompositeOperation;
easing?: string;
fill?: FillMode;
iterations?: number;
iterationStart?: number;
iterationComposite?: IterationCompositeOperation;
autoPlay?: boolean;
currentTime?: number;
startTime?: number;
playbackRate?: number;
slStart: EventEmitter<HTMLElement>;
slFinish: EventEmitter<HTMLElement>;
slCancel: EventEmitter<HTMLElement>;
}
export type IAnimatableComponent = IAnimatable & ComponentInterface;