Circular Spin Animation

This libaray includes name tags which which move in circular motion animation it supports Angualr version 13.3.0.

Installing and usage

npm install circularspinanimation

Load the module for your app:

import { CircularModule } from 'circularspinanimation';

@NgModule({
  ...
  imports: [
    ...
    CircularModule
  ]
})

Use it in your HTML template:

<lib-spin-motion [config]="config"  ></lib-spin-motion>

How to configure

[config]="config"  // it will add the configurations you want to add in your animation

//this is an example of configuration file you can copy it in your ts component



config: any = {
    items: ["Zid","Amazon","Noon","Salla","Amazon","Noon","Salla"],   // items array  contain the names which will be displayed in the card 
    radius:250 ,                                                     // radius will configure the height and width of inner and outer circle 
    borderColor: 'black',                                           // it will change the border of inner and outer circle
    itemsColor: 'gold',                                            // it will change the text color of the items name
    itemsCardColor:'silver',                                      // it will change the card background color 
    directionClockwise:false                                     //  from here you can set the direction clockwise or anticlockwise
  }