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 either line or diagonal to change the animation style.

<sed-block-assemble [animationStyle]="'diagonal'">...</sed-block-assemble>
<sed-block-assemble [animationStyle]="'line'">...</sed-block-assemble>