Block assemble animation Angular component
A flexible animation to enhance the user experience of your Angular applications.
Install with npm
npm install @sedware/block-assemble
Summary
Use this component to enhance your Angular applications and make them more engaging. Aside from the typcial Angular dependencies, this component utilises the dom-to-image plugin to increase animation performance.
Wrap your components with the sed-block-assemble
selector and the animation
will assemble any of your components by stacking up blocks as soon as your
component loads.
If you have any issues or would like to contribute, please raise a Github issue or a pull request with new changes. If you think the component doesn't quite fit your needs and could be improved, you're very welcome to start a discussion about new feature requests/changes by raising an issue.
Usage
Import the sed-block-assemble
module into your application or feature module
after any common modules, libraries or frameworks
import { SedBlockAssembleModule } from '@sedware/block-assemble';
@NgModule({
...
imports: [
...
SedBlockAssembleModule
],
...
})
export class AppModule { }
Use the block assemble animation in your components
<sed-block-assemble>
Your content/components go here...
</sed-block-assemble>
Options
- Pass an optional
animationStyle
input to the component with a string value of eitherline
ordiagonal
to change the animation style.
<sed-block-assemble [animationStyle]="'diagonal'">...</sed-block-assemble>
<sed-block-assemble [animationStyle]="'line'">...</sed-block-assemble>