Spike Project: Investigate UI Element Animations
License and Copyright Notice
By submitting this issue or commenting on this issue, or contributing any content to this issue, you certify under the Developer Certificate of Origin that the content you post may be licensed under GPLv3 (for code) or CC-BY-SA 4.0 International (for non-code content).
What is the goal or the problem, and why is it important?
In an attempt to bring our web application up to date with the reactive web design present in so many modern web pages we hope to add animated components that are sleek and functional.
How are you going to acheive the goal or solve the problem?
Many examples, packages, and documentation exist currently on creating these elements and we hope to tap those for inspiration.
What will be produced as a result of this effort and where will it live on GitLab?
Some sample components that can hopefully be modified and then utilized in our finalized web page, which of course will be posted on GitLab.
Give a justification of weight or due date.
As this is a part of finalizing the design and polishing the aesthetics, as well as being non-essential, it will likely not even be started until later in the project.
Who will do it, and what will they do?
Brandon will attempt to create these elements.
What was the outcome?
import {animate, style, transition, trigger} from '@angular/animations';
export const idscanWindowAnimation = [
trigger(
'inOutVerticalAnimation',
[
transition(
':enter',
[
style({top: 0, opacity: 0}),
animate('300ms cubic-bezier(.18,-0.02,.22,1.12)',
style({top: '50%', opacity: 1}))
]
),
transition(
':leave',
[
style({top: '50%', opacity: 1}),
animate('200ms ease',
style({top: 0, opacity: 0}))
]
)
]
)
];
export const weightEntryAnimation = [ trigger( 'inOutHorizontalAnimation', [ transition( ':enter', [ style({position: 'absolute', left: '-200%'}), animate(/'500ms cubic-bezier(.18,-0.02,.22,1.12/ '600ms cubic-bezier(.25,.36,.26,1.07)', style({position: 'relative', left: 0})) ] ), transition( ':leave', [ style({position: 'relative', left: 0}), animate('300ms ease-in-out', style({position: 'absolute', left: '-200%'})) ] ) ] ) ];