diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
index b1308a307d1..ff7e1a6ee5f 100644
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@@ -385,7 +385,7 @@ export class ElementController {
         elementType,
         stage,
         originalStyle: { ...element.attributes },
-        modifiedStyle: style,
+        modifiedStyle: { ...style },
       },
       {
         after: () => {
@@ -440,7 +440,7 @@ export class ElementController {
         elementType,
         stage: exactStage,
         originalStyle: { ...element.attributes },
-        modifiedStyle: style,
+        modifiedStyle: { ...element.attributes, ...style },
       },
       {
         before: () => {
@@ -490,8 +490,8 @@ export class ElementController {
         element,
         elementType,
         stage,
-        originalStyle: element.attributes,
-        modifiedStyle: element.attributes,
+        originalStyle: { ...element.attributes },
+        modifiedStyle: { ...element.attributes },
       },
       {
         after: () => {
diff --git a/packages/site/examples/animation/basic/demo/update.js b/packages/site/examples/animation/basic/demo/update.js
index a29b4834ae9..b7a5e67f704 100644
--- a/packages/site/examples/animation/basic/demo/update.js
+++ b/packages/site/examples/animation/basic/demo/update.js
@@ -16,7 +16,7 @@ const graph = new Graph({
   },
   edge: {
     animation: {
-      update: [{ fields: ['stroke', 'path', 'lineWidth'], shape: 'key' }],
+      update: [{ fields: ['sourceNode', 'targetNode'] }, { fields: ['stroke', 'lineWidth'], shape: 'key' }],
     },
   },
 });
diff --git a/packages/site/examples/animation/viewport/demo/rotate.js b/packages/site/examples/animation/viewport/demo/rotate.js
index 379211ef09b..75b417fe1c7 100644
--- a/packages/site/examples/animation/viewport/demo/rotate.js
+++ b/packages/site/examples/animation/viewport/demo/rotate.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',
diff --git a/packages/site/examples/animation/viewport/demo/translate.js b/packages/site/examples/animation/viewport/demo/translate.js
index 9517b009518..1cf80c4a26d 100644
--- a/packages/site/examples/animation/viewport/demo/translate.js
+++ b/packages/site/examples/animation/viewport/demo/translate.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',
diff --git a/packages/site/examples/animation/viewport/demo/zoom.js b/packages/site/examples/animation/viewport/demo/zoom.js
index 40d13d30d7c..87165e460ae 100644
--- a/packages/site/examples/animation/viewport/demo/zoom.js
+++ b/packages/site/examples/animation/viewport/demo/zoom.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',
diff --git a/packages/site/examples/behavior/focus/demo/basic.js b/packages/site/examples/behavior/focus/demo/basic.js
index 98fbc822dd1..eab439f1480 100644
--- a/packages/site/examples/behavior/focus/demo/basic.js
+++ b/packages/site/examples/behavior/focus/demo/basic.js
@@ -12,7 +12,6 @@ const data = {
 
 const graph = new Graph({
   container: 'container',
-  animation: true,
   node: {
     style: { labelText: (d) => d.id },
   },
diff --git a/packages/site/examples/element/custom-combo/demo/extra-button.js b/packages/site/examples/element/custom-combo/demo/extra-button.js
index b38feeb5c4b..3344d34b497 100644
--- a/packages/site/examples/element/custom-combo/demo/extra-button.js
+++ b/packages/site/examples/element/custom-combo/demo/extra-button.js
@@ -35,7 +35,7 @@ class CircleComboWithExtraButton extends CircleCombo {
     const [, height] = this.getKeySize(attributes);
     const btnR = 8;
     const y = height / 2 + btnR;
-    const d = collapsed ? expand(0, 0, btnR) : collapse(0, 0, btnR);
+    const d = collapsed ? expand(0, y, btnR) : collapse(0, y, btnR);
 
     const hitArea = this.upsert('hit-area', Circle, { cy: y, r: 10, fill: '#fff', cursor: 'pointer' }, this);
     this.upsert('button', Path, { stroke: '#3d81f7', d, cursor: 'pointer' }, hitArea);
diff --git a/packages/site/examples/element/node/demo/donut.js b/packages/site/examples/element/node/demo/donut.js
index 2b514faaf9a..daf52f3b58b 100644
--- a/packages/site/examples/element/node/demo/donut.js
+++ b/packages/site/examples/element/node/demo/donut.js
@@ -5,6 +5,7 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
+      animation: false,
       data,
       node: {
         type: 'donut',
diff --git a/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js b/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js
index b4316d58305..4cfc445af71 100644
--- a/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js
+++ b/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js
@@ -6,7 +6,6 @@ fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json')
     const graph = new Graph({
       container: 'container',
       autoFit: 'view',
-      animation: true,
       data,
       node: {
         type: 'rect',
diff --git a/packages/site/examples/layout/dendrogram/demo/vertical.js b/packages/site/examples/layout/dendrogram/demo/vertical.js
index 748ff383b24..1fcaf681649 100644
--- a/packages/site/examples/layout/dendrogram/demo/vertical.js
+++ b/packages/site/examples/layout/dendrogram/demo/vertical.js
@@ -14,6 +14,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
             labelText: data.id,
             labelWordWrap: true,
             labelWordWrapWidth: 150,
+            labelDx: isLeaf ? 20 : 0,
             labelDy: isLeaf ? 0 : 20,
             labelTextAlign: isLeaf ? 'start' : 'center',
             labelTextBaseline: 'middle',
diff --git a/packages/site/examples/layout/force-directed/demo/3d-force.js b/packages/site/examples/layout/force-directed/demo/3d-force.js
index cb7607a8bf4..f018ba31907 100644
--- a/packages/site/examples/layout/force-directed/demo/3d-force.js
+++ b/packages/site/examples/layout/force-directed/demo/3d-force.js
@@ -13,7 +13,6 @@ fetch('https://assets.antv.antgroup.com/g6/d3-force-3d.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       renderer,
       data,
       layout: {
diff --git a/packages/site/examples/layout/force-directed/demo/collision.js b/packages/site/examples/layout/force-directed/demo/collision.js
index e9ef9ea0df7..85ac5ddbabf 100644
--- a/packages/site/examples/layout/force-directed/demo/collision.js
+++ b/packages/site/examples/layout/force-directed/demo/collision.js
@@ -50,7 +50,6 @@ const width = container.scrollWidth;
 
 const graph = new Graph({
   container,
-  animation: true,
   data: getData(width),
   layout: {
     type: 'd3force',
diff --git a/packages/site/examples/layout/force-directed/demo/d3-force.js b/packages/site/examples/layout/force-directed/demo/d3-force.js
index d153cd4ff11..f9d32da8acf 100644
--- a/packages/site/examples/layout/force-directed/demo/d3-force.js
+++ b/packages/site/examples/layout/force-directed/demo/d3-force.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       node: {
         style: {
diff --git a/packages/site/examples/layout/force-directed/demo/force.js b/packages/site/examples/layout/force-directed/demo/force.js
index 9ea5cc5c10d..f1ca480ee5b 100644
--- a/packages/site/examples/layout/force-directed/demo/force.js
+++ b/packages/site/examples/layout/force-directed/demo/force.js
@@ -19,7 +19,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
       layout: {
         type: 'force',
         linkDistance: 50,
-        animation: true,
         clustering: true,
         nodeClusterBy: 'cluster',
         clusterNodeStrength: 70,
diff --git a/packages/site/examples/layout/force-directed/demo/mesh.js b/packages/site/examples/layout/force-directed/demo/mesh.js
index ad50259a66e..92160cdc437 100644
--- a/packages/site/examples/layout/force-directed/demo/mesh.js
+++ b/packages/site/examples/layout/force-directed/demo/mesh.js
@@ -13,7 +13,6 @@ function getData(size = 10) {
 }
 
 const graph = new Graph({
-  animation: true,
   data: getData(),
   layout: {
     type: 'd3force',
diff --git a/packages/site/examples/layout/fruchterman/demo/basic.js b/packages/site/examples/layout/fruchterman/demo/basic.js
index 2fc33b52bcc..59ea68f7b12 100644
--- a/packages/site/examples/layout/fruchterman/demo/basic.js
+++ b/packages/site/examples/layout/fruchterman/demo/basic.js
@@ -24,7 +24,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
           field: 'cluster',
         },
       },
-      animation: true,
       behaviors: ['drag-canvas', 'drag-element'],
     });
 
diff --git a/packages/site/examples/layout/fruchterman/demo/cluster.js b/packages/site/examples/layout/fruchterman/demo/cluster.js
index 4481bac0cdd..18b97e7ebfe 100644
--- a/packages/site/examples/layout/fruchterman/demo/cluster.js
+++ b/packages/site/examples/layout/fruchterman/demo/cluster.js
@@ -31,7 +31,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['drag-canvas', 'drag-element'],
-      animation: true,
     });
 
     graph.render();
diff --git a/packages/site/examples/layout/grid/demo/basic.js b/packages/site/examples/layout/grid/demo/basic.js
index 6fc8d362898..47a99171a8e 100644
--- a/packages/site/examples/layout/grid/demo/basic.js
+++ b/packages/site/examples/layout/grid/demo/basic.js
@@ -23,7 +23,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'],
-      animation: true,
     });
 
     graph.render();
diff --git a/packages/site/examples/layout/mds/demo/basic.js b/packages/site/examples/layout/mds/demo/basic.js
index cb9303cd735..5a53716b810 100644
--- a/packages/site/examples/layout/mds/demo/basic.js
+++ b/packages/site/examples/layout/mds/demo/basic.js
@@ -25,7 +25,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
-      animation: true,
     });
 
     graph.render();
diff --git a/packages/site/examples/layout/mechanism/demo/change-data.js b/packages/site/examples/layout/mechanism/demo/change-data.js
index b4f3a1847b3..3e236e34181 100644
--- a/packages/site/examples/layout/mechanism/demo/change-data.js
+++ b/packages/site/examples/layout/mechanism/demo/change-data.js
@@ -20,7 +20,6 @@ const fetchData = async (type) => {
 fetchData('small').then((data) => {
   const graph = new Graph({
     container: 'container',
-    animation: true,
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     layout: {
       type: 'force',
diff --git a/packages/site/examples/layout/mechanism/demo/switch.js b/packages/site/examples/layout/mechanism/demo/switch.js
index ccafe6ff5aa..800620fa970 100644
--- a/packages/site/examples/layout/mechanism/demo/switch.js
+++ b/packages/site/examples/layout/mechanism/demo/switch.js
@@ -5,7 +5,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       layout: {
         type: 'circular',
       },
diff --git a/packages/site/examples/plugin/bubble-sets/demo/basic.js b/packages/site/examples/plugin/bubble-sets/demo/basic.js
index 6158901e50f..61013e7da81 100644
--- a/packages/site/examples/plugin/bubble-sets/demo/basic.js
+++ b/packages/site/examples/plugin/bubble-sets/demo/basic.js
@@ -30,7 +30,6 @@ fetch('https://assets.antv.antgroup.com/g6/collection.json')
       layout: {
         type: 'force',
         preventOverlap: true,
-        animation: true,
         linkDistance: (d) => {
           if (d.source === 'node0' || d.target === 'node0') {
             return 200;
diff --git a/packages/site/examples/plugin/hull/demo/basic.js b/packages/site/examples/plugin/hull/demo/basic.js
index a67f3dba267..661344b813e 100644
--- a/packages/site/examples/plugin/hull/demo/basic.js
+++ b/packages/site/examples/plugin/hull/demo/basic.js
@@ -30,7 +30,6 @@ fetch('https://assets.antv.antgroup.com/g6/collection.json')
       layout: {
         type: 'force',
         preventOverlap: true,
-        animation: true,
         linkDistance: (d) => {
           if (d.source === 'node0' || d.target === 'node0') {
             return 200;