diff --git a/packages/survey-angular-ui/src/base-angular.ts b/packages/survey-angular-ui/src/base-angular.ts
index a8fd016159..ef4f430810 100644
--- a/packages/survey-angular-ui/src/base-angular.ts
+++ b/packages/survey-angular-ui/src/base-angular.ts
@@ -68,6 +68,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
           this.update(key);
         }
       };
+      stateElement.enableOnElementRenderedEvent();
     }
   }
   private unMakeBaseElementAngular(stateElement?: Base) {
@@ -82,6 +83,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
           val["onArrayChanged"] = () => { };
         }
       });
+      stateElement.disableOnElementRenderedEvent();
     }
   }
 
@@ -109,6 +111,9 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
   }
   protected detectChanges() {
     this.getChangeDetectorRef().detectChanges();
+    if(this.getModel()) {
+      this.getModel().afterRerender();
+    }
   }
 
   protected getShouldReattachChangeDetector(): boolean {
diff --git a/packages/survey-angular-ui/src/questions/ranking.component.html b/packages/survey-angular-ui/src/questions/ranking.component.html
index b55d20790e..8a367d7299 100644
--- a/packages/survey-angular-ui/src/questions/ranking.component.html
+++ b/packages/survey-angular-ui/src/questions/ranking.component.html
@@ -1,25 +1,25 @@
 <div *ngIf="!model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
-  <ng-container *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy">
+  <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
     <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
   </ng-container>
 </div>
 
 <div *ngIf="model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
   <div [class]='model.getContainerClasses("from")' data-ranking="from-container">
-    <ng-container *ngFor="let item of model.unRankingChoices; index as index; trackBy: trackItemBy">
+    <ng-container *ngFor="let item of model.renderedUnRankingChoices; index as index; trackBy: trackItemBy">
       <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index, true) }"></ng-template>
     </ng-container>
 
-    <div *ngIf="model.unRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyRankedAreaText" sv-ng-string></div>
+    <div *ngIf="model.renderedUnRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyRankedAreaText" sv-ng-string></div>
   </div>
 
   <div [class]="model.cssClasses.containersDivider"></div>
 
   <div [class]='model.getContainerClasses("to")' data-ranking="to-container">
-    <ng-container *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy">
+    <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
       <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
     </ng-container>
 
-    <div *ngIf="model.rankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyUnrankedAreaText" sv-ng-string></div>
+    <div *ngIf="model.renderedRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyUnrankedAreaText" sv-ng-string></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue b/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
index e641e1a0eb..f7c6b81d87 100644
--- a/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
+++ b/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
@@ -107,16 +107,18 @@ const getCellStyle = () => {
   return null;
 };
 const getCellIndex = () => (props.cell as any).index || "";
-const onVisibilityChanged = () =>
-  (isVisible.value = props.cell.question.isVisible);
+const onVisibilityChanged = () => {
+  if (!props.cell.hasQuestion || !props.question || !props.question.survey)
+    return;
+  isVisible.value = props.cell.question.isVisible;
+};
 const getComponentName = (element: Question | any) => {
   return getComponent(element);
 };
-
+onVisibilityChanged();
 onMounted(() => {
   if (!props.cell.hasQuestion || !props.question || !props.question.survey)
     return;
-  onVisibilityChanged();
   props.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
     onVisibilityChanged();
   });
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index bc30af82c4..cc2ea9649e 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -30,7 +30,7 @@
     <component :is="contentComponentName" v-bind="contentComponentData">
       <div
         :class="getContentClass(element) || undefined"
-        v-show="element.renderedIsExpanded"
+        :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
         role="presentation"
       >
         <survey-errors
diff --git a/packages/survey-vue3-ui/src/Ranking.vue b/packages/survey-vue3-ui/src/Ranking.vue
index df18157a8a..c8947ce56e 100644
--- a/packages/survey-vue3-ui/src/Ranking.vue
+++ b/packages/survey-vue3-ui/src/Ranking.vue
@@ -2,7 +2,7 @@
   <div :class="question.rootClass" ref="root">
     <template v-if="!question.selectToRankEnabled">
       <component
-        v-for="(item, index) in question.rankingChoices"
+        v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
@@ -15,17 +15,19 @@
       data-ranking="from-container"
     >
       <component
-        v-for="(item, index) in question.unRankingChoices"
+        v-for="(item, index) in question.renderedUnRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index, true)"
       ></component>
 
       <div
-        v-if="question.unRankingChoices.length === 0"
+        v-if="question.renderedUnRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string :locString="question.locSelectToRankEmptyRankedAreaText"></survey-string>
+        <survey-string
+          :locString="question.locSelectToRankEmptyRankedAreaText"
+        ></survey-string>
       </div>
     </div>
 
@@ -40,17 +42,19 @@
       data-ranking="to-container"
     >
       <component
-        v-for="(item, index) in question.rankingChoices"
+        v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
       ></component>
 
       <div
-        v-if="question.rankingChoices.length === 0"
+        v-if="question.renderedRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string :locString="question.locSelectToRankEmptyUnrankedAreaText"></survey-string>
+        <survey-string
+          :locString="question.locSelectToRankEmptyUnrankedAreaText"
+        ></survey-string>
       </div>
     </div>
   </div>
diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index 43182397f2..6309d6f8ad 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -11,6 +11,9 @@ import {
   type Ref,
   onBeforeUnmount,
   watchEffect,
+  nextTick,
+  onBeforeUpdate,
+  onUpdated,
 } from "vue";
 Base.createPropertiesHash = () => {
   const res = shallowReactive({});
@@ -51,6 +54,7 @@ export function makeReactive(surveyElement: Base) {
       }
     };
   }
+  surveyElement.enableOnElementRenderedEvent();
   (surveyElement as any).__vueImplemented++;
 }
 
@@ -94,6 +98,9 @@ export function useBase<T extends Base>(
       immediate: true,
     }
   );
+  onUpdated(() => {
+    getModel().afterRerender();
+  });
   onBeforeUnmount(() => {
     const model = getModel();
     if (model) {
diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts
index 31976a3f6d..0d6ac07e1f 100644
--- a/src/base-interfaces.ts
+++ b/src/base-interfaces.ts
@@ -225,7 +225,8 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
     element: ISurveyElement,
     question: IQuestion,
     page: IPage,
-    id: string, scrollIfVisible?: boolean
+    id: string, scrollIfVisible?: boolean,
+    scrollIntoViewOptions?: ScrollIntoViewOptions
   ): any;
   runExpression(expression: string): any;
   elementContentVisibilityChanged(element: ISurveyElement): void;
diff --git a/src/base.ts b/src/base.ts
index 1bff4f65ed..5cda981c1b 100644
--- a/src/base.ts
+++ b/src/base.ts
@@ -1149,7 +1149,7 @@ export class Base {
     return this.getIsAnimationAllowed();
   }
   protected getIsAnimationAllowed(): boolean {
-    return settings.animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+    return settings.animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRenderedEvent);
   }
   private animationAllowedLock: number = 0;
   public blockAnimations(): void {
@@ -1158,6 +1158,22 @@ export class Base {
   public releaseAnimations(): void {
     this.animationAllowedLock++;
   }
+  //remove when knockout obsolete
+  public supportOnElementRenderedEvent = true;
+  public onElementRenderedEventEnabled = false;
+  public enableOnElementRenderedEvent(): void {
+    this.onElementRenderedEventEnabled = true;
+  }
+  public disableOnElementRenderedEvent(): void {
+    this.onElementRenderedEventEnabled = false;
+  }
+  protected _onElementRerendered: EventBase<Base> = new EventBase();
+  public get onElementRerendered(): EventBase<Base> {
+    return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
+  }
+  public afterRerender(): void {
+    this.onElementRerendered.fire(this, undefined);
+  }
 }
 
 export class ArrayChanges<T = any> {
@@ -1187,8 +1203,9 @@ export class Event<CallbackFunction extends Function, Sender, Options> {
   }
   public fire(sender: Sender, options: Options): void {
     if (!this.callbacks) return;
-    for (var i = 0; i < this.callbacks.length; i++) {
-      this.callbacks[i](sender, options);
+    const callbacks = [].concat(this.callbacks);
+    for (var i = 0; i < callbacks.length; i++) {
+      callbacks[i](sender, options);
       if (!this.callbacks) return;
     }
   }
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
index 1f5fa3d320..a2f5762039 100644
--- a/src/defaultCss/defaultV2Css.ts
+++ b/src/defaultCss/defaultV2Css.ts
@@ -179,6 +179,7 @@ export var defaultV2Css = {
   rowMultiple: "sd-row--multiple",
   rowCompact: "sd-row--compact",
   rowFadeIn: "sd-row--fade-in",
+  rowDelayedFadeIn: "sd-row--delayed-fade-in",
   rowFadeOut: "sd-row--fade-out",
   pageRow: "sd-page__row",
   question: {
diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
index c0b06802ad..a794e4423a 100644
--- a/src/defaultV2-theme/blocks/sd-row.scss
+++ b/src/defaultV2-theme/blocks/sd-row.scss
@@ -33,6 +33,9 @@
     margin-top: var(--sd-base-vertical-padding);
     --animate-margin: var(--sd-base-vertical-padding);
   }
+  & ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+    margin-top: 0;
+  }
 }
 
 .sd-row.sd-page__row:not(.sd-row--compact) {
@@ -40,6 +43,9 @@
     margin-top: calcSize(2);
     --animate-margin: #{calcSize(2)};
   }
+  & ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+    margin-top: 0;
+  }
 }
 
 .sd-row--multiple {
@@ -112,16 +118,22 @@
     margin-top: var(--animate-margin);
   }
 }
-
+.sd-row.sd-row--fade-in {
+  margin-top: 0;
+}
 .sd-row--fade-in {
   animation-fill-mode: forwards;
   animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
   min-height: 0 !important;
   opacity: 0;
+  height: 0;
   animation-timing-function: $ease-out;
   animation-delay: $row-fade-in-delay, 0s, 0s;
   animation-duration: $row-fade-in-duration, $row-move-in-duration, $row-move-in-duration;
 }
