diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts
index ca5c9da..7e6e6fd 100644
--- a/projects/ngx-tippy-demo/src/app/app.module.ts
+++ b/projects/ngx-tippy-demo/src/app/app.module.ts
@@ -32,12 +32,19 @@ import {
   TuiSvgModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core';
-import { TuiAccordionModule, TuiBadgeModule, TuiInputModule, TuiIslandModule } from '@taiga-ui/kit';
+import {
+  TuiAccordionModule,
+  TuiBadgeModule,
+  TuiInputModule,
+  TuiIslandModule,
+  TuiRadioLabeledModule,
+} from '@taiga-ui/kit';
 import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
 import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { DefaultOrderKeyvaluePipe } from './pipes';
 
 function initialize(SchemeService: SchemeService) {
   return () => SchemeService.getPreferredScheme();
@@ -61,6 +68,7 @@ function initialize(SchemeService: SchemeService) {
     AppContentComponent,
     ServiceComponent,
     DemoPageComponent,
+    DefaultOrderKeyvaluePipe,
   ],
   imports: [
     AppRoutingModule,
@@ -85,6 +93,7 @@ function initialize(SchemeService: SchemeService) {
     TuiRootModule,
     TuiSvgModule,
     TuiThemeNightModule,
+    TuiRadioLabeledModule,
   ],
   providers: [
     {
diff --git a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts
index 4ae6302..12ee529 100644
--- a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts
+++ b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts
@@ -34,7 +34,9 @@ export class DemoComponent implements OnInit, AfterViewInit {
   private listenForSchemeChange(tInstances: Map<string, NgxTippyInstance>) {
     this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => {
       const theme = scheme === Schemes.Dark ? 'light' : 'dark';
-      tInstances?.forEach(tInstance => tInstance.setProps({ theme }));
+      tInstances?.forEach(tInstance => {
+        return tInstance.props.content.toString().includes('theme') ? tInstance : tInstance.setProps({ theme });
+      });
     });
   }
 }
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html
index 5e03a8c..848c364 100644
--- a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html
+++ b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html
@@ -1,9 +1,173 @@
 <div class="demo-page">
-  <h1 class="tui-text_h3">Demo page</h1>
+
   <tui-notification
     status="warning"
     class="service-demo tui-space_vertical-4"
   >
     In progress
   </tui-notification>
+
+  <h1 class="tui-text_h3">Demo page</h1>
+
+  <!-- Simple tooltip -->
+
+  <h6 class="tui-text_h6">
+    Simple tooltip:
+  </h6>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'right'
+      }"
+    >
+      Button
+    </button>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Placements:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__grid">
+      <div
+        class="demo-page__child"
+        *ngFor="let tooltip of tooltips | defaultOrderKeyvalue"
+        [ngxTippy]="tooltip.value.content"
+        tippyClassName="demo-page__emojii"
+        [tippyProps]="{
+            placement: tooltip.value.item,
+            arrow: false,
+            offset: [4, 4],
+            animation: 'shift-toward',
+            duration: [250, 200]
+          }"
+      >
+        {{ tooltip.value.item }}
+      </div>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Animations:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__grid">
+      <div
+        class="demo-page__child"
+        *ngFor="let animation of animations | defaultOrderKeyvalue"
+        [ngxTippy]="animation.value.content"
+        tippyClassName="demo-page__emojii"
+        [tippyProps]="{
+            arrow: false,
+            offset: [4, 4],
+            animation: animation.value.item
+          }"
+      >
+        {{ animation.value.item }}
+      </div>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Custom animation:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__custom">
+      <div
+        class="demo-page__child"
+        tippyClassName="demo-page__custom-anim"
+        [ngxTippy]="train"
+        [tippyProps]="{
+            arrow: false,
+            offset: [42, 4],
+            animation: 'custom-shift'
+          }"
+      >
+        custom-shift
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Custom animation with <a
+      href="https://atomiks.github.io/tippyjs/v6/animations/#inertia"
+      target="_blank"
+      rel="noopener noreferrer"
+    >inertia</a>:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__custom">
+      <div
+        class="demo-page__child"
+        tippyClassName="demo-page__custom-anim"
+        [ngxTippy]="train"
+        [tippyProps]="{
+            arrow: false,
+            offset: [42, 4],
+            animation: 'custom-shift',
+            inertia: true
+          }"
+      >
+        custom-shift + inertia
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Themes:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__themes">
+      <div
+        *ngFor="let theme of ['light', 'light-border', 'material', 'transcluded']"
+        class="demo-page__child demo-page__child--theme"
+        [ngxTippy]="theme + ' theme'"
+        tippyClassName="custom-theme"
+        [tippyProps]="{
+            arrow: false,
+            theme,
+            animation: 'shift-toward'
+          }"
+      >
+        {{ theme }}
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </t-demo>
+
 </div>
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss
index f8bffd7..b2e8102 100644
--- a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss
+++ b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss
@@ -1,3 +1,77 @@
+::ng-deep {
+
+  .demo-page__emojii,
+  .demo-page__custom-anim {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: 2px solid var(--tui-primary);
+    font-size: 1.2rem;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+
+  .demo-page__custom-anim {
+    border-radius: 1rem;
+    width: 200px;
+  }
+
+  .tippy-box[data-animation='custom-shift'][data-state='hidden'] {
+    opacity: 0;
+    transform: translateX(-150px);
+    transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  }
+
+}
+
 .tui-text_h3 {
   margin-top: 0;
 }
+
+t-demo {
+  margin-top: 1.2rem;
+}
+
+.demo-page__grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+}
+
+.demo-page__child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 4rem;
+  background-color: var(--tui-positive);
+  color: var(--tui-primary-text);
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+.demo-page__custom {
+  width: 33%;
+}
+
+.demo-page__train {
+  width: 100%;
+}
+
+.demo-page__themes {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-page__child--theme {
+  width: 22%;
+}
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts
index b6ee479..9de3c35 100644
--- a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts
+++ b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts
@@ -1,16 +1,172 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-
+const emojis = [
+  '😄',
+  '😃',
+  '😀',
+  '😊',
+  '😉',
+  '😍',
+  '😘',
+  '😚',
+  '😗',
+  '😙',
+  '😜',
+  '😝',
+  '😛',
+  '😳',
+  '😁',
+  '😔',
+  '😌',
+  '😒',
+  '😞',
+  '😣',
+  '😢',
+  '😂',
+  '😭',
+  '😪',
+  '😥',
+  '😰',
+  '😅',
+  '😓',
+  '😩',
+  '😫',
+  '😨',
+  '😱',
+  '😠',
+  '😡',
+  '😤',
+  '😖',
+  '😆',
+  '😋',
+  '😷',
+  '😎',
+  '😴',
+  '😵',
+  '😲',
+  '😟',
+  '😦',
+  '😧',
+  '😈',
+  '👿',
+  '😮',
+  '😬',
+  '😐',
+  '😕',
+  '😯',
+  '😶',
+  '😇',
+  '😏',
+];
 @Component({
   selector: 'app-demo-page',
   templateUrl: './demo-page.component.html',
   styleUrls: ['./demo-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DemoPageComponent implements OnInit {
+  public readonly tooltips = {
+    'top': {
+      item: 'top',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'top-start': {
+      item: 'top-start',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'top-end': {
+      item: 'top-end',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'right': {
+      item: 'right',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'right-start': {
+      item: 'right-start',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'right-end': {
+      item: 'right-end',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'bottom': {
+      item: 'bottom',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'bottom-start': {
+      item: 'bottom-start',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'bottom-end': {
+      item: 'bottom-end',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'left': {
+      item: 'left',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'left-start': {
+      item: 'left-start',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'left-end': {
+      item: 'left-end',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+  };
 
-  constructor() { }
+  public readonly animations = {
+    'shift-away': {
+      item: 'shift-away',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'shift-away-subtle': {
+      item: 'shift-away-subtle',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'shift-away-extreme': {
+      item: 'shift-away-extreme',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'shift-toward': {
+      item: 'shift-toward',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'shift-toward-subtle': {
+      item: 'shift-toward-subtle',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'shift-toward-extreme': {
+      item: 'shift-toward-extreme',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'scale': {
+      item: 'scale',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'scale-subtle': {
+      item: 'scale-subtle',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'scale-extreme': {
+      item: 'scale-extreme',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'perspective': {
+      item: 'perspective',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'perspective-suble': {
+      item: 'perspective-suble',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+    'perspective-extreme': {
+      item: 'perspective-extreme',
+      content: emojis[Math.floor(Math.random() * emojis.length)],
+    },
+  };
 
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/projects/ngx-tippy-demo/src/app/pipes/default-order.pipe.ts b/projects/ngx-tippy-demo/src/app/pipes/default-order.pipe.ts
new file mode 100644
index 0000000..9f66133
--- /dev/null
+++ b/projects/ngx-tippy-demo/src/app/pipes/default-order.pipe.ts
@@ -0,0 +1,13 @@
+import { KeyValuePipe } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+
+const keepOrder = (a: any, b: any) => a;
+
+@Pipe({
+  name: 'defaultOrderKeyvalue',
+})
+export class DefaultOrderKeyvaluePipe extends KeyValuePipe implements PipeTransform {
+  transform(value: any, ...args: any[]): any {
+    return super.transform(value, keepOrder);
+  }
+}
diff --git a/projects/ngx-tippy-demo/src/app/pipes/index.ts b/projects/ngx-tippy-demo/src/app/pipes/index.ts
new file mode 100644
index 0000000..e1acec9
--- /dev/null
+++ b/projects/ngx-tippy-demo/src/app/pipes/index.ts
@@ -0,0 +1 @@
+export { DefaultOrderKeyvaluePipe } from './default-order.pipe';
diff --git a/projects/ngx-tippy-demo/src/assets/img/submarine-d.png:Zone.Identifier b/projects/ngx-tippy-demo/src/assets/img/submarine-d.png:Zone.Identifier
deleted file mode 100644
index e69de29..0000000
diff --git a/projects/ngx-tippy-demo/src/assets/img/submarine-l.png:Zone.Identifier b/projects/ngx-tippy-demo/src/assets/img/submarine-l.png:Zone.Identifier
deleted file mode 100644
index e69de29..0000000
diff --git a/projects/ngx-tippy-demo/src/assets/img/train.png b/projects/ngx-tippy-demo/src/assets/img/train.png
new file mode 100644
index 0000000..d1c9be6
Binary files /dev/null and b/projects/ngx-tippy-demo/src/assets/img/train.png differ