import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
import { EaseIn, EaseOut } from '../easings';
import { IAnimationParams } from '../main';
const swingBase: AnimationMetadata[] = [
style({
opacity: `{{startOpacity}}`,
transform: `rotate{{direction}}({{startAngle}}deg)`,
transformOrigin: `{{xPos}} {{yPos}}`
}),
animate(
`{{duration}} {{delay}} {{easing}}`,
style({
opacity: `{{endOpacity}}`,
transform: `rotate{{direction}}({{endAngle}}deg)`,
transformOrigin: `{{xPos}} {{yPos}}`
})
)
];
const swingParams: IAnimationParams = {
delay: '0s',
direction: 'X',
duration: '.5s',
easing: EaseOut.back,
endAngle: 0,
endOpacity: 1,
startAngle: -100,
startOpacity: 0,
xPos: 'top',
yPos: 'center'
import { trigger, animate, transition, style, state } from '@angular/animations';
export const scrollFabAnimation = trigger('scrollAnimation', [
state('show', style({ opacity: 1, transform: 'scale(1)' })),
state('hide', style({ opacity: 0, transform: 'scale(0)' })),
transition('show => hide', animate('500ms ease-out')),
transition('hide => show', animate('500ms ease-in'))
]);
import {
animate,
AnimationTriggerMetadata,
state,
style,
transition,
trigger,
} from '@angular/animations';
export const DropDownAnimation: AnimationTriggerMetadata = trigger('dropDownAnimation', [
state('bottom', style({
opacity : 1,
transform : 'scaleY(1)',
transformOrigin: '0% 0%'
})),
transition('void => bottom', [
style({
opacity : 0,
transform : 'scaleY(0)',
transformOrigin: '0% 0%'
}),
animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
]),
state('top', style({
opacity : 1,
transform : 'scaleY(1)',
transformOrigin: '0% 100%'
})),
transition('void => top', [
style({
opacity : 0,
import { trigger, transition, animate, style } from '@angular/animations';
export const routeAnimation = trigger('routerTransition', [
transition(':enter', [
style({ opacity: 0, zIndex: 90 }),
animate('500ms ease-in', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1, zIndex: 80 }),
animate('500ms ease-in', style({ opacity: 0 }))
])
]);
// export const routeAnimationOld = trigger('routerTransition', [
// transition(':enter', [
// style({ left: '100%', position: 'absolute', top: '2rem', width: '100%', zIndex: 90 }),
// animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ left: '0' }))
// ]),
// transition(':leave', [
// style({ left: '0', position: 'absolute', top: '2rem', width: '100%', zIndex: 80 }),
// animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ left: '-100%' }))
// ])
// ]);
trigger,
animate,
style,
group,
query,
transition,
animateChild,
state,
animation,
useAnimation,
stagger
} from '@angular/animations';
const customAnimation = animation([
style({
opacity: '{{opacity}}',
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
}),
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
params: {
duration: '200ms',
delay: '0ms',
opacity: '0',
scale: '1',
x: '0',
y: '0',
z: '0'
}
});
export const NavigationAnimation = [
/**
* const tdRotateAnimation
*
* Parameter Options:
* * degressStart: Degrees of rotation that the dom object will end up in during the "false" state
* * degreesEnd: Degrees of rotation that the dom object will end up in during the "true" state
* * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerates and decelerates. Defaults to ease-in.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a rotation animation.
*
* usage: [@tdRotate]="{ value: true | false, params: { degreesEnd: 90 }}"
*/
export const tdRotateAnimation: AnimationTriggerMetadata = trigger('tdRotate', [
state('0', style({
transform: 'rotate({{ degressStart }}deg)',
}), { params: { degressStart: 0 }}),
state('1', style({
transform: 'rotate({{ degreesEnd }}deg)',
}), { params: { degreesEnd: 180 }}),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}'),
]),
], { params: { duration: 250, delay: '0', ease: 'ease-in' }}),
]);
// import the required animation functions from the angular animations module
import {AnimationTriggerMetadata, trigger, animate, transition, style } from '@angular/animations';
export const FadeInAnimation: AnimationTriggerMetadata =
// trigger name for attaching this animation to an element using the [@triggerName] syntax
trigger('FadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.3s', style({ opacity: 1 }))
]),
]);
import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
import { EaseIn, EaseOut } from '../easings';
import { IAnimationParams } from '../main';
const baseRecipe: AnimationMetadata[] = [
style({
opacity: `{{startOpacity}}`,
transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{startAngle}}deg)`,
transformOrigin: `{{xPos}} {{yPos}}`
}),
animate(
`{{duration}} {{delay}} {{easing}}`,
style({
offset: 0,
opacity: `{{endOpacity}}`,
transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{endAngle}}deg)`,
transformOrigin: `{{xPos}} {{yPos}}`
})
)
];
const baseInParams: IAnimationParams = {
delay: '0s',
duration: '600ms',
easing: EaseOut.quad,
endAngle: 0,
endOpacity: 1,
rotateX: 0,
rotateY: 0,
rotateZ: 1,
startAngle: -360,
import { trigger, animate, transition, style } from '@angular/animations';
export const expandAnimation = trigger('expandAnimation', [
transition(':enter', [style({ height: 0 }), animate('.4s ease', style({ height: '*' }))]),
transition(':leave', [animate('.4s ease', style({ height: 0 }))])
]);
// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';
export const slideInOutAnimation =
// trigger name for attaching this animation to an element using the [@triggerName] syntax
trigger('slideInOutAnimation', [
// end state styles for route container (host)
state('*', style({
// the view covers the whole screen with a semi tranparent background
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)'
})),
transition(':enter', [
style({
right: '-400%',
// start with background opacity set to 0 (invisible)
backgroundColor: 'rgba(0, 0, 0, 0)'
}),
// animation and styles at end of transition
animate('.5s ease-in-out', style({
// transition the right position to 0 which slides the content into view
right: 0,
// transition the background opacity to 0.8 to fade it in