+.sd-row--delayed-fade-in {
+  animation-delay: calc(#{$row-fade-in-delay} + #{$row-fade-in-animation-delay}), $row-fade-in-animation-delay, $row-fade-in-animation-delay;
+}
 
 .sd-row--fade-out {
   animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
index 6db744f3e7..84900dbf85 100644
--- a/src/defaultV2-theme/variables.scss
+++ b/src/defaultV2-theme/variables.scss
@@ -138,6 +138,7 @@ $row-fade-in-delay: var(--sjs-row-fade-in-delay, 150ms);
 $row-fade-out-duration: var(--sjs-row-fade-out-duration, 150ms);
 $row-move-out-duration: var(--sjs-row-move-out-duration, 250ms);
 $row-move-out-delay: var(--sjs-row-move-out-delay, 100ms);
+$row-fade-in-animation-delay: var(--sjs-row-fade-in-animation-delay, 400ms);
 
 $expand-fade-in-duration: var(--sjs-expand-fade-in-duration, 500ms);
 $expand-move-in-duration: var(--sjs-expand-move-in-duration, 150ms);
diff --git a/src/dragdrop/ranking-choices.ts b/src/dragdrop/ranking-choices.ts
index 88964d6add..ac47bd2c02 100644
--- a/src/dragdrop/ranking-choices.ts
+++ b/src/dragdrop/ranking-choices.ts
@@ -3,6 +3,7 @@ import { DragDropChoices } from "./choices";
 import { CssClassBuilder } from "../utils/cssClassBuilder";
 import { IsMobile } from "../utils/devices";
 import { DomDocumentHelper } from "../global_variables_utils";
+import { QuestionRankingModel } from "../question_ranking";
 export class DragDropRankingChoices extends DragDropChoices {
   protected get draggedElementType(): string {
     return "ranking-item";
@@ -63,72 +64,67 @@ export class DragDropRankingChoices extends DragDropChoices {
     dropTargetNode?: HTMLElement
   ): boolean {
     const choices = this.parentElement.rankingChoices;
-
-    const dropTargetIndex = choices.indexOf(this.dropTarget);
-    const draggedElementIndex = choices.indexOf(this.draggedElement);
-
-    if (draggedElementIndex > dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-moveup")) {
-      this.parentElement.dropTargetNodeMove = null;
-      return false;
-    }
-
-    if (draggedElementIndex < dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-movedown")) {
-      this.parentElement.dropTargetNodeMove = null;
-      return false;
-    }
-
     if (choices.indexOf(dropTarget) === -1)
       // shouldn't allow to drop on "adorners" (selectall, none, other)
       return false;
 
     return true;
   }
-  protected calculateIsBottom(clientY: number): boolean {
-    const choices = this.parentElement.rankingChoices;
-    return (
-      choices.indexOf(this.dropTarget) - choices.indexOf(this.draggedElement) >
-      0
-    );
+  protected calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean {
+    if(this.dropTarget instanceof ItemValue && this.draggedElement !== this.dropTarget) {
+      const rect = dropTargetNode.getBoundingClientRect();
+      return clientY >= rect.y + rect.height / 2;
+    }
+    return super.calculateIsBottom(clientY);
   }
 
   protected doDragOver = (): any => {
     const node = this.domAdapter.draggedElementShortcut.querySelector<HTMLElement>(".sv-ranking-item");
     node.style.cursor = "grabbing";
   };
+  public getIndixies(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>) {
+    let fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+    let toIndex = toChoicesArray.indexOf(this.dropTarget);
+
+    if (toIndex === -1) {
+      const length = model.value.length;
+      toIndex = length;
+    } else if(fromChoicesArray == toChoicesArray) {
+      if(!this.isBottom && fromIndex < toIndex) toIndex--;
+      if(this.isBottom && fromIndex > toIndex) toIndex ++;
+    } else if(fromChoicesArray != toChoicesArray) {
+      if(this.isBottom) toIndex++;
+    }
+
+    return { fromIndex, toIndex };
+  }
 
   protected afterDragOver(dropTargetNode: HTMLElement): void {
-    const choices = this.parentElement.rankingChoices;
-    const dropTargetIndex = choices.indexOf(this.dropTarget);
-    const draggedElementIndex = choices.indexOf(this.draggedElement);
-
-    choices.splice(draggedElementIndex, 1);
-    choices.splice(dropTargetIndex, 0, this.draggedElement);
-    this.parentElement.setPropertyValue("rankingChoices", choices);
-    //return;
-    this.updateDraggedElementShortcut(dropTargetIndex + 1);
-
-    if (draggedElementIndex !== dropTargetIndex) {
-      dropTargetNode.classList.remove("sv-dragdrop-moveup");
-      dropTargetNode.classList.remove("sv-dragdrop-movedown");
-      this.parentElement.dropTargetNodeMove = null;
-    }
+    const { fromIndex, toIndex } = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices);
+    this.reorderRankedItem(this.parentElement as QuestionRankingModel, fromIndex, toIndex);
+  }
 
-    if (draggedElementIndex > dropTargetIndex) {
-      this.parentElement.dropTargetNodeMove = "down";
-    }
+  public reorderRankedItem = (questionModel: QuestionRankingModel, fromIndex: number, toIndex: number): void => {
+    if(fromIndex == toIndex) return;
+    const rankingChoices = questionModel.rankingChoices;
+    const item = rankingChoices[fromIndex];
+    questionModel.isValueSetByUser = true;
 
-    if (draggedElementIndex < dropTargetIndex) {
-      this.parentElement.dropTargetNodeMove = "up";
-    }
+    rankingChoices.splice(fromIndex, 1);
+    rankingChoices.splice(toIndex, 0, item);
+
+    this.updateDraggedElementShortcut(toIndex + 1);
   }
 
   protected updateDraggedElementShortcut(newIndex: number) {
-    const newIndexText = newIndex !== null ? newIndex + "" : "";
-    // TODO should avoid direct DOM manipulation, do through the frameworks instead
-    const indexNode: HTMLElement = this.domAdapter.draggedElementShortcut.querySelector(
-      ".sv-ranking-item__index"
-    );
-    indexNode.innerText = newIndexText;
+    if(this.domAdapter?.draggedElementShortcut) {
+      const newIndexText = newIndex !== null ? newIndex + "" : "";
+      // TODO should avoid direct DOM manipulation, do through the frameworks instead
+      const indexNode: HTMLElement = this.domAdapter.draggedElementShortcut.querySelector(
+        ".sv-ranking-item__index"
+      );
+      indexNode.innerText = newIndexText;
+    }
   }
 
   protected ghostPositionChanged(): void {
diff --git a/src/dragdrop/ranking-select-to-rank.ts b/src/dragdrop/ranking-select-to-rank.ts
index 9a200c88cd..61f9cd4921 100644
--- a/src/dragdrop/ranking-select-to-rank.ts
+++ b/src/dragdrop/ranking-select-to-rank.ts
@@ -83,53 +83,6 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
   }
 
-  public getIndixies(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>) {
-    let fromIndex = fromChoicesArray.indexOf(this.draggedElement);
-    let toIndex = toChoicesArray.indexOf(this.dropTarget);
-
-    if (toIndex === -1) {
-      const length = model.value.length;
-      toIndex = length;
-    } else if(fromChoicesArray == toChoicesArray) {
-      if(!this.isBottom && fromIndex < toIndex) toIndex--;
-      if(this.isBottom && fromIndex > toIndex) toIndex ++;
-    } else if(fromChoicesArray != toChoicesArray) {
-      if(this.isBottom) toIndex++;
-    }
-
-    return { fromIndex, toIndex };
-  }
-  protected calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean {
-    if(this.dropTarget instanceof ItemValue && this.draggedElement !== this.dropTarget) {
-      const rect = dropTargetNode.getBoundingClientRect();
-      return clientY >= rect.y + rect.height / 2;
-    }
-    return super.calculateIsBottom(clientY);
-  }
-
-  private doUIEffects(dropTargetNode: HTMLElement, fromIndex: number, toIndex: number) {
-    const questionModel: any = this.parentElement;
-    const isDropToEmptyRankedContainer = this.dropTarget === "to-container" && questionModel.isEmpty();
-    const isNeedToShowIndexAtShortcut = !this.isDropTargetUnranked || isDropToEmptyRankedContainer;
-    const shortcutIndex = isNeedToShowIndexAtShortcut ? toIndex + 1 : null;
-
-    this.updateDraggedElementShortcut(shortcutIndex);
-
-    if (fromIndex !== toIndex) {
-      dropTargetNode.classList.remove("sv-dragdrop-moveup");
-      dropTargetNode.classList.remove("sv-dragdrop-movedown");
-      questionModel.dropTargetNodeMove = null;
-    }
-
-    if (fromIndex > toIndex) {
-      questionModel.dropTargetNodeMove = "down";
-    }
-
-    if (fromIndex < toIndex) {
-      questionModel.dropTargetNodeMove = "up";
-    }
-  }
-
   private get isDraggedElementRanked() {
     return this.parentElement.rankingChoices.indexOf(this.draggedElement) !== -1;
   }
@@ -143,10 +96,6 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     return !this.isDraggedElementRanked;
   }
 
-  private get isDropTargetUnranked() {
-    return !this.isDropTargetRanked;
-  }
-
   private updateChoices(questionModel: QuestionRankingModel, rankingChoices: Array<ItemValue>) {
     questionModel.isValueSetByUser = true;
     questionModel.rankingChoices = rankingChoices;
@@ -166,27 +115,4 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     rankingChoices.splice(fromIndex, 1);
     this.updateChoices(questionModel, rankingChoices);
   }
-
-  public reorderRankedItem = (questionModel: QuestionRankingModel, fromIndex: number, toIndex: number, dropTargetNode?: HTMLElement): void => {
-    const rankingChoices = questionModel.rankingChoices;
-    const item = rankingChoices[fromIndex];
-    if(fromIndex == toIndex) return;
-
-    questionModel.isValueSetByUser = true;
-    rankingChoices.splice(fromIndex, 1);
-    rankingChoices.splice(toIndex, 0, item);
-    questionModel.setPropertyValue("rankingChoices", rankingChoices);
-    if(dropTargetNode) {
-      this.doUIEffects(dropTargetNode, fromIndex, toIndex);
-    }
-
-  }
-  public clear(): void {
-    const questionModel = <QuestionRankingModel>this.parentElement;
-    if(!!questionModel) {
-      questionModel.rankingChoicesAnimation.cancel();
-      questionModel.unRankingChoicesAnimation.cancel();
-    }
-    super.clear();
-  }
 }
diff --git a/src/knockout/kobase.ts b/src/knockout/kobase.ts
index 71cc20016a..b0c53bd463 100644
--- a/src/knockout/kobase.ts
+++ b/src/knockout/kobase.ts
@@ -20,6 +20,7 @@ export class ImplementorBase {
     if ((<any>element)[this.implementedMark]) {
       return;
     }
+    element.supportOnElementRenderedEvent = false;
     element.iteratePropertiesHash((hash, key) => {
       ImplementorBase.doIterateProperties(element, hash, key);
     });
@@ -58,6 +59,7 @@ export class ImplementorBase {
         hash[key]["onArrayChanged"] = undefined;
       }
     });
+    this.element.supportOnElementRenderedEvent = true;
     this.element.createArrayCoreHandler = undefined;
     this.element.getPropertyValueCoreHandler = undefined;
     this.element.setPropertyValueCoreHandler = undefined;
diff --git a/src/knockout/templates/question-ranking.html b/src/knockout/templates/question-ranking.html
index cd657627d1..f85fd6cc4e 100644
--- a/src/knockout/templates/question-ranking.html
+++ b/src/knockout/templates/question-ranking.html
@@ -1,7 +1,7 @@
 <script type="text/html" id="survey-question-ranking">
    <!-- ko ifnot: question.selectToRankEnabled -->
   <div data-bind="css: question.rootClass">
-    <!-- ko foreach: { data: question.rankingChoices, as: 'item', afterRender: question.koAfterRender } -->
+    <!-- ko foreach: { data: question.renderedRankingChoices, as: 'item', afterRender: question.koAfterRender } -->
       <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
       <!-- /ko -->
     <!-- /ko -->
@@ -11,11 +11,11 @@
   <!-- ko if: question.selectToRankEnabled -->
   <div data-bind="css: question.rootClass">
     <div data-bind="css: question.getContainerClasses('from')" data-ranking="from-container">
-      <!-- ko foreach: { data: question.unRankingChoices, as: 'item', afterRender: question.koAfterRender } -->
+      <!-- ko foreach: { data: question.renderedUnRankingChoices, as: 'item', afterRender: question.koAfterRender } -->
         <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: '', componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
         <!-- /ko -->
       <!-- /ko -->
-      <!-- ko if: question.unRankingChoices.length === 0 -->
+      <!-- ko if: question.renderedUnRankingChoices.length === 0 -->
         <div data-bind="css: cssClasses.containerPlaceholder">
             <!-- ko template: { name: 'survey-string', data: question.locSelectToRankEmptyRankedAreaText } -->
             <!-- /ko -->
@@ -24,11 +24,11 @@
     </div>
     <div data-bind="css: cssClasses.containersDivider"></div>
     <div data-bind="css: question.getContainerClasses('to')" data-ranking="to-container">
-      <!-- ko foreach: { data: question.rankingChoices, as: 'item', afterRender: question.koAfterRender } -->
+      <!-- ko foreach: { data: question.renderedRankingChoices, as: 'item', afterRender: question.koAfterRender } -->
         <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
         <!-- /ko -->
       <!-- /ko -->
-      <!-- ko if: question.rankingChoices.length === 0 -->
+      <!-- ko if: question.renderedRankingChoices.length === 0 -->
       <div data-bind="css: cssClasses.containerPlaceholder">
           <!-- ko template: { name: 'survey-string', data: question.locSelectToRankEmptyUnrankedAreaText } -->
           <!-- /ko -->
diff --git a/src/page.ts b/src/page.ts
index 641d3a23a8..61fadf8935 100644
--- a/src/page.ts
+++ b/src/page.ts
@@ -114,7 +114,7 @@ export class PageModel extends PanelModelBase implements IPage {
   }
   public get isStarted(): boolean { return this.isStartPage; }
   protected calcCssClasses(css: any): any {
-    const classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "" };
+    const classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "" };
     this.copyCssClasses(classes.page, css.page);
     this.copyCssClasses(classes.error, css.error);
     if (!!css.pageTitle) {
@@ -138,12 +138,12 @@ export class PageModel extends PanelModelBase implements IPage {
     if (!!css.rowFadeIn) {
       classes.rowFadeIn = css.rowFadeIn;
     }
+    if (!!css.rowDelayedFadeIn) {
+      classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
+    }
     if (!!css.rowFadeOut) {
       classes.rowFadeOut = css.rowFadeOut;
     }
-    if (!!css.rowFadeOutActive) {
-      classes.rowFadeOutActive = css.rowFadeOutActive;
-    }
     if (this.survey) {
       this.survey.updatePageCssClasses(this, classes);
     }
diff --git a/src/panel.ts b/src/panel.ts
index 1b81761ce3..b828a75154 100644
--- a/src/panel.ts
+++ b/src/panel.ts
@@ -29,7 +29,7 @@ import { ActionContainer } from "./actions/container";
 import { SurveyModel } from "./survey";
 import { DragDropPanelHelperV1 } from "./drag-drop-panel-helper-v1";
 import { DragDropInfo } from "./drag-drop-helper-v1";
-import { AnimationGroup, IAnimationConsumer } from "./utils/animation";
+import { AnimationGroup, IAnimationConsumer, IAnimationGroupConsumer } from "./utils/animation";
 import { DomDocumentHelper, DomWindowHelper } from "./global_variables_utils";
 import { PageModel } from "./page";
 
@@ -118,12 +118,13 @@ export class QuestionRowModel extends Base {
   protected getIsAnimationAllowed(): boolean {
     return super.getIsAnimationAllowed() && this.visible && this.panel?.animationAllowed;
   }
-  private getVisibleElementsAnimationOptions(): IAnimationConsumer<[IElement]> {
+  private getVisibleElementsAnimationOptions(): IAnimationGroupConsumer<IElement> {
     const beforeRunAnimation = (el: HTMLElement) => {
       el.style.setProperty("--animation-height", el.offsetHeight + "px");
       el.style.setProperty("--animation-width", getElementWidth(el) + "px");
     };
     return {
+      getRerenderEvent: () => this.onElementRerendered,
       isAnimationEnabled: () => this.animationAllowed,
       getAnimatedElement: (element: IElement) => (element as any as SurveyElement).getWrapperElement(),
       getLeaveOptions: (element: IElement) => {
@@ -303,11 +304,12 @@ export class PanelModelBase extends SurveyElement<Question>
     this.onRowVisibleChanged();
     row.onVisibleChangedCallback = () => this.onRowVisibleChanged();
   }
-  private getRowsAnimationOptions(): IAnimationConsumer<[QuestionRowModel]> {
+  private getRowsAnimationOptions(): IAnimationGroupConsumer<QuestionRowModel> {
     const beforeRunAnimation = (el: HTMLElement) => {
       el.style.setProperty("--animation-height", el.offsetHeight + "px");
     };
     return {
+      getRerenderEvent: () => this.onElementRerendered,
       isAnimationEnabled: () => this.animationAllowed,
       getAnimatedElement: (row: QuestionRowModel) => row.getRootElement(),
       getLeaveOptions: (_: QuestionRowModel) => {
@@ -315,9 +317,10 @@ export class PanelModelBase extends SurveyElement<Question>
           onBeforeRunAnimation: beforeRunAnimation
         };
       },
-      getEnterOptions: (_: QuestionRowModel) => {
+      getEnterOptions: (_: QuestionRowModel, animationInfo) => {
+        const cssClasses = this.cssClasses;
         return {
-          cssClass: this.cssClasses.rowFadeIn,
+          cssClass: new CssClassBuilder().append(cssClasses.rowFadeIn).append(cssClasses.rowDelayedFadeIn, animationInfo.isDeletingRunning).toString(),
           onBeforeRunAnimation: beforeRunAnimation
         };
       }
@@ -554,7 +557,7 @@ export class PanelModelBase extends SurveyElement<Question>
     this.setPropertyValue("visibleIf", val);
   }
   protected calcCssClasses(css: any): any {
-    var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "", rowMultiple: "", pageRow: "", rowCompact: "" };
+    var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "", rowMultiple: "", pageRow: "", rowCompact: "" };
     this.copyCssClasses(classes.panel, css.panel);
     this.copyCssClasses(classes.error, css.error);
     if (!!css.pageRow) {
@@ -572,8 +575,8 @@ export class PanelModelBase extends SurveyElement<Question>
     if (!!css.rowFadeOut) {
       classes.rowFadeOut = css.rowFadeOut;
     }
-    if (!!css.rowFadeOutActive) {
-      classes.rowFadeOutActive = css.rowFadeOutActive;
+    if (!!css.rowDelayedFadeIn) {
+      classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
     }
     if (!!css.rowMultiple) {
       classes.rowMultiple = css.rowMultiple;
@@ -1427,16 +1430,6 @@ export class PanelModelBase extends SurveyElement<Question>
     if(this.isCollapsed) {
       this.questions.forEach(q => q.onHidingContent());
     }
-    if(this.survey != null && !this.isLoadingFromJson && this.isExpanded && prevState === "collapsed") {
-      const q = this.getFirstQuestionToFocus(false);
-      if(!!q) {
-        setTimeout(() => {
-          if(!this.isDisposed && !!this.survey) {
-            this.survey.scrollElementToTop(q, q, null, q.inputId, false);
-          }
-        }, 15);
-      }
-    }
   }
 
   /**
@@ -2091,6 +2084,18 @@ export class PanelModel extends PanelModelBase implements IElement {
     if (!!panel.originalPage) return true;
     return panel.survey.isShowingPreview && panel.survey.isSinglePage && !!panel.parent && !!panel.parent.originalPage;
   }
+  protected onElementExpanded(elementIsRendered: boolean): void {
+    if(this.survey != null && !this.isLoadingFromJson) {
+      const q = this.getFirstQuestionToFocus(false);
+      if(!!q) {
+        setTimeout(() => {
+          if(!this.isDisposed && !!this.survey) {
+            this.survey.scrollElementToTop(q, q, null, q.inputId, false, { behavior: "smooth" });
+          }
+        }, elementIsRendered ? 0: 15);
+      }
+    }
+  }
   protected getCssRoot(cssClasses: { [index: string]: string }): string {
     return new CssClassBuilder()
       .append(super.getCssRoot(cssClasses))
diff --git a/src/popup-view-model.ts b/src/popup-view-model.ts
index d9918e0e36..cf46f37da4 100644
--- a/src/popup-view-model.ts
+++ b/src/popup-view-model.ts
@@ -55,7 +55,12 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
   }, () => this._isVisible);
 
   getLeaveOptions(): AnimationOptions {
-    return { cssClass: "sv-popup--animate-leave" };
+    return { cssClass: "sv-popup--animate-leave",
+      onBeforeRunAnimation: (el) => {
+        el.setAttribute("inert", "");
+      },
+      onAfterRunAnimation: (el) => el.removeAttribute("inert")
+    };
   }
   getEnterOptions(): AnimationOptions {
     return { cssClass: "sv-popup--animate-enter" };
@@ -66,6 +71,7 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
   isAnimationEnabled(): boolean {
     return this.model.displayMode !== "overlay" && settings.animationEnabled;
   }
+  getRerenderEvent (): EventBase<Base> { return this.onElementRerendered; }
 
   private getAnimationContainer(): HTMLElement {
     return <HTMLElement>this.container?.querySelector(this.fixedPopupContainer);
diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
index ea42ad148d..f6ec87082e 100644
--- a/src/question_matrixdropdownrendered.ts
+++ b/src/question_matrixdropdownrendered.ts
@@ -12,7 +12,7 @@ import { MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownM
 import { ActionContainer } from "./actions/container";
 import { QuestionMatrixDynamicModel } from "./question_matrixdynamic";
 import { settings } from "./settings";
-import { AnimationGroup, IAnimationConsumer } from "./utils/animation";
+import { AnimationGroup, IAnimationConsumer, IAnimationGroupConsumer } from "./utils/animation";
 
 export class QuestionMatrixDropdownRenderedCell {
   private static counter = 1;
@@ -233,7 +233,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
   protected getIsAnimationAllowed(): boolean {
     return super.getIsAnimationAllowed() && this.matrix.animationAllowed;
   }
-  private getRenderedRowsAnimationOptions(): IAnimationConsumer<[QuestionMatrixDropdownRenderedRow]> {
+  private getRenderedRowsAnimationOptions(): IAnimationGroupConsumer<QuestionMatrixDropdownRenderedRow> {
     const beforeAnimationRun = (el: HTMLElement) => {
       el.querySelectorAll(":scope > td > *").forEach((el:HTMLElement) => {
         el.style.setProperty("--animation-height", el.offsetHeight + "px");
@@ -243,6 +243,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       isAnimationEnabled: () => {
         return this.animationAllowed;
       },
+      getRerenderEvent: () => this.onElementRerendered,
       getAnimatedElement(el: QuestionMatrixDropdownRenderedRow) {
         return el.getRootElement();
       },
diff --git a/src/question_paneldynamic.ts b/src/question_paneldynamic.ts
index 79af6248b3..e9f2bd1fa7 100644
--- a/src/question_paneldynamic.ts
+++ b/src/question_paneldynamic.ts
@@ -30,7 +30,7 @@ import { Action, IAction } from "./actions/action";
 import { ComputedUpdater } from "./base";
 import { AdaptiveActionContainer } from "./actions/adaptive-container";
 import { ITheme } from "./themes";
-import { AnimationGroup, AnimationProperty, AnimationTab, IAnimationConsumer } from "./utils/animation";
+import { AnimationGroup, AnimationProperty, AnimationTab, IAnimationConsumer, IAnimationGroupConsumer } from "./utils/animation";
 
 export interface IQuestionPanelDynamicData {
   getItemIndex(item: ISurveyData): number;
@@ -632,6 +632,7 @@ export class QuestionPanelDynamicModel extends Question
         .toString();
     };
     return {
+      getRerenderEvent: () => this.onElementRerendered,
       getAnimatedElement: (panel) => {
         if(panel && this.cssContent) {
           const contentSelector = classesToSelector(this.cssContent);
@@ -673,7 +674,7 @@ export class QuestionPanelDynamicModel extends Question
     };
   }
 
-  private _panelsAnimations: AnimationProperty<Array<PanelModel>, [PanelModel]>;
+  private _panelsAnimations: AnimationProperty<Array<PanelModel>, IAnimationGroupConsumer<PanelModel>>;
   private disablePanelsAnimations() {
     this.panelsCore.forEach((panel) => {
       panel.blockAnimations();
@@ -694,7 +695,7 @@ export class QuestionPanelDynamicModel extends Question
     }, () => this._renderedPanels);
   }
 
-  get panelsAnimation(): AnimationProperty<Array<PanelModel>, [PanelModel]> {
+  get panelsAnimation(): AnimationProperty<Array<PanelModel>, IAnimationGroupConsumer<PanelModel>> {
     if(!this._panelsAnimations) {
       this.updatePanelsAnimation();
     }
diff --git a/src/question_ranking.ts b/src/question_ranking.ts
index 897a8ac2f3..c782dfd9bb 100644
--- a/src/question_ranking.ts
+++ b/src/question_ranking.ts
@@ -2,15 +2,16 @@ import { ISurveyImpl } from "./base-interfaces";
 import { DragDropRankingChoices } from "./dragdrop/ranking-choices";
 import { DragDropRankingSelectToRank } from "./dragdrop/ranking-select-to-rank";
 import { ItemValue } from "./itemvalue";
-import { property, Serializer } from "./jsonobject";
+import { property, propertyArray, Serializer } from "./jsonobject";
 import { QuestionFactory } from "./questionfactory";
 import { QuestionCheckboxModel } from "./question_checkbox";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { IsMobile } from "./utils/devices";
 import { Helpers } from "./helpers";
 import { settings } from "../src/settings";
-import { AnimationGroup, IAnimationConsumer } from "./utils/animation";
+import { AnimationGroup, IAnimationGroupConsumer } from "./utils/animation";
 import { DragOrClickHelper } from "./utils/dragOrClickHelper";
+import { classesToSelector } from "./utils/utils";
 
 /**
  * A class that describes the Ranking question type.
@@ -23,8 +24,6 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
 
   constructor(name: string) {
     super(name);
-    this.createNewArray("rankingChoices");
-    this.createNewArray("unRankingChoices");
     this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", () => {
       this.clearValue(true);
       this.setDragDropRankingChoices();
@@ -71,23 +70,9 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     return true;
   }
   protected getItemClassCore(item: ItemValue, options: any): string {
-    const itemIndex = this.rankingChoices.indexOf(item);
-    const unrankedItemIndex = this.unRankingChoices.indexOf(item);
-    const dropTargetIndex = this.rankingChoices.indexOf(this.currentDropTarget);
-
-    let isDrop = (this.selectToRankEnabled && itemIndex > -1 && unrankedItemIndex > -1) || this.currentDropTarget === item;
-
     return new CssClassBuilder()
       .append(super.getItemClassCore(item, options))
-      .append(this.cssClasses.itemGhostMod, isDrop)
-      .append(
-        "sv-dragdrop-movedown",
-        itemIndex === dropTargetIndex + 1 && this.dropTargetNodeMove === "down"
-      )
-      .append(
-        "sv-dragdrop-moveup",
-        itemIndex === dropTargetIndex - 1 && this.dropTargetNodeMove === "up"
-      )
+      .append(this.cssClasses.itemGhostMod, this.currentDropTarget === item)
       .toString();
   }
 
@@ -97,9 +82,9 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     const isFromContainer = containerType === "from";
 
     if (isToContainer) {
-      isEmpty = this.rankingChoices.length === 0;
+      isEmpty = this.renderedRankingChoices.length === 0;
     } else if (isFromContainer) {
-      isEmpty = this.unRankingChoices.length === 0;
+      isEmpty = this.renderedUnRankingChoices.length === 0;
     }
 
     return new CssClassBuilder()
@@ -159,7 +144,12 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   onSurveyValueChanged(newValue: any) {
     super.onSurveyValueChanged(newValue);
     if (this.isLoadingFromJson) return;
-    this.updateRankingChoicesSync();
+    this.updateRankingChoices();
+  }
+  onSurveyLoad(): void {
+    this.blockAnimations();
+    super.onSurveyLoad();
+    this.releaseAnimations();
   }
 
   protected onVisibleChoicesChanged = (): void => {
@@ -173,17 +163,17 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     if (this.visibleChoices.length === 1 && !this.selectToRankEnabled) {
       this.value = [];
       this.value.push(this.visibleChoices[0].value);
-      this.updateRankingChoicesSync();
+      this.updateRankingChoices();
       return;
     }
 
     if (this.isEmpty()) {
-      this.updateRankingChoicesSync();
+      this.updateRankingChoices();
       return;
     }
 
     if (this.selectToRankEnabled) {
-      this.updateRankingChoicesSync();
+      this.updateRankingChoices();
       return;
     }
 
@@ -191,7 +181,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
       this.addToValueByVisibleChoices();
     if (this.visibleChoices.length < this.value.length)
       this.removeFromValueByVisibleChoices();
-    this.updateRankingChoicesSync();
+    this.updateRankingChoices();
   };
 
   public localeChanged = (): void => {
@@ -221,54 +211,101 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     this.value = newValue;
   }
 
-  private getChoicesAnimation(isRankingChoices: boolean): IAnimationConsumer<[ItemValue]> {
+  private getChoicesAnimationOptions(isRankingChoices: boolean): Required<IAnimationGroupConsumer<ItemValue>> {
     return {
-      isAnimationEnabled: () => this.animationAllowed,
+      getKey(item: ItemValue) {
+        return item.value;
+      },
+      getRerenderEvent: () => {
+        return this.onElementRerendered;
+      },
+      isAnimationEnabled: () => this.animationAllowed && !this.isDesignMode && this.isVisible && !!this.domNode,
+      getReorderOptions: (item: ItemValue, movedForward: boolean) => {
+        let cssClass = "";
+        if(item !== this.currentDropTarget) {
+          cssClass = movedForward ? "sv-dragdrop-movedown" : "sv-dragdrop-moveup";
+        }
+        return { cssClass };
+      },
       getLeaveOptions: (item: ItemValue) => {
-        const choices = isRankingChoices ? this.rankingChoices : this.unRankingChoices;
+        const choices = isRankingChoices ? this.renderedRankingChoices : this.renderedUnRankingChoices;
         if(this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
           return { cssClass: "sv-ranking-item--animate-item-removing-empty" };
         }
         return { cssClass: "sv-ranking-item--animate-item-removing" };
       },
       getEnterOptions: (item: ItemValue) => {
-        const choices = isRankingChoices ? this.rankingChoices : this.unRankingChoices;
+        const choices = isRankingChoices ? this.renderedRankingChoices : this.renderedUnRankingChoices;
         if(this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
           return { cssClass: "sv-ranking-item--animate-item-adding-empty" };
         }
         return { cssClass: "sv-ranking-item--animate-item-adding" };
       },
       getAnimatedElement: (item: ItemValue) => {
-        const containerSelector = isRankingChoices ? ".sv-ranking__container--to" : ".sv-ranking__container--from";
-        return this.getWrapperElement()?.querySelector(`${containerSelector} .sv-ranking-item--ghost`);
+        const cssClasses = this.cssClasses;
+        let containerSelector = "";
+        if(this.selectToRankEnabled) {
+          if(!isRankingChoices && cssClasses.containerFromMode) {
+            containerSelector = classesToSelector(cssClasses.containerFromMode);
+          } else if(isRankingChoices && cssClasses.containerToMode) {
+            containerSelector = classesToSelector(cssClasses.containerToMode);
+          }
+        }
+        const index = isRankingChoices ? this.renderedRankingChoices.indexOf(item) : this.renderedUnRankingChoices.indexOf(item);
+        return this.domNode?.querySelector(`${containerSelector} [data-sv-drop-target-ranking-item='${index}']`);
       }
     };
   }
 
-  private _rankingChoicesAnimation = new AnimationGroup(this.getChoicesAnimation(true), (val) => {
-    this.setPropertyValue("rankingChoices", val);
-  }, () => this.rankingChoices)
+  private _rankingChoicesAnimation = new AnimationGroup(this.getChoicesAnimationOptions(true), (val) => {
+    this._renderedRankingChoices = val;
+  }, () => this.renderedRankingChoices)
   public get rankingChoicesAnimation(): AnimationGroup<ItemValue> {
     return this._rankingChoicesAnimation;
   }
-  private _unRankingChoicesAnimation = new AnimationGroup(this.getChoicesAnimation(false), (val) => {
-    this.setPropertyValue("unRankingChoices", val);
-  }, () => this.unRankingChoices)
+  private _unRankingChoicesAnimation = new AnimationGroup(this.getChoicesAnimationOptions(false), (val) => {
+    this._renderedUnRankingChoices = val;
+  }, () => this.renderedUnRankingChoices)
   public get unRankingChoicesAnimation(): AnimationGroup<ItemValue> {
     return this._unRankingChoicesAnimation;
   }
 
-  public get rankingChoices(): Array<ItemValue> {
-    return this.getPropertyValue("rankingChoices", []);
+  @propertyArray(
+    {
+      onSet: (val, target: QuestionRankingModel) => target.updateRenderedRankingChoices(),
+      onRemove: (_: ItemValue, _i: number, target: QuestionRankingModel) => target.updateRenderedRankingChoices(),
+      onPush: (_: ItemValue, _i: number, target: QuestionRankingModel) => target.updateRenderedRankingChoices(),
+    }) public rankingChoices: Array<ItemValue> = [];
+  @propertyArray(
+    { onSet: (val, target: QuestionRankingModel) => target.updateRenderedUnRankingChoices(),
+      onRemove: (_: ItemValue, _i: number, target: QuestionRankingModel) => target.updateRenderedUnRankingChoices(),
+      onPush: (_: ItemValue, _i: number, target: QuestionRankingModel) => target.updateRenderedUnRankingChoices(),
+    }
+  ) public unRankingChoices: Array<ItemValue> = [];
+
+  @propertyArray() private _renderedRankingChoices: Array<ItemValue> = [];
+  @propertyArray() private _renderedUnRankingChoices: Array<ItemValue> = [];
+
+  public get renderedRankingChoices(): Array<ItemValue> {
+    return this._renderedRankingChoices;
   }
-  public set rankingChoices(val) {
-    this._rankingChoicesAnimation.sync(val);
+
+  public set renderedRankingChoices(val: Array<ItemValue>) {
+    this.rankingChoicesAnimation.sync(val);
+  }
+  public get renderedUnRankingChoices(): Array<ItemValue> {
+    return this._renderedUnRankingChoices;
   }
-  public get unRankingChoices(): Array<ItemValue> {
-    return this.getPropertyValue("unRankingChoices", []);
+  public set renderedUnRankingChoices(val: Array<ItemValue>) {
+    this.unRankingChoicesAnimation.sync(val);
+  }
+
+  private updateRenderedRankingChoices() {
+    this.renderedRankingChoices = this.rankingChoices;
   }
-  public set unRankingChoices(val) {
-    this._unRankingChoicesAnimation.sync(val);
+
+  private updateRenderedUnRankingChoices() {
+    this.renderedUnRankingChoices = this.unRankingChoices;
   }
 
   private updateRankingChoices(forceUpdate = false): ItemValue[] {
@@ -285,10 +322,10 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     //   return;
     // }
 
-    if (forceUpdate) this.setPropertyValue("rankingChoices", []);
+    if (forceUpdate) this.rankingChoices = [];
 
     if (this.isEmpty()) {
-      this.setPropertyValue("rankingChoices", this.visibleChoices);
+      this.rankingChoices = this.visibleChoices;
       return;
     }
 
@@ -297,7 +334,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
         if (choice.value === valueItem) newRankingChoices.push(choice);
       });
     });
-    this.setPropertyValue("rankingChoices", newRankingChoices);
+    this.rankingChoices = newRankingChoices;
   }
   public updateUnRankingChoices(newRankingChoices: Array<ItemValue>) {
     const unRankingChoices: ItemValue[] = [];
@@ -326,7 +363,6 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
 
   public dragDropRankingChoices: DragDropRankingChoices;
   @property({ defaultValue: null }) currentDropTarget: ItemValue;
-  @property({ defaultValue: null }) dropTargetNodeMove: string;
 
   endLoadingFromJson(): void {
     super.endLoadingFromJson();
@@ -424,26 +460,23 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   }
   //cross framework destroy
   public beforeDestroyQuestionElement(el: HTMLElement): void {
+    this.domNode = undefined;
     super.beforeDestroyQuestionElement(el);
   }
 
   public handleKeydown = (event: KeyboardEvent, choice: ItemValue): void => {
     if (!this.isDesignMode) {
       const key: any = event.key;
-      let index = this.rankingChoices.indexOf(choice);
+      const index = this.rankingChoices.indexOf(choice);
 
       if (this.selectToRankEnabled) {
         this.handleKeydownSelectToRank(event, choice);
         return;
       }
-
-      if (key === "ArrowUp" && index) {
-        this.handleArrowKeys(index, choice, false);
-        event.preventDefault();
-      }
-      if (key === "ArrowDown" && index !== this.rankingChoices.length - 1) {
-        this.handleArrowKeys(index, choice, true);
-        event.preventDefault();
+      if((key === "ArrowUp" && index) || (key === "ArrowDown" && index !== this.rankingChoices.length - 1)) {
+        const toIndex = key == "ArrowUp" ? index - 1 : index + 1;
+        this.dragDropRankingChoices.reorderRankedItem(this, index, toIndex);
+        this.setValueAfterKeydown(toIndex, "", true, event);
       }
     }
   };
@@ -454,17 +487,6 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   public supportRefuse(): boolean { return false; }
   public supportDontKnow(): boolean { return false; }
 
-  private handleArrowKeys = (index: number, choice: ItemValue, isDown: boolean) => {
-    const delta = isDown ? 1 : -1;
-    const choices = this.rankingChoices;
-    choices.splice(index, 1);
-    choices.splice(index + delta, 0, choice);
-    this.setValue();
-    setTimeout(() => {
-      this.focusItem(index + delta);
-    }, 1);
-  }
-
   public handleKeydownSelectToRank(event: KeyboardEvent, movedElement: ItemValue, hardKey?:string, isNeedFocus: boolean = true): void {
     if (this.isDesignMode) return;
 
@@ -483,19 +505,15 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     if (key === " " && !isMovedElementRanked) {
       if (!this.checkMaxSelectedChoicesUnreached() || !this.canStartDragDueItemEnabled(movedElement)) return;
       toIndex = this.value.length;
-      this.blockAnimations();
       dnd.selectToRank(this, fromIndex, toIndex);
-      this.releaseAnimations();
-      this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
+      this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus, event);
       return;
     }
     if(!isMovedElementRanked) return;
     if (key === " ") {
-      this.blockAnimations();
       dnd.unselectFromRank(this, fromIndex);
-      this.releaseAnimations();
       toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
-      this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus);
+      this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus, event);
       return;
     }
     const delta = key === "ArrowUp" ? -1 : (key === "ArrowDown" ? 1 : 0);
@@ -503,10 +521,10 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     toIndex = fromIndex + delta;
     if(toIndex < 0 || toIndex >= rankingChoices.length) return;
     dnd.reorderRankedItem(this, fromIndex, toIndex);
-    this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
+    this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus, event);
   }
 
-  private setValueAfterKeydown(index: number, container: string, isNeedFocus: boolean = true) {
+  private setValueAfterKeydown(index: number, container: string, isNeedFocus: boolean = true, event: KeyboardEvent) {
     this.setValue();
 
     if (isNeedFocus) {
@@ -514,11 +532,11 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
         this.focusItem(index, container);
       }, 1);
     }
-
     event && event.preventDefault();
   }
 
   private focusItem = (index: number, container?: string) => {
+    if(!this.domNode) return;
     if (this.selectToRankEnabled && container) {
       const containerSelector = "[data-ranking='" + container + "']";
       const itemsNodes: any = this.domNode.querySelectorAll(
@@ -536,8 +554,6 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   public isValueSetByUser = false;
   public setValue = (): void => {
     const value: string[] = [];
-    this.rankingChoicesAnimation.cancel();
-    this.unRankingChoicesAnimation.cancel();
     this.rankingChoices.forEach((choice: ItemValue) => {
       value.push(choice.value);
     });
diff --git a/src/react/reactquestion_element.tsx b/src/react/reactquestion_element.tsx
index ea29082ae2..461aaeaadf 100644
--- a/src/react/reactquestion_element.tsx
+++ b/src/react/reactquestion_element.tsx
@@ -18,7 +18,7 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   }
   public static renderQuestionDescription(question: Question | PanelModel): JSX.Element {
     var descriptionText = SurveyElementBase.renderLocString(question.locDescription);
-    return <div style={question.hasDescription ? undefined : { display: "none" } } id={question.ariaDescriptionId} className={question.cssDescription}>{descriptionText}</div>;
+    return <div style={question.hasDescription ? undefined : { display: "none" }} id={question.ariaDescriptionId} className={question.cssDescription}>{descriptionText}</div>;
   }
   private changedStatePropNameValue: string | undefined;
   constructor(props: any) {
@@ -32,6 +32,9 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   }
   componentDidUpdate(prevProps: any, prevState: any) {
     this.makeBaseElementsReact();
+    this.getStateElements().forEach((el) => {
+      el.afterRerender();
+    });
   }
   private _allowComponentUpdate = true;
   protected allowComponentUpdate() {
@@ -41,8 +44,8 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   protected denyComponentUpdate() {
     this._allowComponentUpdate = false;
   }
-  shouldComponentUpdate(nextProps:any, nextState:any):boolean {
-    if(this._allowComponentUpdate) {
+  shouldComponentUpdate(nextProps: any, nextState: any): boolean {
+    if (this._allowComponentUpdate) {
       this.unMakeBaseElementsReact();
     }
     return this._allowComponentUpdate;
@@ -56,7 +59,7 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
     var res = this.renderElement();
     this.startEndRendering(-1);
 
-    if(!!res) {
+    if (!!res) {
       res = this.wrapElement(res);
     }
 
@@ -68,8 +71,8 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   }
   protected get isRendering(): boolean {
     var stateEls: Array<any> = this.getRenderedElements();
-    for(let stateEl of stateEls) {
-      if(stateEl.reactRendering > 0) return true;
+    for (let stateEl of stateEls) {
+      if (stateEl.reactRendering > 0) return true;
     }
     return false;
   }
@@ -78,7 +81,7 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   }
   private startEndRendering(val: number) {
     var stateEls: Array<any> = this.getRenderedElements();
-    for(let stateEl of stateEls) {
+    for (let stateEl of stateEls) {
       if (!stateEl.reactRendering) stateEl.reactRendering = 0;
       stateEl.reactRendering += val;
     }
@@ -95,12 +98,14 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   private makeBaseElementsReact() {
     var els = this.getStateElements();
     for (var i = 0; i < els.length; i++) {
+      els[i].enableOnElementRenderedEvent();
       this.makeBaseElementReact(els[i]);
     }
   }
   private unMakeBaseElementsReact() {
     var els = this.getStateElements();
     for (var i = 0; i < els.length; i++) {
+      els[i].disableOnElementRenderedEvent();
       this.unMakeBaseElementReact(els[i]);
     }
   }
@@ -125,6 +130,7 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
   private canMakeReact(stateElement: Base): boolean {
     return !!stateElement && !!stateElement.iteratePropertiesHash;
   }
+
   private makeBaseElementReact(stateElement: Base) {
     if (!this.canMakeReact(stateElement)) return;
     stateElement.iteratePropertiesHash((hash, key) => {
@@ -171,7 +177,7 @@ export class SurveyElementBase<P, S> extends React.Component<P, S> {
       var val: any = hash[key];
       if (Array.isArray(val)) {
         var val: any = val;
-        val["onArrayChanged"] = () => {};
+        val["onArrayChanged"] = () => { };
       }
     });
   }
@@ -264,7 +270,7 @@ export class SurveyQuestionElementBase extends SurveyElementBase<any, any> {
     return wrapper ?? element;
   }
   public setControl(element: HTMLElement | null): void {
-    if(!!element) {
+    if (!!element) {
       this.control = element;
     }
   }
diff --git a/src/react/reactquestion_ranking.tsx b/src/react/reactquestion_ranking.tsx
index c0a87f190d..ffc5fdd9eb 100644
--- a/src/react/reactquestion_ranking.tsx
+++ b/src/react/reactquestion_ranking.tsx
@@ -31,22 +31,22 @@ export class SurveyQuestionRanking extends SurveyQuestionElementBase {
           ref={(root) => (this.setControl(root))}
         >
           <div className={this.question.getContainerClasses("from")} data-ranking="from-container">
-            {this.getItems(this.question.unRankingChoices, unrankedItem)}
-            {this.question.unRankingChoices.length === 0 ? <div className={this.question.cssClasses.containerPlaceholder}> {this.renderLocString(this.question.locSelectToRankEmptyRankedAreaText)} </div> : null}
+            {this.getItems(this.question.renderedUnRankingChoices, unrankedItem)}
+            {this.question.renderedUnRankingChoices.length === 0 ? <div className={this.question.cssClasses.containerPlaceholder}> {this.renderLocString(this.question.locSelectToRankEmptyRankedAreaText)} </div> : null}
           </div>
 
           <div className={this.question.cssClasses.containersDivider}></div>
 
           <div className={this.question.getContainerClasses("to")} data-ranking="to-container">
             {this.getItems()}
-            {this.question.rankingChoices.length === 0 ? <div className={this.question.cssClasses.containerPlaceholder}> {this.renderLocString(this.question.locSelectToRankEmptyUnrankedAreaText)} </div> : null}
+            {this.question.renderedRankingChoices.length === 0 ? <div className={this.question.cssClasses.containerPlaceholder}> {this.renderLocString(this.question.locSelectToRankEmptyUnrankedAreaText)} </div> : null}
           </div>
         </div>
       );
     }
   }
 
-  protected getItems(choices: any = this.question.rankingChoices, unrankedItem?: boolean): Array<any> {
+  protected getItems(choices: any = this.question.renderedRankingChoices, unrankedItem?: boolean): Array<any> {
     const items: Array<JSX.Element> = [];
     for (let i = 0; i < choices.length; i++) {
       const item = choices[i];
diff --git a/src/survey-element.ts b/src/survey-element.ts
index a8ce85acf5..7ad1ab8bbc 100644
--- a/src/survey-element.ts
+++ b/src/survey-element.ts
@@ -166,11 +166,11 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
 
   public readOnlyChangedCallback: () => void;
 
-  public static ScrollElementToTop(elementId: string, scrollIfVisible?: boolean): boolean {
+  public static ScrollElementToTop(elementId: string, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions): boolean {
     const { root } = settings.environment;
     if (!elementId || typeof root === "undefined") return false;
     const el = root.getElementById(elementId);
-    return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
+    return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions);
   }
   public static ScrollElementToViewCore(el: HTMLElement, checkLeft: boolean, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions): boolean {
     if (!el || !el.scrollIntoView) return false;
@@ -1063,7 +1063,8 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   private get isAnimatingCollapseExpand() {
     return this._isAnimatingCollapseExpand || this._renderedIsExpanded != this.isExpanded;
   }
-
+  protected onElementExpanded(elementIsRendered: boolean) {
+  }
   private getExpandCollapseAnimationOptions(): IAnimationConsumer {
     const beforeRunAnimation = (el: HTMLElement) => {
       this.isAnimatingCollapseExpand = true;
@@ -1073,12 +1074,16 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
       this.isAnimatingCollapseExpand = false;
     };
     return {
+      getRerenderEvent: () => this.onElementRerendered,
       getEnterOptions: () => {
         const cssClasses = this.isPanel ? this.cssClasses.panel : this.cssClasses;
         return {
           cssClass: cssClasses.contentFadeIn,
           onBeforeRunAnimation: beforeRunAnimation,
-          onAfterRunAnimation: afterRunAnimation,
+          onAfterRunAnimation: (el) => {
+            afterRunAnimation(el);
+            this.onElementExpanded(true);
+          },
         };
       },
       getLeaveOptions: () => {
@@ -1098,10 +1103,14 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
         }
         return undefined;
       },
-      isAnimationEnabled: () => this.animationAllowed && !this.isDesignMode
+      isAnimationEnabled: () => this.isExpandCollapseAnimationEnabled
     };
   }
 
+  private get isExpandCollapseAnimationEnabled() {
+    return this.animationAllowed && !this.isDesignMode;
+  }
+
   private animationCollapsed = new AnimationBoolean(this.getExpandCollapseAnimationOptions(), (val) => {
     this._renderedIsExpanded = val;
     if(this.animationAllowed) {
@@ -1113,7 +1122,11 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
     }
   }, () => this.renderedIsExpanded);
   public set renderedIsExpanded(val: boolean) {
+    const oldValue = this._renderedIsExpanded;
     this.animationCollapsed.sync(val);
+    if(!this.isExpandCollapseAnimationEnabled && !oldValue && this.renderedIsExpanded) {
+      this.onElementExpanded(false);
+    }
   }
 
   public get renderedIsExpanded(): boolean {
diff --git a/src/survey.ts b/src/survey.ts
index 84069724d2..ff847bc618 100644
--- a/src/survey.ts
+++ b/src/survey.ts
@@ -5139,7 +5139,7 @@ export class SurveyModel extends SurveyElementCore
     element: ISurveyElement,
     question: Question,
     page: PageModel,
-    id: string, scrollIfVisible?: boolean
+    id: string, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions
   ): any {
     const options: ScrollingElementToTopEvent = {
       element: element,
@@ -5150,7 +5150,7 @@ export class SurveyModel extends SurveyElementCore
     };
     this.onScrollingElementToTop.fire(this, options);
     if (!options.cancel) {
-      SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible);
+      SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions);
     }
   }
 
diff --git a/src/utils/animation.ts b/src/utils/animation.ts
index 32133f2395..737aac7c8b 100644
--- a/src/utils/animation.ts
+++ b/src/utils/animation.ts
@@ -1,5 +1,7 @@
-import { DomWindowHelper } from "../global_variables_utils";
 import { debounce } from "./taskmanager";
+import { compareArrays } from "./utils";
+import { EventBase, Base } from "../base";
+import { DomWindowHelper } from "../global_variables_utils";
 
 export interface AnimationOptions{
   cssClass: string;
@@ -8,10 +10,23 @@ export interface AnimationOptions{
 }
 
 export interface IAnimationConsumer<T extends Array<any> = []> {
-  getLeaveOptions(...args: T): AnimationOptions;
-  getEnterOptions(...args: T): AnimationOptions;
+  getLeaveOptions?(...args: T): AnimationOptions;
+  getEnterOptions?(...args: T): AnimationOptions;
   getAnimatedElement(...args: T): HTMLElement;
   isAnimationEnabled(): boolean;
+  getRerenderEvent(): EventBase<Base>;
+}
+
+interface IGroupAnimationInfo {
+  isReorderingRunning: boolean;
+  isDeletingRunning: boolean;
+  isAddingRunning: boolean;
+}
+export interface IAnimationGroupConsumer<T> extends IAnimationConsumer<[T]> {
+  getLeaveOptions?(item: T, info? : IGroupAnimationInfo): AnimationOptions;
+  getEnterOptions?(item: T, info?: IGroupAnimationInfo): AnimationOptions;
+  getReorderOptions?(item: T, movedForward: boolean, info?: IGroupAnimationInfo): AnimationOptions;
+  getKey?: (item: T) => any;
 }
 
 export class AnimationUtils {
@@ -54,7 +69,7 @@ export class AnimationUtils {
     let cancelTimeout: any;
     let animationsCount = this.getAnimationsCount(element);
     const onEndCallback = (isCancel: boolean = true) => {
-      options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+      this.afterAnimationRun(element, options);
       callback(isCancel);
       clearTimeout(cancelTimeout);
       this.removeCancelCallback(onEndCallback);
@@ -72,10 +87,17 @@ export class AnimationUtils {
         onEndCallback(false);
       }, this.getAnimationDuration(element) + 10);
     } else {
+      this.afterAnimationRun(element, options);
       callback(true);
     }
   }
 
+  protected afterAnimationRun(element: HTMLElement, options: AnimationOptions | AnimationOptions): void {
+    if(element && options) {
+      options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+    }
+  }
+
   protected beforeAnimationRun(element: HTMLElement, options: AnimationOptions | AnimationOptions): void {
     if(element && options) {
       options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
@@ -85,7 +107,7 @@ export class AnimationUtils {
     return options.cssClass.replace(/\s+$/, "").split(/\s+/);
   }
   protected runAnimation(element: HTMLElement, options: AnimationOptions, callback: (isCancel?: boolean) => void): void {
-    if(element && options.cssClass) {
+    if(element && options?.cssClass) {
       this.reflow(element);
       this.getCssClasses(options).forEach((cssClass) => {
         element.classList.add(cssClass);
@@ -103,26 +125,21 @@ export class AnimationUtils {
     }
   }
 
-  protected onNextRender(callback: () => void, runEarly?: () => boolean, isCancel: boolean = false): void {
+  protected onNextRender(callback: (isCancel?: boolean) => void, isCancel: boolean = false): void {
     if(!isCancel && DomWindowHelper.isAvailable()) {
       const cancelCallback = () => {
-        callback();
+        callback(true);
         cancelAnimationFrame(latestRAF);
       };
       let latestRAF = DomWindowHelper.requestAnimationFrame(() => {
-        if(runEarly && runEarly()) {
-          callback();
+        latestRAF = DomWindowHelper.requestAnimationFrame(() => {
+          callback(false);
           this.removeCancelCallback(cancelCallback);
-        } else {
-          latestRAF = DomWindowHelper.requestAnimationFrame(() => {
-            callback();
-            this.removeCancelCallback(cancelCallback);
-          });
-        }
+        });
       });
       this.addCancelCallback(cancelCallback);
     } else {
-      callback();
+      callback(true);
     }
   }
 
@@ -135,72 +152,108 @@ export class AnimationUtils {
 
 export class AnimationPropertyUtils extends AnimationUtils {
   public onEnter(options: IAnimationConsumer): void {
-    this.onNextRender(
-      () => {
-        const htmlElement = options.getAnimatedElement();
-        const enterOptions = options.getEnterOptions();
-        this.beforeAnimationRun(htmlElement, enterOptions);
-        this.runAnimation(htmlElement, enterOptions, () => {
-          this.clearHtmlElement(htmlElement, enterOptions);
-        });
-      },
-      () => !!options.getAnimatedElement());
+    const htmlElement = options.getAnimatedElement();
+    const enterOptions: AnimationOptions = options.getEnterOptions ? options.getEnterOptions() : {} as any;
+    this.beforeAnimationRun(htmlElement, enterOptions);
+    this.runAnimation(htmlElement, enterOptions, () => {
+      this.clearHtmlElement(htmlElement, enterOptions);
+    });
   }
   public onLeave(options: IAnimationConsumer, callback: () => void): void {
     const htmlElement = options.getAnimatedElement();
-    const leaveOptions = options.getLeaveOptions();
+    const leaveOptions: AnimationOptions = options.getLeaveOptions ? options.getLeaveOptions() : {} as any;
     this.beforeAnimationRun(htmlElement, leaveOptions);
     this.runAnimation(htmlElement, leaveOptions, (isCancel) => {
       callback();
       this.onNextRender(() => {
         this.clearHtmlElement(htmlElement, leaveOptions);
-      }, undefined, isCancel);
+      }, isCancel);
     });
   }
 }
 export class AnimationGroupUtils<T> extends AnimationUtils {
-  public runGroupAnimation(options: IAnimationConsumer<[T]>, addedElements: Array<T>, removedElements: Array<T>, callback?: () => void): void {
-    this.onNextRender(
-      () => {
-        const addedHtmlElements = addedElements.map((el) => options.getAnimatedElement(el));
-        const enterOptions = addedElements.map((el) => options.getEnterOptions(el));
-        const removedHtmlElements = removedElements.map((el) => options.getAnimatedElement(el));
-        const leaveOptions = removedElements.map((el) => options.getLeaveOptions(el));
-        addedElements.forEach((_, i) => {
-          this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
-        });
-        removedElements.forEach((_, i) => {
-          this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
-        });
-        let counter = addedElements.length + removedElements.length;
-        const onAnimationEndCallback = (isCancel: boolean) => {
-          if(--counter <=0) {
-            callback && callback();
-            this.onNextRender(() => {
-              addedElements.forEach((_, i) => {
-                this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
-              });
-              removedElements.forEach((_, i) => {
-                this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
-              });
-            }, undefined, isCancel);
-          }
-        };
-        addedElements.forEach((_, i) => {
-          this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
-        });
-        removedElements.forEach((_, i) => {
-          this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
-        });
-      },
-      () => addedElements.length == 0 || addedElements.some(el => !!options.getAnimatedElement(el)));
+  public runGroupAnimation(options: IAnimationGroupConsumer<T>, addedItems: Array<T>, removedItems: Array<T>, reorderedItems: Array<{ item: T, movedForward: boolean }>, callback?: () => void): void {
+    const info: IGroupAnimationInfo = {
+      isAddingRunning: addedItems.length > 0,
+      isDeletingRunning: removedItems.length > 0,
+      isReorderingRunning: reorderedItems.length > 0
+    };
+    const addedHtmlElements = addedItems.map((el) => options.getAnimatedElement(el));
+    const enterOptions: Array<AnimationOptions> = addedItems.map((el) => options.getEnterOptions ? options.getEnterOptions(el, info) : {} as any);
+    const removedHtmlElements = removedItems.map((el) => options.getAnimatedElement(el));
+    const leaveOptions: Array<AnimationOptions> = removedItems.map((el) => options.getLeaveOptions ? options.getLeaveOptions(el, info) : {} as any);
+    const reorderedHtmlElements = reorderedItems.map(el => options.getAnimatedElement(el.item));
+    const reorderedOptions: Array<AnimationOptions> = reorderedItems.map(el => options.getReorderOptions ? options.getReorderOptions(el.item, el.movedForward, info) : {} as any);
+    addedItems.forEach((_, i) => {
+      this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
+    });
+    removedItems.forEach((_, i) => {
+      this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
+    });
+    reorderedItems.forEach((_, i) => {
+      this.beforeAnimationRun(reorderedHtmlElements[i], reorderedOptions[i]);
+    });
+    let counter = addedItems.length + removedItems.length + reorderedHtmlElements.length;
+    const onAnimationEndCallback = (isCancel: boolean) => {
+      if(--counter <=0) {
+        callback && callback();
+        this.onNextRender(() => {
+          addedItems.forEach((_, i) => {
+            this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
+          });
+          removedItems.forEach((_, i) => {
+            this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
+          });
+          reorderedItems.forEach((_, i) => {
+            this.clearHtmlElement(reorderedHtmlElements[i], reorderedOptions[i]);
+          });
+        }, isCancel);
+      }
+    };
+    addedItems.forEach((_, i) => {
+      this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
+    });
+    removedItems.forEach((_, i) => {
+      this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
+    });
+    reorderedItems.forEach((_, i) => {
+      this.runAnimation(reorderedHtmlElements[i], reorderedOptions[i], onAnimationEndCallback);
+    });
   }
 }
 
-export abstract class AnimationProperty<T, S extends Array<any> = []> {
-  constructor(protected animationOptions: IAnimationConsumer<S>, protected update: (val: T, isTempUpdate?: boolean) => void, protected getCurrentValue: () => T) {
+export abstract class AnimationProperty<T, S extends IAnimationConsumer<any> = IAnimationConsumer> {
+  constructor(protected animationOptions: S, protected update: (val: T, isTempUpdate?: boolean) => void, protected getCurrentValue: () => T) {
   }
   protected animation: AnimationUtils;
+  protected onNextRender(callback: () => void, onCancel?: () => void): void {
+    const rerenderEvent = this.animationOptions.getRerenderEvent();
+    if(!rerenderEvent) {
+      const raf = requestAnimationFrame(() => {
+        callback();
+        this.cancelCallback = undefined;
+      });
+      this.cancelCallback = () => {
+        onCancel && onCancel();
+        cancelAnimationFrame(raf);
+        this.cancelCallback = undefined;
+      };
+    } else {
+      const clear = () => {
+        rerenderEvent.remove(nextRenderCallback);
+        this.cancelCallback = undefined;
+      };
+      const nextRenderCallback = () => {
+        callback();
+        clear();
+      };
+      this.cancelCallback = () => {
+        onCancel && onCancel();
+        clear();
+      };
+      rerenderEvent.add(nextRenderCallback);
+    }
+  }
   protected abstract _sync(newValue: T): void;
   private _debouncedSync = debounce((newValue: T) => {
     this.animation.cancel();
@@ -214,9 +267,11 @@ export abstract class AnimationProperty<T, S extends Array<any> = []> {
       this.update(newValue);
     }
   }
-  cancel() {
-    this.animation.cancel();
+  private cancelCallback: () => void;
+  cancel(): void {
     this._debouncedSync.cancel();
+    this.cancelCallback && this.cancelCallback();
+    this.animation.cancel();
   }
 }
 
@@ -225,8 +280,10 @@ export class AnimationBoolean extends AnimationProperty<boolean> {
   protected _sync(newValue: boolean): void {
     if(newValue !== this.getCurrentValue()) {
       if(newValue) {
+        this.onNextRender(() => {
+          this.animation.onEnter(this.animationOptions);
+        });
         this.update(newValue);
-        this.animation.onEnter(this.animationOptions);
       } else {
         this.animation.onLeave(this.animationOptions, () => {
           this.update(newValue);
@@ -238,33 +295,52 @@ export class AnimationBoolean extends AnimationProperty<boolean> {
   }
 }
 
-export class AnimationGroup<T> extends AnimationProperty<Array<T>, [T]> {
+export class AnimationGroup<T> extends AnimationProperty<Array<T>, IAnimationGroupConsumer<T>> {
   protected animation: AnimationGroupUtils<T> = new AnimationGroupUtils();
   protected _sync (newValue: Array<T>): void {
     const oldValue = this.getCurrentValue();
-    const itemsToAdd = newValue.filter(el => oldValue.indexOf(el) < 0);
-    const deletedItems = oldValue.filter(el => newValue.indexOf(el) < 0);
-    if (itemsToAdd.length == 0 && deletedItems?.length > 0) {
-      this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, () => this.update(newValue));
-    } else {
+    try {
+      const { addedItems, deletedItems, reorderedItems, mergedItems } = compareArrays(oldValue, newValue, this.animationOptions.getKey ?? ((item: T) => item));
+      const runAnimationCallback = () => {
+        this.animation.runGroupAnimation(this.animationOptions, addedItems, deletedItems, reorderedItems, () => {
+          if(deletedItems.length > 0) {
+            this.update(newValue);
+          }
+        });
+      };
+      if([addedItems, deletedItems, reorderedItems].some((arr) => arr.length > 0)) {
+        if(deletedItems.length <= 0 || reorderedItems.length > 0 || addedItems.length > 0) {
+          this.onNextRender(runAnimationCallback, () => {
+            this.update(newValue);
+          });
+          this.update(mergedItems);
+        } else {
+          runAnimationCallback();
+        }
+      } else {
+        this.update(newValue);
+      }
+
+    } catch {
       this.update(newValue);
-      this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
     }
   }
 }
-export class AnimationTab<T> extends AnimationProperty<Array<T>, [T]> {
+export class AnimationTab<T> extends AnimationProperty<Array<T>, IAnimationGroupConsumer<T>> {
   protected animation: AnimationGroupUtils<T> = new AnimationGroupUtils();
-  constructor(animationOptions: IAnimationConsumer<[T]>, update: (val: Array<T>, isTempUpdate?: boolean) => void, getCurrentValue: () => Array<T>, protected mergeValues?: (newValue: Array<T>, oldValue: Array<T>) => Array<T>) {
+  constructor(animationOptions: IAnimationGroupConsumer<T>, update: (val: Array<T>, isTempUpdate?: boolean) => void, getCurrentValue: () => Array<T>, protected mergeValues?: (newValue: Array<T>, oldValue: Array<T>) => Array<T>) {
     super(animationOptions, update, getCurrentValue);
   }
   protected _sync(newValue: [T]): void {
     const oldValue = [].concat(this.getCurrentValue());
     if(oldValue[0] !== newValue[0]) {
       const tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+      this.onNextRender(() => {
+        this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, [], () => {
+          this.update(newValue);
+        });
+      }, () => this.update(newValue));
       this.update(tempValue, true);
-      this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, () => {
-        this.update(newValue);
-      });
     } else {
       this.update(newValue);
     }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 775e7a01f4..45a16e2ff8 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -4,7 +4,6 @@ import { IDialogOptions } from "../popup";
 import { surveyLocalization } from "../surveyStrings";
 import { PopupBaseViewModel } from "../popup-view-model";
 import { DomDocumentHelper, DomWindowHelper } from "../global_variables_utils";
-
 function compareVersions(a: any, b: any) {
   const regExStrip0: RegExp = /(\.0+)+$/;
   const segmentsA: string[] = a.replace(regExStrip0, "").split(".");
@@ -470,6 +469,102 @@ function chooseFiles(input: HTMLInputElement, callback: (files: File[]) => void)
   };
   input.click();
 }
+export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey: (item: T) => any): { addedItems: Array<T>, deletedItems: Array<T>, reorderedItems: Array<{ item: T, movedForward: boolean }>, mergedItems: Array<T> } {
+  const oldItemsMap = new Map<any, T>();
+  const newItemsMap = new Map<any, T>();
+  const commonItemsInNewMap = new Map<any, number>();
+  const commonItemsInOldMap = new Map<any, number>();
+  oldValue.forEach((item) => {
+    const itemKey = getKey(item);
+    if(!oldItemsMap.has(itemKey)) {
+      oldItemsMap.set(getKey(item), item);
+    } else {
+      //if keys are set incorrectly do not process comparing
+      throw new Error("keys must be unique");
+    }
+  });
+  newValue.forEach((item) => {
+    const itemKey = getKey(item);
+    if(!newItemsMap.has(itemKey)) {
+      newItemsMap.set(itemKey, item);
+    } else {
+      //if keys are set incorrectly do not process comparing
+      throw new Error("keys must be unique");
+    }
+  });
+  const addedItems: Array<T> = [];
+  const deletedItems: Array<T> = [];
+
+  //calculating addedItems and items that exist in both arrays
+  newItemsMap.forEach((item, key) => {
+    if(!oldItemsMap.has(key)) {
+      addedItems.push(item);
+    } else {
+      commonItemsInNewMap.set(key, commonItemsInNewMap.size);
+    }
+  });
+
+  //calculating deletedItems and items that exist in both arrays
+
+  oldItemsMap.forEach((item, key) => {
+    if(!newItemsMap.has(key)) {
+      deletedItems.push(item);
+    } else {
+      commonItemsInOldMap.set(key, commonItemsInOldMap.size);
+    }
+  });
+
+  //calculating reordered items
+  const reorderedItems: Array<{ item: T, movedForward: boolean }> = [];
+  commonItemsInNewMap.forEach((index, key) => {
+    const oldIndex = commonItemsInOldMap.get(key);
+    const item = newItemsMap.get(key);
+    if(oldIndex !== index) reorderedItems.push({ item: item, movedForward: oldIndex < index });
+  });
+
+  //calculating merged array if multiple operations are applied at once
+
+  const oldItemsWithCorrectOrder = new Array<T>(oldValue.length);
+  let commonItemsIndex = 0;
+  const commonItemsKeysOrder = Array.from(commonItemsInNewMap.keys());
+  oldValue.forEach((item, index) => {
+    if(commonItemsInNewMap.has(getKey(item))) {
+      oldItemsWithCorrectOrder[index] = newItemsMap.get(commonItemsKeysOrder[commonItemsIndex]);
+      commonItemsIndex++;
+    } else {
+      oldItemsWithCorrectOrder[index] = item;
+    }
+  });
+
+  const valuesToInsertBeforeKey = new Map<any, Array<T>>();
+  let tempValuesArray: Array<T> = [];
+  oldItemsWithCorrectOrder.forEach((item) => {
+    const itemKey = getKey(item);
+    if(newItemsMap.has(itemKey)) {
+      if(tempValuesArray.length > 0) {
+        valuesToInsertBeforeKey.set(itemKey, tempValuesArray);
+        tempValuesArray = [];
+      }
+    } else {
+      tempValuesArray.push(item);
+    }
+  });
+
+  const mergedItems = new Array<T>();
+  newItemsMap.forEach((item, key) => {
+    if(valuesToInsertBeforeKey.has(key)) {
+      valuesToInsertBeforeKey.get(key).forEach((item) => {
+        mergedItems.push(item);
+      });
+    }
+    mergedItems.push(item);
+  });
+  tempValuesArray.forEach((item) => {
+    mergedItems.push(item);
+  });
+
+  return { reorderedItems, deletedItems, addedItems, mergedItems };
+}
 
 export {
   mergeValues,
diff --git a/src/vue/ranking/ranking.vue b/src/vue/ranking/ranking.vue
index 3d860fb5a1..27be35a83e 100644
--- a/src/vue/ranking/ranking.vue
+++ b/src/vue/ranking/ranking.vue
@@ -1,16 +1,16 @@
 <template>
   <div :class="question.rootClass">
-    <survey-ranking-item v-if="!question.selectToRankEnabled" v-for="(item, index) in (question.rankingChoices)"
+    <survey-ranking-item v-if="!question.selectToRankEnabled" v-for="(item, index) in (question.renderedRankingChoices)"
       :key="item.value + '-' + index + '-item'" :class="question.getItemClass(item)" :text="item.locText" :index="index"
       :indexText="getNumberByIndex(index)" :cssClasses="question.cssClasses" :question="question"
       :item="item"></survey-ranking-item>
 
     <div v-if="question.selectToRankEnabled" :class='question.getContainerClasses("from")' data-ranking="from-container">
-      <survey-ranking-item v-for="(item, index) in (question.unRankingChoices)" :key="item.value + '-' + index + '-item'"
+      <survey-ranking-item v-for="(item, index) in (question.renderedUnRankingChoices)" :key="item.value + '-' + index + '-item'"
         :class="question.getItemClass(item)" :text="item.locText" :index="index" :indexText="getNumberByIndex(index)"
         :cssClasses="question.cssClasses" :question="question" :item="item" :unrankedItem=true></survey-ranking-item>
 
-      <div v-if="question.unRankingChoices.length === 0" :class="question.cssClasses.containerPlaceholder">
+      <div v-if="question.renderedUnRankingChoices.length === 0" :class="question.cssClasses.containerPlaceholder">
         <survey-string :locString="question.locSelectToRankEmptyRankedAreaText"></survey-string>
       </div>
     </div>
@@ -18,11 +18,11 @@
     <div v-if="question.selectToRankEnabled" :class="question.cssClasses.containersDivider"></div>
 
     <div v-if="question.selectToRankEnabled" :class='question.getContainerClasses("to")' data-ranking="to-container">
-      <survey-ranking-item v-for="(item, index) in (question.rankingChoices)" :key="item.value + '-' + index + '-item'"
+      <survey-ranking-item v-for="(item, index) in (question.renderedRankingChoices)" :key="item.value + '-' + index + '-item'"
         :class="question.getItemClass(item)" :text="item.locText" :index="index" :indexText="getNumberByIndex(index)"
         :cssClasses="question.cssClasses" :question="question" :item="item"></survey-ranking-item>
 
-      <div v-if="question.rankingChoices.length === 0" :class="question.cssClasses.containerPlaceholder">
+      <div v-if="question.renderedRankingChoices.length === 0" :class="question.cssClasses.containerPlaceholder">
         <survey-string :locString="question.locSelectToRankEmptyUnrankedAreaText"></survey-string>
       </div>
     </div>
diff --git a/testCafe/components/list.ts b/testCafe/components/list.ts
index c1be6800d3..23b3edef36 100644
--- a/testCafe/components/list.ts
+++ b/testCafe/components/list.ts
@@ -133,7 +133,6 @@ frameworks.forEach(async framework => {
       .expect(popupSelector.exists).ok()
       .expect(listInput.exists).notOk()
       .expect(visibleItems.count).eql(10)
-
       .click(getActionByText("Open popup")) // close popup
       .click(getActionByText("Set items"))
       .click(getActionByText("Open popup"))
diff --git a/testCafe/helper.js b/testCafe/helper.js
index a246567e50..0168cfab31 100644
--- a/testCafe/helper.js
+++ b/testCafe/helper.js
@@ -33,8 +33,6 @@ export const initSurvey = ClientFunction(
     // eslint-disable-next-line no-console
     console.log("surveyjs console.error and console.warn override");
 
-    window["Survey"].settings.animationEnabled = false;
-
     const model = new window["Survey"].Model(json);
     model.setDesignMode(isDesignMode);
     const surveyComplete = function (model) {
@@ -96,8 +94,6 @@ export const initSurveyPopup = ClientFunction(
     // eslint-disable-next-line no-console
     console.log("surveyjs console.error and console.warn override");
 
-    window["Survey"].settings.animationEnabled = false;
-
     const popupSurvey = new window["Survey"].PopupSurveyModel(json);
     const model = popupSurvey.survey;
     model.setDesignMode(isDesignMode);
diff --git a/testCafe/questions/paneldynamic.ts b/testCafe/questions/paneldynamic.ts
index 04e70b0467..a9e576db15 100644
--- a/testCafe/questions/paneldynamic.ts
+++ b/testCafe/questions/paneldynamic.ts
@@ -157,8 +157,9 @@ frameworks.forEach((framework) => {
     const relativeillnessDropdown = Selector("div[data-name='relativeillness'] .sv_q_dropdown_control");
 
     const addRowSelector = Selector("button").find("span").withText("Add Row");
-
-    await t.click("input[value=\"Yes\"]")
+    await
+    t
+      .click("input[value=\"Yes\"]")
 
       .click(ageDropdown)
       .click(getListItemByText("72"))
@@ -528,10 +529,13 @@ frameworks.forEach((framework) => {
       ]
     });
     await t.click(Selector("button").withText("Add"))
+      .wait(1000)
       .pressKey("1 2 3")
       .click(Selector("button").withText("Add"))
+      .wait(1000)
       .pressKey("4 5 6")
       .click(Selector("button").withText("Add"))
+      .wait(1000)
       .pressKey("7 8 9")
       .click(Selector(".sd-navigation__complete-btn"));
 
diff --git a/testCafe/questions/ranking.js b/testCafe/questions/ranking.js
index 0a3c8f1b3a..b294f92b68 100644
--- a/testCafe/questions/ranking.js
+++ b/testCafe/questions/ranking.js
@@ -93,7 +93,9 @@ frameworks.forEach((framework) => {
     .withText("Battery life");
 
   test("ranking: simple using", async (t) => {
-    await t.dragToElement(PriceItem, BatteryItem);
+    await t.dragToElement(PriceItem, BatteryItem, {
+      destinationOffsetY: 0,
+    });
     await t.wait(300);
     let data = await getData();
     await t.expect(data["smartphone-features"]).eql([
@@ -107,6 +109,7 @@ frameworks.forEach((framework) => {
     ]);
   });
 
+  //todo
   test("ranking: predeficed data", async (t) => {
     await setData({
       "smartphone-features": [
@@ -120,7 +123,7 @@ frameworks.forEach((framework) => {
       ],
     });
     await t.dragToElement(PriceItem, BatteryItem, {
-      destinationOffsetY: 0,
+      destinationOffsetY: -1,
       offsetY: 0,
       speed: 0.1
     });
@@ -137,7 +140,9 @@ frameworks.forEach((framework) => {
     ]);
 
     await setData(null);
-    await t.dragToElement(PriceItem, BatteryItem);
+    await t.dragToElement(PriceItem, BatteryItem, {
+      destinationOffsetY: 0
+    });
     await t.wait(300);
     data = await getData();
     await t.expect(data["smartphone-features"]).eql([
@@ -150,7 +155,7 @@ frameworks.forEach((framework) => {
       "Processor power",
     ]);
   });
-
+  //todo
   test("ranking: carry forward", async (t) => {
     await t.hover(PriceItem);
     await t.drag(PriceItem, 0, -300, {
@@ -194,7 +199,7 @@ frameworks.forEach((framework) => {
     await t.expect(typeof data.bestcar).ok();
 
     await t.hover(rankAudiItem);
-    await t.dragToElement(rankAudiItem, rankMercedesBenzItem, { offsetY: 0, destinationOffsetY: 0, speed: 0.1 });
+    await t.dragToElement(rankAudiItem, rankMercedesBenzItem, { offsetY: 0, destinationOffsetY: -1, speed: 0.1 });
     data = await getData();
 
     await t.expect(data.bestcar).eql(["Mercedes-Benz", "Audi", "Toyota"]);
diff --git a/testCafe/questions/tagbox.ts b/testCafe/questions/tagbox.ts
index 0fdd60ef0c..4cb9ac7ee9 100644
--- a/testCafe/questions/tagbox.ts
+++ b/testCafe/questions/tagbox.ts
@@ -598,6 +598,7 @@ frameworks.forEach((framework) => {
       .expect(listItems.filterVisible().count).eql(55)
 
       .click(getListItemByText("55"))
+      .wait(500)
       .click(tagboxQuestion2)
       .expect(tagbox2.find(".sv-list__empty-container").visible).ok()
       .expect(tagbox2.find(".sv-popup__scrolling-content").offsetHeight).eql(48)
diff --git a/testCafe/survey/popup.js b/testCafe/survey/popup.js
index a68fbd04fb..7b38c73874 100644
--- a/testCafe/survey/popup.js
+++ b/testCafe/survey/popup.js
@@ -13,7 +13,6 @@ const initPopupSurvey = ClientFunction(
     };
     // eslint-disable-next-line no-console
     console.log("surveyjs console.error and console.warn override");
-    window["Survey"].settings.animationEnabled = false;
     const model = new window["Survey"].Model(json);
     const surveyComplete = function (model) {
       window["SurveyResult"] = model.data;
diff --git a/tests/components/popuptests.ts b/tests/components/popuptests.ts
index 4e953496a8..7c7175abb2 100644
--- a/tests/components/popuptests.ts
+++ b/tests/components/popuptests.ts
@@ -1694,7 +1694,9 @@ QUnit.test("PopupViewModel: check animation's onEnter, onLeave are called correc
   viewModel.onVisibilityChanged.add((_: PopupBaseViewModel, options: { isVisible: boolean }) => {
     logger.log += `->viewModel:isVisible:${options.isVisible}`;
   });
+  viewModel.enableOnElementRenderedEvent();
   model.isVisible = true;
+  viewModel.afterRerender();
   assert.equal(logger.log, "->model:isVisible:true->viewModel:isVisible:true->onEnter", "correct order of updates when entering");
   assert.deepEqual(viewModel.getAnimation().passedEnterClass, "sv-popup--animate-enter", "correct css classes passed to animation's onEnter");
   logger.log = "";
diff --git a/tests/question_ranking_tests.ts b/tests/question_ranking_tests.ts
index 588b663ba4..54a23c7786 100644
--- a/tests/question_ranking_tests.ts
+++ b/tests/question_ranking_tests.ts
@@ -4,6 +4,7 @@ import { SurveyModel } from "../src/survey";
 import { settings as Settings, settings } from "../src/settings";
 import { Serializer } from "../src/jsonobject";
 import { ItemValue } from "../src/itemvalue";
+import { sassFalse } from "sass";
 
 export default QUnit.module("question ranking");
 
@@ -254,10 +255,16 @@ QUnit.test("Ranking: design mode", function (assert) {
 
   var upCalled = 0, downCalled = 0, preventDefaultCalled = 0;
   var q = <QuestionRankingModel>survey.getQuestionByName("q");
-  q["handleArrowKeys"] = (index, choice, isDown) => {
-    if (isDown) downCalled++;
-    else upCalled++;
-  };
+  q["focusItem"] = () => {};
+  q.dragDropRankingChoices = {
+    reorderRankedItem: (question, fromIndex: number, toIndex: number) => {
+      if(fromIndex < toIndex) {
+        downCalled++;
+      } else if(fromIndex > toIndex) {
+        upCalled++;
+      }
+    }
+  } as any;
   function preventDefault() { preventDefaultCalled++; }
 
   q.handleKeydown(<any>{ key: "ArrowUp", preventDefault: preventDefault }, q.choices[1]);
@@ -315,6 +322,144 @@ QUnit.test("Ranking: selectToRank key navigation with animation", function (asse
   settings.animationEnabled = false;
 });
 
+QUnit.test("Ranking: check renderedRankingChoices are updated when rankingChoices changing", (assert) => {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "ranking",
+        name: "q",
+        choices: ["a", "b", "c"],
+      },
+    ],
+  });
+  const question = <QuestionRankingModel>survey.getAllQuestions()[0];
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a", "b", "c"]);
+  question.value = ["b", "a", "c"];
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["b", "a", "c"]);
+  question.value = ["a", "c", "b"];
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a", "c", "b"]);
+  question.value = undefined;
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a", "b", "c"]);
+  question.rankingChoices.pop();
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a", "b"]);
+  question.rankingChoices.push(new ItemValue("c"));
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a", "b", "c"]);
+});
+
+QUnit.test("Ranking: check rendered rankingChoices and unRankingChoices are updated when rankingChoices and unRankingChoices changing", (assert) => {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "ranking",
+        name: "q",
+        choices: ["a", "b", "c"],
+        selectToRankEnabled: true
+      },
+    ],
+  });
+  const question = <QuestionRankingModel>survey.getAllQuestions()[0];
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a", "b", "c"]);
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), []);
+  question.value = ["b", "c"];
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a"]);
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["b", "c"]);
+  question.value = ["c", "b"];
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a"]);
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["c", "b"]);
+  question.value = ["a"];
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["b", "c"]);
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), ["a"]);
+  question.value = undefined;
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a", "b", "c"]);
+  assert.deepEqual(question.renderedRankingChoices.map(item => item.value), []);
+  question.unRankingChoices.pop();
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a", "b"]);
+  question.unRankingChoices.push(new ItemValue("c"));
+  assert.deepEqual(question.renderedUnRankingChoices.map(item => item.value), ["a", "b", "c"]);
+});
+
+QUnit.test("Ranking: test animation options", (assert) => {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "ranking",
+        name: "q",
+        choices: ["a", "b"],
+        selectToRankEnabled: true
+      },
+    ],
+  });
+  const question = <QuestionRankingModel>survey.getAllQuestions()[0];
+  question.value = ["a"];
+  const rcAnimationOptions = question["getChoicesAnimationOptions"](true);
+  const ucAnimationOptions = question["getChoicesAnimationOptions"](false);
+
+  //test isAnimationEnabled
+  question["domNode"] = document.createElement("div");
+  settings.animationEnabled = true;
+  question.enableOnElementRenderedEvent();
+  assert.ok(rcAnimationOptions.isAnimationEnabled());
+  question.disableOnElementRenderedEvent();
+  assert.notOk(rcAnimationOptions.isAnimationEnabled());
+  question.enableOnElementRenderedEvent();
+  assert.ok(rcAnimationOptions.isAnimationEnabled());
+  question["domNode"] = undefined as any;
+  assert.notOk(rcAnimationOptions.isAnimationEnabled());
+  question["domNode"] = document.createElement("div");
+  assert.ok(rcAnimationOptions.isAnimationEnabled());
+  question.visible = false;
+  assert.notOk(rcAnimationOptions.isAnimationEnabled());
+  question.visible = true;
+  assert.ok(rcAnimationOptions.isAnimationEnabled());
+  settings.animationEnabled = false;
+  assert.notOk(rcAnimationOptions.isAnimationEnabled());
+  settings.animationEnabled = true;
+  assert.ok(rcAnimationOptions.isAnimationEnabled());
+
+  //test enterOptions
+  assert.equal(rcAnimationOptions.getEnterOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+  assert.equal(ucAnimationOptions.getEnterOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+
+  assert.equal(rcAnimationOptions.getEnterOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+  assert.equal(ucAnimationOptions.getEnterOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+
+  question.selectToRankAreasLayout = "vertical";
+
+  assert.equal(rcAnimationOptions.getEnterOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+  assert.equal(ucAnimationOptions.getEnterOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding");
+
+  assert.equal(rcAnimationOptions.getEnterOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding-empty");
+  assert.equal(ucAnimationOptions.getEnterOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-adding-empty");
+
+  //test leave options
+  question.selectToRankAreasLayout = "horizontal";
+  assert.equal(rcAnimationOptions.getLeaveOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+  assert.equal(ucAnimationOptions.getLeaveOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+
+  assert.equal(rcAnimationOptions.getLeaveOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+  assert.equal(ucAnimationOptions.getLeaveOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+
+  question.selectToRankAreasLayout = "vertical";
+
+  assert.equal(rcAnimationOptions.getLeaveOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+  assert.equal(ucAnimationOptions.getLeaveOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing");
+
+  assert.equal(rcAnimationOptions.getLeaveOptions(question.rankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing-empty");
+  assert.equal(ucAnimationOptions.getLeaveOptions(question.unRankingChoices[0]).cssClass, "sv-ranking-item--animate-item-removing-empty");
+
+  //test reorder options
+  question.value = ["a", "b"];
+  question.currentDropTarget = question.rankingChoices[0];
+
+  assert.equal(rcAnimationOptions.getReorderOptions(question.rankingChoices[0], false).cssClass, "");
+  assert.equal(rcAnimationOptions.getReorderOptions(question.rankingChoices[0], true).cssClass, "");
+
+  assert.equal(rcAnimationOptions.getReorderOptions(question.rankingChoices[1], false).cssClass, "sv-dragdrop-moveup");
+  assert.equal(rcAnimationOptions.getReorderOptions(question.rankingChoices[1], true).cssClass, "sv-dragdrop-movedown");
+
+  settings.animationEnabled = false;
+});
+
 QUnit.test("Ranking: rankingDragHandleArea Setting ", function(assert) {
   let result;
   let dragStartTargetNode;
diff --git a/tests/utilstests.ts b/tests/utilstests.ts
index af027783b3..3a350015b7 100644
--- a/tests/utilstests.ts
+++ b/tests/utilstests.ts
@@ -1,10 +1,11 @@
 import { IAction } from "../src/actions/action";
 import { defaultListCss } from "../src/list";
-import { createSvg, doKey2ClickDown, doKey2ClickUp, sanitizeEditableContent, configConfirmDialog, mergeValues } from "../src/utils/utils";
+import { createSvg, doKey2ClickDown, doKey2ClickUp, sanitizeEditableContent, configConfirmDialog, mergeValues, compareArrays } from "../src/utils/utils";
 import { mouseInfo } from "../src/utils/devices";
 import { PopupBaseViewModel } from "../src/popup-view-model";
 import { PopupModel } from "../src/popup";
-import { AnimationBoolean, AnimationGroup, AnimationGroupUtils, AnimationPropertyUtils, AnimationTab, AnimationUtils, IAnimationConsumer } from "../src/utils/animation";
+import { AnimationBoolean, AnimationGroup, AnimationGroupUtils, AnimationPropertyUtils, AnimationTab, AnimationUtils, IAnimationConsumer, IAnimationGroupConsumer } from "../src/utils/animation";
+import { EventBase } from "../src/base";
 
 export default QUnit.module("utils");
 function checkSanitizer(element, text, selectionNodeIndex, selectionStart, cleanLineBreaks = true) {
@@ -392,6 +393,7 @@ QUnit.test("Test animation utils: enter animation", (assert) => {
   document.body.appendChild(htmlElement);
   let log = "";
   const animationOptions: IAnimationConsumer = {
+    getRerenderEvent: () => new EventBase(),
     getLeaveOptions() {
       return {} as any;
     },
@@ -435,6 +437,7 @@ QUnit.test("Test animation utils: leave animation", (assert) => {
   document.body.appendChild(htmlElement);
   let log = "";
   const animationOptions: IAnimationConsumer = {
+    getRerenderEvent: () => new EventBase(),
     getLeaveOptions() {
       return {
         onAfterRunAnimation: (element) => {
@@ -489,7 +492,8 @@ QUnit.test("Test animation utils: group enter animation", (assert) => {
     return element;
   });
   let log = "";
-  const animationOptions: IAnimationConsumer<[number]> = {
+  const animationOptions: IAnimationGroupConsumer<number> = {
+    getRerenderEvent: () => new EventBase(),
     getEnterOptions(i) {
       return {
         onAfterRunAnimation: (element) => {
@@ -513,7 +517,7 @@ QUnit.test("Test animation utils: group enter animation", (assert) => {
       return htmlElements[i];
     }
   };
-  animationUtils.runGroupAnimation(animationOptions, [0, 1, 2], []);
+  animationUtils.runGroupAnimation(animationOptions, [0, 1, 2], [], []);
   assert.equal(log, "->beforeRunAnimation_0->beforeRunAnimation_1->beforeRunAnimation_2");
   assert.ok(htmlElements[0].classList.contains("enter_0"));
   assert.ok(htmlElements[1].classList.contains("enter_1"));
@@ -547,10 +551,8 @@ QUnit.test("Test animation utils: group leave animation", (assert) => {
     return element;
   });
   let log = "";
-  const animationOptions: IAnimationConsumer<[number]> = {
-    getEnterOptions(i) {
-      return {} as any;
-    },
+  const animationOptions: IAnimationGroupConsumer<number> = {
+    getRerenderEvent: () => new EventBase(),
     getLeaveOptions(i) {
       {
         return {
@@ -573,7 +575,7 @@ QUnit.test("Test animation utils: group leave animation", (assert) => {
       return htmlElements[i];
     }
   };
-  animationUtils.runGroupAnimation(animationOptions, [], [0, 1, 2], () => {
+  animationUtils.runGroupAnimation(animationOptions, [], [0, 1, 2], [], () => {
     log+="->updated";
   });
   setTimeout(() => {
@@ -611,7 +613,9 @@ QUnit.test("Test animation property: boolean", (assert) => {
   element.style.animationDuration = "1s";
   document.body.appendChild(element);
   let log = "";
+  const rerenderEvent = new EventBase();
   const animation = new AnimationBoolean({
+    getRerenderEvent: () => rerenderEvent as any,
     getEnterOptions: () => {
       return {
         onBeforeRunAnimation: () => {
@@ -645,6 +649,7 @@ QUnit.test("Test animation property: boolean", (assert) => {
     log += `->updated: ${val}`;
   }, () => value);
   animation["_sync"](true);
+  animation["animationOptions"].getRerenderEvent().fire(undefined as any, undefined);
   element.dispatchEvent(new AnimationEvent("animationend"));
   assert.equal(log, "->updated: true->before-enter->after-enter");
 
@@ -667,7 +672,9 @@ QUnit.test("Test animation property: array", (assert) => {
     return element;
   });
   let log = "";
+  const rerenderEvent = new EventBase();
   const animation = new AnimationGroup<number>({
+    getRerenderEvent: () => rerenderEvent as any,
     getEnterOptions: (i) => {
       return {
         onBeforeRunAnimation: () => {
@@ -701,6 +708,7 @@ QUnit.test("Test animation property: array", (assert) => {
     log += `->updated: ${val}`;
   }, () => elements);
   animation["_sync"]([0, 1, 2, 3]);
+  animation["animationOptions"].getRerenderEvent().fire(undefined as any, undefined);
   htmlElements[1].dispatchEvent(new AnimationEvent("animationend"));
   htmlElements[2].dispatchEvent(new AnimationEvent("animationend"));
   assert.equal(log, "->updated: 0,1,2,3->before-enter_1->before-enter_2->after-enter_1->after-enter_2");
@@ -726,7 +734,9 @@ QUnit.test("Test animation tab", (assert) => {
     return element;
   });
   let log = "";
+  const rerenderEvent = new EventBase();
   const animation = new AnimationTab<number>({
+    getRerenderEvent: () => rerenderEvent as any,
     getEnterOptions: (i) => {
       return {
         onBeforeRunAnimation: () => {
@@ -762,15 +772,23 @@ QUnit.test("Test animation tab", (assert) => {
     return ([] as number[]).concat(newValue, oldValue);
   },);
   animation["_sync"]([1]);
+  assert.deepEqual(elements, [1, 0]);
+  assert.equal(log, "->updated: 1,0");
+  log = "";
+  animation["animationOptions"].getRerenderEvent().fire(undefined as any, undefined);
   htmlElements[0].dispatchEvent(new AnimationEvent("animationend"));
   htmlElements[1].dispatchEvent(new AnimationEvent("animationend"));
-  assert.equal(log, "->updated: 1,0->before-enter_1->before-leave_0->after-leave_0->after-enter_1->updated: 1");
+  assert.equal(log, "->before-enter_1->before-leave_0->after-leave_0->after-enter_1->updated: 1");
   assert.deepEqual(elements, [1]);
   log = "";
   animation["_sync"]([0]);
+  assert.deepEqual(elements, [0, 1]);
+  assert.equal(log, "->updated: 0,1");
+  log = "";
+  animation["animationOptions"].getRerenderEvent().fire(undefined as any, undefined);
   htmlElements[0].dispatchEvent(new AnimationEvent("animationend"));
   htmlElements[1].dispatchEvent(new AnimationEvent("animationend"));
-  assert.equal(log, "->updated: 0,1->before-enter_0->before-leave_1->after-enter_0->after-leave_1->updated: 0");
+  assert.equal(log, "->before-enter_0->before-leave_1->after-enter_0->after-leave_1->updated: 0");
   assert.deepEqual(elements, [0]);
 
   window.requestAnimationFrame = oldRequestAnimationFrame;
@@ -786,7 +804,8 @@ QUnit.test("Check onNextRender and cancel", (assert) => {
     let rafId = ++id;
     latestCb = () => { log+= `->running: ${id}`; cb(); };
     log+= `->raf: ${rafId}`;
-    return rafId; };
+    return rafId;
+  };
   window.cancelAnimationFrame = (id) => { log+= `->canceled: ${id}`; };
   const animation = new AnimationUtils();
   animation["onNextRender"](() => {
@@ -814,14 +833,6 @@ QUnit.test("Check onNextRender and cancel", (assert) => {
   animation.cancel();
   assert.equal(log, "");
 
-  id = 0;
-  log = "";
-  animation["onNextRender"](() => {
-    log+="->updated";
-  }, () => true);
-  latestCb();
-  assert.equal(log, "->raf: 1->running: 1->updated");
-
   window.requestAnimationFrame = oldRequestAnimationFrame;
   window.cancelAnimationFrame = oldCancelAnimationFrame;
 });
@@ -831,6 +842,7 @@ QUnit.test("Test animation property: check latest update persists", (assert) =>
   let value: boolean = false;
   let animationEnabled = false;
   const animation = new AnimationBoolean({
+    getRerenderEvent: () => new EventBase(),
     getEnterOptions: () => {
       return {
         cssClass: "enter",
@@ -865,4 +877,132 @@ QUnit.test("Test animation property: check latest update persists", (assert) =>
       done();
     });
   });
+});
+
+QUnit.test("test compareArrays function", (assert) => {
+  let res: any = compareArrays([0, 1, 2, 3, 4], [5, 3, 6, 1, 7], (i) => i);
+  assert.deepEqual(res.deletedItems, [0, 2, 4]);
+  assert.deepEqual(res.addedItems, [5, 6, 7]);
+  assert.deepEqual(res.reorderedItems, [{ item: 3, movedForward: false }, { item: 1, movedForward: true }]);
+  assert.deepEqual(res.mergedItems, [5, 0, 3, 6, 2, 1, 7, 4]);
+
+  res = compareArrays([0, 1, 2, 3, 4], [3, 1], (i) => i);
+  assert.deepEqual(res.deletedItems, [0, 2, 4]);
+  assert.deepEqual(res.addedItems, []);
+  assert.deepEqual(res.reorderedItems, [{ item: 3, movedForward: false }, { item: 1, movedForward: true }]);
+  assert.deepEqual(res.mergedItems, [0, 3, 2, 1, 4]);
+
+  res = compareArrays([1, 3], [5, 3, 6, 1, 7], (i) => i);
+  assert.deepEqual(res.deletedItems, []);
+  assert.deepEqual(res.addedItems, [5, 6, 7]);
+  assert.deepEqual(res.reorderedItems, [{ item: 3, movedForward: false }, { item: 1, movedForward: true }]);
+  assert.deepEqual(res.mergedItems, [5, 3, 6, 1, 7]);
+
+  res = compareArrays([0, 1, 2, 3, 4], [5, 1, 6, 3, 7], (i) => i);
+  assert.deepEqual(res.deletedItems, [0, 2, 4]);
+  assert.deepEqual(res.addedItems, [5, 6, 7]);
+  assert.deepEqual(res.reorderedItems, []);
+  assert.deepEqual(res.mergedItems, [5, 0, 1, 6, 2, 3, 7, 4]);
+
+  res = compareArrays([0, 1, 2, 3, 4], [], (i) => i);
+  assert.deepEqual(res.deletedItems, [0, 1, 2, 3, 4]);
+  assert.deepEqual(res.addedItems, []);
+  assert.deepEqual(res.reorderedItems, []);
+  assert.deepEqual(res.mergedItems, [0, 1, 2, 3, 4]);
+
+  res = compareArrays([], [5, 1, 6, 3, 7], (i) => i);
+  assert.deepEqual(res.deletedItems, []);
+  assert.deepEqual(res.addedItems, [5, 1, 6, 3, 7]);
+  assert.deepEqual(res.reorderedItems, []);
+  assert.deepEqual(res.mergedItems, [5, 1, 6, 3, 7]);
+
+  res = compareArrays([{ value: 0 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }], [{ value: 5 }, { value: 3 }, { value: 6 }, { value: 1 }, { value: 7 }], (item) => item.value);
+  assert.deepEqual(res.deletedItems, [{ value: 0 }, { value: 2 }, { value: 4 }]);
+  assert.deepEqual(res.addedItems, [{ value: 5 }, { value: 6 }, { value: 7 }]);
+  assert.deepEqual(res.reorderedItems, [{ item: { value: 3 }, movedForward: false }, { item: { value: 1 }, movedForward: true }]);
+  assert.deepEqual(res.mergedItems, [{ value: 5 }, { value: 0 }, { value: 3 }, { value: 6 }, { value: 2 }, { value: 1 }, { value: 7 }, { value: 4 }]);
+
+  res = compareArrays([{ value: 0 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }], [{ value: 5 }, { value: 3 }, { value: 6 }, { value: 1 }, { value: 7 }], (item) => item);
+  assert.deepEqual(res.deletedItems, [{ value: 0 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]);
+  assert.deepEqual(res.addedItems, [{ value: 5 }, { value: 3 }, { value: 6 }, { value: 1 }, { value: 7 }]);
+  assert.deepEqual(res.reorderedItems, []);
+  assert.deepEqual(res.mergedItems, [{ value: 5 }, { value: 3 }, { value: 6 }, { value: 1 }, { value: 7 }, { value: 0 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]);
+
+  assert.throws(() => compareArrays([{ value: 0 }, { value: 0 }], [], (item) => item.value), new Error("keys must be unique"));
+  assert.throws(() => compareArrays([], [{ value: 1 }, { value: 1 }], (item) => item.value), new Error("keys must be unique"));
+});
+
+QUnit.test("test onNextRender function", (assert) => {
+  let rerenderEvent = new EventBase();
+  const animation = new AnimationBoolean({
+    getRerenderEvent() {
+      return rerenderEvent;
+    }
+  } as any, () => {}, () => undefined as any);
+
+  let log = "";
+  animation["onNextRender"](() => {
+    log+= "->callback";
+  }, () => {
+    log+= "->cancelled";
+  });
+  assert.equal(log, "");
+  rerenderEvent.fire(undefined, undefined);
+  assert.equal(log, "->callback");
+  assert.ok(rerenderEvent.isEmpty);
+  assert.notOk(!!animation["cancelCallback"]);
+
+  log ="";
+  animation["onNextRender"](() => {
+    log+= "->callback";
+  }, () => {
+    log+= "->cancelled";
+  });
+  assert.equal(log, "");
+  animation.cancel();
+  assert.equal(log, "->cancelled");
+  assert.ok(rerenderEvent.isEmpty);
+  assert.notOk(!!animation["cancelCallback"]);
+
+  log = "";
+  rerenderEvent = undefined as any;
+  let latestRafCb: any;
+  let rafId = 0;
+  const oldRequestAnimationFrame = window.requestAnimationFrame;
+  const oldCancelAnimationFrame = window.cancelAnimationFrame;
+  window.requestAnimationFrame = ((cb) => {
+    rafId++;
+    latestRafCb = () => { log+= `->running: ${rafId}`; cb(); };
+    log+= `->raf: ${rafId}`;
+    return rafId;
+  }) as any;
+  window.cancelAnimationFrame = (() => {
+    log+= `->canceled raf: ${rafId}`;
+  }) as any;
+
+  animation["onNextRender"](() => {
+    log+= "->callback";
+  }, () => {
+    log+= "->cancelled";
+  });
+  assert.equal(log, "->raf: 1");
+  log = "";
+  latestRafCb();
+  assert.equal(log, "->running: 1->callback");
+  assert.notOk(!!animation["cancelCallback"]);
+
+  log ="";
+  animation["onNextRender"](() => {
+    log+= "->callback";
+  }, () => {
+    log+= "->cancelled";
+  });
+  assert.equal(log, "->raf: 2");
+  log = "";
+  animation.cancel();
+  assert.equal(log, "->cancelled->canceled raf: 2");
+  assert.notOk(!!animation["cancelCallback"]);
+
+  window.requestAnimationFrame = oldRequestAnimationFrame;
+  window.cancelAnimationFrame = oldCancelAnimationFrame;
 });
\ No newline at end of file