diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51e062bfd..252faa779 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,10 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+### Features
+
+- Added Animation field for Column, Pie and Scatter charts 🎬
+- Added animations to columns in Column chart (position, size, color)
 
 ## [3.19.16] - 2023-05-12
 
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index 55fbf27db..a53907ca8 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -174,6 +174,8 @@ const useAreasState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for areas
+    animationField: undefined,
     getX,
     getSegment,
   });
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index 5643854d9..05a1cfa73 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -10,9 +10,13 @@ import {
  * Related to config-types.ts.
  */
 
+type BaseEncodingFieldType = "animation";
 type MapEncodingFieldType = "baseLayer" | "areaLayer" | "symbolLayer";
 type XYEncodingFieldType = "x" | "y" | "segment";
-export type EncodingFieldType = MapEncodingFieldType | XYEncodingFieldType;
+export type EncodingFieldType =
+  | BaseEncodingFieldType
+  | MapEncodingFieldType
+  | XYEncodingFieldType;
 
 export type EncodingOption =
   | { field: "chartSubType" }
@@ -168,6 +172,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
           { field: "useAbbreviations" },
         ],
       },
+      {
+        field: "animation",
+        optional: true,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
     ],
     interactiveFilters: ["legend", "timeRange"],
   },
@@ -277,6 +287,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
           { field: "useAbbreviations" },
         ],
       },
+      {
+        field: "animation",
+        optional: true,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
     ],
     interactiveFilters: ["legend"],
   },
@@ -305,6 +321,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
           { field: "useAbbreviations" },
         ],
       },
+      {
+        field: "animation",
+        optional: true,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
     ],
     interactiveFilters: ["legend"],
   },
diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index d338b6f19..48edfcfa7 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -132,10 +132,13 @@ export const ChartColumns = memo(
                 fields.segment && interactiveFiltersConfig?.legend.active
               }
             />
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
+                showPlayButton={fields.animation.showPlayButton}
+                animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </StackedColumnsChart>
@@ -167,10 +170,13 @@ export const ChartColumns = memo(
                 fields.segment && interactiveFiltersConfig?.legend.active
               }
             />
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
+                showPlayButton={fields.animation.showPlayButton}
+                animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </GroupedColumnChart>
@@ -194,10 +200,13 @@ export const ChartColumns = memo(
               </ChartSvg>
               <Tooltip type="single" />
             </ChartContainer>
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
+                showPlayButton={fields.animation.showPlayButton}
+                animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </ColumnChart>
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index bd9bf2081..65e030182 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -187,6 +187,7 @@ const useGroupedColumnsState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getX: getXAsDate,
     getSegment,
   });
diff --git a/app/charts/column/columns-grouped.tsx b/app/charts/column/columns-grouped.tsx
index b47733002..ec25468d9 100644
--- a/app/charts/column/columns-grouped.tsx
+++ b/app/charts/column/columns-grouped.tsx
@@ -1,5 +1,8 @@
+import { select } from "d3";
+import React from "react";
+
 import { GroupedColumnsState } from "@/charts/column/columns-grouped-state";
-import { Column } from "@/charts/column/rendering-utils";
+import { RenderDatum, renderColumn } from "@/charts/column/rendering-utils";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { VerticalWhisker } from "@/charts/whiskers";
 
@@ -44,6 +47,12 @@ export const ErrorWhiskers = () => {
   );
 };
 
+type GroupedRenderDatum = {
+  key: string;
+  x: number;
+  data: RenderDatum[];
+};
+
 export const ColumnsGrouped = () => {
   const {
     bounds,
@@ -55,28 +64,58 @@ export const ColumnsGrouped = () => {
     colors,
     grouped,
   } = useChartState() as GroupedColumnsState;
+  const ref = React.useRef<SVGGElement>(null);
   const { margins } = bounds;
 
-  return (
-    <g transform={`translate(${margins.left} ${margins.top})`}>
-      {grouped.map((segment) => (
-        <g key={segment[0]} transform={`translate(${xScale(segment[0])}, 0)`}>
-          {segment[1].map((d, i) => {
-            const y = getY(d) ?? NaN;
+  const bandwidth = xScaleIn.bandwidth();
+  const y0 = yScale(0);
+  const renderData: GroupedRenderDatum[] = React.useMemo(() => {
+    return grouped.map((segment) => {
+      return {
+        key: segment[0],
+        x: xScale(segment[0]) as number,
+        data: segment[1].map((d) => {
+          const y = getY(d) ?? NaN;
 
-            return (
-              <Column
-                key={i}
-                x={xScaleIn(getSegment(d)) as number}
-                y={yScale(Math.max(y, 0))}
-                width={xScaleIn.bandwidth()}
-                height={Math.abs(yScale(y) - yScale(0))}
-                color={colors(getSegment(d))}
-              />
-            );
-          })}
-        </g>
-      ))}
-    </g>
+          return {
+            x: xScaleIn(getSegment(d)) as number,
+            y: yScale(Math.max(y, 0)),
+            width: bandwidth,
+            height: Math.abs(yScale(y) - y0),
+            color: colors(getSegment(d)),
+          };
+        }),
+      };
+    });
+  }, [
+    colors,
+    getSegment,
+    bandwidth,
+    getY,
+    grouped,
+    xScaleIn,
+    xScale,
+    yScale,
+    y0,
+  ]);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      select(ref.current)
+        .selectAll<SVGGElement, GroupedRenderDatum>("g")
+        .data(renderData, (d) => d.key)
+        .join("g")
+        .attr("transform", (d) => `translate(${d.x}, 0)`)
+        .selectAll<SVGRectElement, RenderDatum>("rect")
+        .data(
+          (d) => d.data,
+          (d) => d.x
+        )
+        .call(renderColumn, y0);
+    }
+  }, [renderData, y0]);
+
+  return (
+    <g ref={ref} transform={`translate(${margins.left} ${margins.top})`} />
   );
 };
diff --git a/app/charts/column/columns-simple.tsx b/app/charts/column/columns-simple.tsx
index 10059a239..23490ca96 100644
--- a/app/charts/column/columns-simple.tsx
+++ b/app/charts/column/columns-simple.tsx
@@ -1,5 +1,8 @@
+import { select } from "d3";
+import React from "react";
+
 import { ColumnsState } from "@/charts/column/columns-state";
-import { Column } from "@/charts/column/rendering-utils";
+import { RenderDatum, renderColumn } from "@/charts/column/rendering-utils";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { VerticalWhisker } from "@/charts/whiskers";
 import { useTheme } from "@/themes";
@@ -42,30 +45,50 @@ export const ErrorWhiskers = () => {
 };
 
 export const Columns = () => {
+  const ref = React.useRef<SVGGElement>(null);
   const { preparedData, bounds, getX, xScale, getY, yScale } =
     useChartState() as ColumnsState;
   const theme = useTheme();
   const { margins } = bounds;
 
+  const bandwidth = xScale.bandwidth();
+  const y0 = yScale(0);
+  const renderData: RenderDatum[] = React.useMemo(() => {
+    const getColor = (d: number) => {
+      return d <= 0 ? theme.palette.secondary.main : theme.palette.primary.main;
+    };
+
+    return preparedData.map((d) => {
+      const xScaled = xScale(getX(d)) as number;
+      const y = getY(d) ?? NaN;
+      const yScaled = yScale(y);
+      const height = Math.abs(yScaled - y0);
+      const color = getColor(y);
+
+      return { x: xScaled, y: yScaled, width: bandwidth, height, color };
+    });
+  }, [
+    preparedData,
+    bandwidth,
+    getX,
+    getY,
+    xScale,
+    yScale,
+    y0,
+    theme.palette.primary.main,
+    theme.palette.secondary.main,
+  ]);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      select(ref.current)
+        .selectAll<SVGRectElement, RenderDatum>("rect")
+        .data(renderData, (d) => d.x)
+        .call(renderColumn, y0);
+    }
+  }, [renderData, yScale, y0]);
+
   return (
-    <g transform={`translate(${margins.left} ${margins.top})`}>
-      {preparedData.map((d, i) => {
-        const y = getY(d) ?? NaN;
-        const x = xScale(getX(d)) as number;
-        return (
-          <Column
-            key={i}
-            data-index={i}
-            width={xScale.bandwidth()}
-            x={x}
-            y={yScale(Math.max(y, 0))}
-            height={Math.abs(yScale(y) - yScale(0))}
-            color={
-              y <= 0 ? theme.palette.secondary.main : theme.palette.primary.main
-            }
-          />
-        );
-      })}
-    </g>
+    <g ref={ref} transform={`translate(${margins.left} ${margins.top})`} />
   );
 };
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 328f950ef..3580f520f 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -200,6 +200,7 @@ const useColumnsStackedState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getX: getXAsDate,
     getSegment,
   });
diff --git a/app/charts/column/columns-stacked.tsx b/app/charts/column/columns-stacked.tsx
index 7b1c580d2..0565f7916 100644
--- a/app/charts/column/columns-stacked.tsx
+++ b/app/charts/column/columns-stacked.tsx
@@ -1,29 +1,60 @@
+import { select } from "d3";
+import React from "react";
+
 import { StackedColumnsState } from "@/charts/column/columns-stacked-state";
-import { Column } from "@/charts/column/rendering-utils";
+import { RenderDatum, renderColumn } from "@/charts/column/rendering-utils";
 import { useChartState } from "@/charts/shared/use-chart-state";
 
+type StackedRenderDatum = {
+  key: string;
+  data: RenderDatum[];
+};
+
 export const ColumnsStacked = () => {
+  const ref = React.useRef<SVGGElement>(null);
   const { bounds, getX, xScale, yScale, colors, series } =
     useChartState() as StackedColumnsState;
   const { margins } = bounds;
 
+  const bandwidth = xScale.bandwidth();
+  const y0 = yScale(0);
+  const renderData: StackedRenderDatum[] = React.useMemo(() => {
+    return series.map((d) => {
+      const key = d.key;
+      const color = colors(key);
+
+      return {
+        key,
+        data: d.map((segment: $FixMe) => {
+          return {
+            x: xScale(getX(segment.data)) as number,
+            y: yScale(segment[1]),
+            width: bandwidth,
+            height: y0 - yScale(segment[1] - segment[0]),
+            color,
+          };
+        }),
+      };
+    });
+  }, [bandwidth, colors, getX, series, xScale, y0, yScale]);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      select(ref.current)
+        .selectAll<SVGGElement, StackedRenderDatum>("g")
+        .data(renderData, (d) => d.key)
+        .join("g")
+        .attr("data-n", (d) => d.key)
+        .selectAll<SVGRectElement, RenderDatum>("rect")
+        .data(
+          (d) => d.data,
+          (d) => `${d.x}-${d.y}`
+        )
+        .call(renderColumn, y0);
+    }
+  }, [renderData, y0]);
+
   return (
-    <g transform={`translate(${margins.left} ${margins.top})`}>
-      {series.map((sv) => (
-        <g key={sv.key} fill={colors(sv.key)} data-n={sv.key}>
-          {sv.map((segment: $FixMe, i: number) => {
-            return (
-              <Column
-                key={`${getX(segment.data)}-${i}`}
-                x={xScale(getX(segment.data)) as number}
-                y={yScale(segment[1])}
-                width={xScale.bandwidth()}
-                height={yScale(segment[0]) - yScale(segment[1])}
-              />
-            );
-          })}
-        </g>
-      ))}
-    </g>
+    <g ref={ref} transform={`translate(${margins.left} ${margins.top})`} />
   );
 };
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
index bcc1ffffe..31060aec1 100644
--- a/app/charts/column/columns-state.tsx
+++ b/app/charts/column/columns-state.tsx
@@ -162,6 +162,7 @@ const useColumnsState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getX: getXAsDate,
   });
 
diff --git a/app/charts/column/rendering-utils.tsx b/app/charts/column/rendering-utils.tsx
index be423e3a7..b8838cb99 100644
--- a/app/charts/column/rendering-utils.tsx
+++ b/app/charts/column/rendering-utils.tsx
@@ -1,30 +1,46 @@
-import { HTMLAttributes, memo } from "react";
+import { Selection } from "d3";
 
-export const Column = memo(
-  ({
-    x,
-    y,
-    width,
-    height,
-    color,
-    ...props
-  }: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    color?: string;
-  } & HTMLAttributes<SVGRectElement>) => {
-    return (
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        fill={color}
-        stroke="none"
-        {...props}
-      />
-    );
-  }
-);
+export type RenderDatum = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+};
+
+export const renderColumn = (
+  g: Selection<SVGRectElement, RenderDatum, SVGGElement, unknown>,
+  y0: number
+) => {
+  g.join(
+    (enter) =>
+      enter
+        .append("rect")
+        .attr("data-index", (_, i) => i)
+        .attr("x", (d) => d.x)
+        .attr("y", y0)
+        .attr("width", (d) => d.width)
+        .attr("height", 0)
+        .attr("fill", (d) => d.color)
+        .call((enter) =>
+          enter
+            .transition()
+            .attr("y", (d) => d.y)
+            .attr("height", (d) => d.height)
+        ),
+    (update) =>
+      update.call((update) =>
+        update
+          .transition()
+          .attr("x", (d) => d.x)
+          .attr("y", (d) => d.y)
+          .attr("width", (d) => d.width)
+          .attr("height", (d) => d.height)
+          .attr("fill", (d) => d.color)
+      ),
+    (exit) =>
+      exit.call((exit) =>
+        exit.transition().attr("y", y0).attr("height", 0).remove()
+      )
+  );
+};
diff --git a/app/charts/index.ts b/app/charts/index.ts
index fe29d2e07..492c2448a 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -100,7 +100,6 @@ export const findPreferredDimension = (
 };
 
 const INITIAL_INTERACTIVE_FILTERS_CONFIG: InteractiveFiltersConfig = {
-  // FIXME: we shouldn't keep empty props
   legend: {
     active: false,
     componentIri: "",
@@ -114,9 +113,6 @@ const INITIAL_INTERACTIVE_FILTERS_CONFIG: InteractiveFiltersConfig = {
       to: "",
     },
   },
-  timeSlider: {
-    componentIri: "",
-  },
   dataFilters: {
     active: false,
     componentIris: [],
@@ -474,6 +470,7 @@ const getAdjustedChartConfig = ({
           );
         case "filters":
         case "fields.segment":
+        case "fields.animation":
         case "interactiveFiltersConfig.legend":
           return true;
         default:
@@ -658,6 +655,15 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           }
         });
       },
+      animation: ({ oldValue, newChartConfig }) => {
+        return produce(newChartConfig, (draft) => {
+          // Temporal dimension could be used as X axis, in this case we need to
+          // remove the animation.
+          if (newChartConfig.fields.x.componentIri !== oldValue?.componentIri) {
+            draft.fields.animation = oldValue;
+          }
+        });
+      },
     },
     interactiveFiltersConfig: interactiveFiltersAdjusters,
   },
@@ -865,6 +871,18 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           }
         });
       },
+      animation: ({ oldValue, newChartConfig }) => {
+        return produce(newChartConfig, (draft) => {
+          // Temporal dimension could be used as X or Y axis, in this case we need to
+          // remove the animation.
+          if (
+            newChartConfig.fields.x.componentIri !== oldValue?.componentIri &&
+            newChartConfig.fields.y.componentIri !== oldValue?.componentIri
+          ) {
+            draft.fields.animation = oldValue;
+          }
+        });
+      },
     },
     interactiveFiltersConfig: interactiveFiltersAdjusters,
   },
@@ -924,6 +942,11 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           }
         });
       },
+      animation: ({ oldValue, newChartConfig }) => {
+        return produce(newChartConfig, (draft) => {
+          draft.fields.animation = oldValue;
+        });
+      },
     },
     interactiveFiltersConfig: interactiveFiltersAdjusters,
   },
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index cf66c2e8b..2d8b2bf93 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -154,6 +154,8 @@ const useLinesState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for lines
+    animationField: undefined,
     getX,
     getSegment,
   });
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 52e3ee395..084e407d1 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -122,10 +122,13 @@ export const ChartPie = memo(
           }
         />
 
-        {interactiveFiltersConfig?.timeSlider.componentIri && (
+        {fields.animation && (
           <TimeSlider
-            componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+            componentIri={fields.animation.componentIri}
             dimensions={dimensions}
+            showPlayButton={fields.animation.showPlayButton}
+            animationDuration={fields.animation.duration}
+            animationType={fields.animation.type}
           />
         )}
       </PieChart>
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index d472dc37e..b865f61e8 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -99,6 +99,7 @@ const usePieState = (
   const { preparedData } = useDataAfterInteractiveFilters({
     sortedData: plottableData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getSegment,
   });
 
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index f0d2af8f7..903ba0b71 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -127,10 +127,13 @@ export const ChartScatterplot = memo(
           }
         />
 
-        {interactiveFiltersConfig?.timeSlider.componentIri && (
+        {fields.animation && (
           <TimeSlider
-            componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+            componentIri={fields.animation.componentIri}
             dimensions={dimensions}
+            showPlayButton={fields.animation.showPlayButton}
+            animationDuration={fields.animation.duration}
+            animationType={fields.animation.type}
           />
         )}
       </ScatterplotChart>
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
index 0f52280aa..59ca7b405 100644
--- a/app/charts/scatterplot/scatterplot-state.tsx
+++ b/app/charts/scatterplot/scatterplot-state.tsx
@@ -107,6 +107,8 @@ const useScatterplotState = ({
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for scatterplot
+    animationField: undefined,
     getSegment,
   });
   const xMeasure = measures.find((d) => d.iri === fields.x.componentIri);
diff --git a/app/charts/shared/chart-helpers.spec.tsx b/app/charts/shared/chart-helpers.spec.tsx
index 086021094..77af7f3aa 100644
--- a/app/charts/shared/chart-helpers.spec.tsx
+++ b/app/charts/shared/chart-helpers.spec.tsx
@@ -44,9 +44,6 @@ const commonInteractiveFiltersConfig: InteractiveFiltersConfig = {
       to: "2020-01-01",
     },
   },
-  timeSlider: {
-    componentIri: "",
-  },
   dataFilters: {
     componentIris: [col("3"), col("4")],
     active: false,
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 717987e2b..5e1126f45 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -12,13 +12,10 @@ import {
   InteractiveFiltersState,
   useInteractiveFilters,
 } from "@/charts/shared/use-interactive-filters";
-import {
-  CategoricalColorField,
-  InteractiveFiltersTimeSlider,
-  NumericalColorField,
-} from "@/configurator";
+import { CategoricalColorField, NumericalColorField } from "@/configurator";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
+  AnimationField,
   ChartConfig,
   ChartType,
   Filters,
@@ -47,17 +44,13 @@ export const prepareQueryFilters = (
   dataFilters: InteractiveFiltersState["dataFilters"]
 ): Filters => {
   let queryFilters = filters;
-  const { timeSlider } = interactiveFiltersConfig || {};
 
   if (chartType !== "table" && interactiveFiltersConfig?.dataFilters.active) {
     queryFilters = { ...queryFilters, ...dataFilters };
   }
 
-  queryFilters = omitBy(queryFilters, (v, k) => {
-    return (
-      (v.type === "single" && v.value === FIELD_VALUE_NONE) ||
-      k === timeSlider?.componentIri
-    );
+  queryFilters = omitBy(queryFilters, (v) => {
+    return v.type === "single" && v.value === FIELD_VALUE_NONE;
   });
 
   return queryFilters;
@@ -131,9 +124,6 @@ export const getChartConfigComponentIris = (chartConfig: ChartConfig) => {
       const v = IFConfig[k];
 
       switch (k) {
-        case "timeSlider":
-          IFIris.push((v as InteractiveFiltersTimeSlider).componentIri);
-          break;
         case "legend":
           IFIris.push((v as InteractiveFiltersLegend).componentIri);
           break;
@@ -187,11 +177,13 @@ type ValuePredicate = (v: any) => boolean;
 export const useDataAfterInteractiveFilters = ({
   sortedData,
   interactiveFiltersConfig,
+  animationField,
   getX,
   getSegment,
 }: {
   sortedData: Observation[];
   interactiveFiltersConfig: InteractiveFiltersConfig;
+  animationField: AnimationField | undefined;
   getX?: (d: Observation) => Date;
   getSegment?: (d: Observation) => string;
 }): {
@@ -211,9 +203,7 @@ export const useDataAfterInteractiveFilters = ({
   const toTime = IFState.timeRange.to?.getTime();
 
   // time slider
-  const getTime = useTemporalVariable(
-    interactiveFiltersConfig?.timeSlider.componentIri || ""
-  );
+  const getTime = useTemporalVariable(animationField?.componentIri ?? "");
   const timeSliderValue = IFState.timeSlider.value;
 
   // legend
@@ -228,7 +218,7 @@ export const useDataAfterInteractiveFilters = ({
           }
         : null;
     const timeSliderFilter =
-      interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+      animationField?.componentIri && timeSliderValue
         ? (d: Observation) => {
             return getTime(d).getTime() === timeSliderValue.getTime();
           }
@@ -254,8 +244,8 @@ export const useDataAfterInteractiveFilters = ({
     fromTime,
     toTime,
     interactiveFiltersConfig?.timeRange.active,
-    interactiveFiltersConfig?.timeSlider.componentIri,
     interactiveFiltersConfig?.legend.active,
+    animationField,
     timeSliderValue,
     getSegment,
     getTime,
@@ -267,7 +257,7 @@ export const useDataAfterInteractiveFilters = ({
   }, [allFilters, sortedData]);
 
   const timeSliderFilterPresent = !!(
-    interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+    animationField?.componentIri && timeSliderValue
   );
 
   const scalesData = timeSliderFilterPresent ? sortedData : preparedData;
diff --git a/app/charts/shared/use-sync-interactive-filters.spec.tsx b/app/charts/shared/use-sync-interactive-filters.spec.tsx
index fc8554d5b..0748323ae 100644
--- a/app/charts/shared/use-sync-interactive-filters.spec.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.spec.tsx
@@ -9,13 +9,9 @@ import {
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
 import {
   ChartConfig,
-  ConfiguratorStateConfiguringChart,
   InteractiveFiltersConfig,
 } from "@/configurator/config-types";
 import fixture from "@/test/__fixtures/config/dev/4YL1p4QTFQS4.json";
-const { handleInteractiveFilterTimeSliderReset } = jest.requireActual(
-  "@/configurator/configurator-state"
-);
 
 const interactiveFiltersConfig: InteractiveFiltersConfig = {
   legend: {
@@ -28,10 +24,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
       "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
     ],
   },
-  timeSlider: {
-    componentIri:
-      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/0",
-  },
   timeRange: {
     active: false,
     componentIri: "https://fake-iri/dimension/2",
@@ -43,26 +35,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
   },
 };
 
-const configuratorState = {
-  state: "CONFIGURING_CHART",
-  chartConfig: {
-    interactiveFiltersConfig,
-  },
-} as unknown as ConfiguratorStateConfiguringChart;
-
-jest.mock("@/configurator/configurator-state", () => {
-  return {
-    useConfiguratorState: () => {
-      return [
-        configuratorState,
-        (_: { type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" }) => {
-          handleInteractiveFilterTimeSliderReset(configuratorState);
-        },
-      ];
-    },
-  };
-});
-
 const chartConfig = {
   ...fixture.data.chartConfig,
   interactiveFiltersConfig,
@@ -142,10 +114,6 @@ describe("useSyncInteractiveFilters", () => {
         "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1/1",
     });
 
-    expect(
-      configuratorState.chartConfig.interactiveFiltersConfig?.timeSlider
-        .componentIri
-    ).toEqual("");
     expect(IFState2.timeSlider.value).toBeUndefined();
   });
 });
diff --git a/app/charts/shared/use-sync-interactive-filters.tsx b/app/charts/shared/use-sync-interactive-filters.tsx
index 9a7099d3a..82e148919 100644
--- a/app/charts/shared/use-sync-interactive-filters.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.tsx
@@ -7,12 +7,9 @@ import {
   FilterValueSingle,
   isSegmentInConfig,
 } from "@/configurator/config-types";
-import { useConfiguratorState } from "@/configurator/configurator-state";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import useFilterChanges from "@/configurator/use-filter-changes";
 
-import { getFieldComponentIri } from "..";
-
 /**
  * Makes sure interactive filters are in sync with chart config.
  *
@@ -22,7 +19,6 @@ import { getFieldComponentIri } from "..";
  */
 const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   const [IFstate, dispatch] = useInteractiveFilters();
-  const [_, dispatchConfigurator] = useConfiguratorState();
   const { interactiveFiltersConfig } = chartConfig;
 
   // Time range filter
@@ -46,32 +42,6 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
-  // Time slider filter
-  const timeSliderFilter = interactiveFiltersConfig?.timeSlider;
-  const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
-  useEffect(() => {
-    if (
-      timeSliderFilter?.componentIri === "" &&
-      IFstate.timeSlider.value !== undefined
-    ) {
-      dispatch({ type: "RESET_TIME_SLIDER_FILTER" });
-    }
-
-    if (
-      xComponentIri !== undefined &&
-      xComponentIri === timeSliderFilter?.componentIri
-    ) {
-      dispatchConfigurator({ type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" });
-    }
-  }, [
-    IFstate.timeSlider.value,
-    timeSliderFilter?.componentIri,
-    dispatch,
-    dispatchConfigurator,
-    interactiveFiltersConfig,
-    xComponentIri,
-  ]);
-
   // Data Filters
   const componentIris = interactiveFiltersConfig?.dataFilters.componentIris;
   useEffect(() => {
diff --git a/app/components/form.tsx b/app/components/form.tsx
index b93670361..f5af1be4e 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -643,6 +643,7 @@ export const FieldSetLegend = ({
       fontWeight: "regular",
       fontSize: ["0.625rem", "0.75rem", "0.75rem"],
       pl: 0,
+      mb: 1,
       ...sx,
     }}
   >
diff --git a/app/configurator/components/chart-annotations-selector.tsx b/app/configurator/components/chart-annotations-selector.tsx
index fbc9801f9..ff8b1818d 100644
--- a/app/configurator/components/chart-annotations-selector.tsx
+++ b/app/configurator/components/chart-annotations-selector.tsx
@@ -74,7 +74,6 @@ export const ChartAnnotationsSelector = ({
       case "dataFilters":
       case "legend":
       case "timeRange":
-      case "timeSlider":
         return true;
 
       default:
diff --git a/app/configurator/components/chart-controls/control-tab.tsx b/app/configurator/components/chart-controls/control-tab.tsx
index 09ec7557e..c4ae933a0 100644
--- a/app/configurator/components/chart-controls/control-tab.tsx
+++ b/app/configurator/components/chart-controls/control-tab.tsx
@@ -1,7 +1,7 @@
 import { Trans } from "@lingui/macro";
 import { Box, Button, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import Flex from "@/components/flex";
 import { FieldProps } from "@/configurator";
@@ -9,6 +9,8 @@ import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
+import SvgIcEdit from "@/icons/components/IcEdit";
+import useEvent from "@/utils/use-event";
 
 export const ControlTab = ({
   component,
@@ -16,46 +18,45 @@ export const ControlTab = ({
   onClick,
   checked,
   labelId,
-  rightIcon,
 }: {
   component?: DimensionMetadataFragment;
   value: string;
   onClick: (x: string) => void;
   labelId: string;
-  rightIcon?: React.ReactNode;
 } & FieldProps) => {
+  const handleClick = useEvent(() => onClick(value));
+
   return (
-    <Box
-      sx={{
-        width: "100%",
-        borderRadius: 1.5,
-        my: "2px",
-      }}
-    >
-      <ControlTabButton
-        checked={checked}
-        value={value}
-        onClick={() => onClick(value)}
-      >
+    <Box sx={{ width: "100%", borderRadius: 1.5, my: "2px" }}>
+      <ControlTabButton checked={checked} value={value} onClick={handleClick}>
         <ControlTabButtonInner
           iconName={getIconName(value)}
           upperLabel={getFieldLabel(labelId)}
           mainLabel={
-            component ? (
-              component.label
-            ) : (
-              <Trans id="controls.color.add">Add ...</Trans>
-            )
+            component?.label ?? <Trans id="controls.color.add">Add…</Trans>
           }
           checked={checked}
           optional={!component}
-          rightIcon={rightIcon}
+          rightIcon={<FieldEditIcon />}
         />
       </ControlTabButton>
     </Box>
   );
 };
 
+const useFieldIconStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    color: theme.palette.primary.main,
+    width: 18,
+    height: 18,
+  },
+}));
+
+const FieldEditIcon = () => {
+  const classes = useFieldIconStyles();
+  return <SvgIcEdit className={classes.root} />;
+};
+
 export const OnOffControlTab = ({
   value,
   label,
@@ -202,7 +203,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     "&:active": {
       backgroundColor: theme.palette.action.hover,
     },
-    "&:disabled": {
+    "&.Mui-disabled": {
       cursor: "initial",
       backgroundColor: theme.palette.muted.main,
     },
@@ -238,9 +239,7 @@ export const ControlTabButton = ({
       id={`tab-${value}`}
       onClick={() => onClick(value)}
       className={classes.controlTabButton}
-      sx={{
-        backgroundColor: checked ? "action.hover" : "grey.100",
-      }}
+      sx={{ backgroundColor: checked ? "action.hover" : "grey.100" }}
     >
       {children}
     </Button>
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index 3cd203e9f..1469f7ae4 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -17,6 +17,7 @@ import { useImputationNeeded } from "@/charts/shared/chart-helpers";
 import Flex from "@/components/flex";
 import { FieldSetLegend, Radio, Select } from "@/components/form";
 import {
+  AnimationField,
   ChartConfig,
   ChartType,
   ColorFieldType,
@@ -25,6 +26,7 @@ import {
   ConfiguratorStateConfiguringChart,
   ImputationType,
   imputationTypes,
+  isAnimationInConfig,
   isAreaConfig,
   isConfiguring,
   isTableConfig,
@@ -172,7 +174,11 @@ const ActiveFieldSwitch = ({
   metaData: DataCubeMetadataWithHierarchies;
   imputationNeeded: boolean;
 }) => {
-  const { activeField } = state;
+  const activeField = state.activeField as EncodingFieldType | undefined;
+
+  if (!activeField) {
+    return null;
+  }
 
   const encodings =
     chartConfigOptionsUISpec[state.chartConfig.chartType].encodings;
@@ -180,10 +186,6 @@ const ActiveFieldSwitch = ({
     (e) => e.field === activeField
   ) as EncodingSpec;
 
-  if (!activeField) {
-    return null;
-  }
-
   const activeFieldComponentIri = getFieldComponentIri(
     state.chartConfig.fields,
     activeField
@@ -220,7 +222,7 @@ const EncodingOptionsPanel = ({
 }: {
   encoding: EncodingSpec;
   state: ConfiguratorStateConfiguringChart;
-  field: string;
+  field: EncodingFieldType;
   chartType: ChartType;
   component: DimensionMetadataFragment | undefined;
   dimensions: DimensionMetadataFragment[];
@@ -229,14 +231,13 @@ const EncodingOptionsPanel = ({
 }) => {
   const panelRef = useRef<HTMLDivElement>(null);
 
-  const getFieldLabelHint = {
+  const fieldLabelHint: Partial<Record<EncodingFieldType, string>> = {
     x: t({ id: "controls.select.dimension", message: "Select a dimension" }),
     y: t({ id: "controls.select.measure", message: "Select a measure" }),
-    // Empty strings for optional encodings.
-    baseLayer: "",
-    areaLayer: "",
-    symbolLayer: "",
-    segment: "",
+    animation: t({
+      id: "controls.select.dimension",
+      message: "Select a dimension",
+    }),
   };
 
   useEffect(() => {
@@ -318,7 +319,7 @@ const EncodingOptionsPanel = ({
           <ControlSectionContent gap="none">
             <ChartFieldField
               field={encoding.field}
-              label={getFieldLabelHint[encoding.field]}
+              label={fieldLabelHint[encoding.field]}
               optional={encoding.optional}
               options={options}
             />
@@ -390,6 +391,7 @@ const EncodingOptionsPanel = ({
             }
           />
         )}
+
       {optionsByField["showStandardError"] && hasStandardError && (
         <ControlSection>
           <SectionTitle iconName="eye">
@@ -407,9 +409,11 @@ const EncodingOptionsPanel = ({
           </ControlSectionContent>
         </ControlSection>
       )}
+
       {optionsByField["imputationType"] && isAreaConfig(state.chartConfig) && (
         <ChartImputationType state={state} disabled={!imputationNeeded} />
       )}
+
       <ChartFieldMultiFilter
         state={state}
         component={component}
@@ -418,6 +422,13 @@ const EncodingOptionsPanel = ({
         dimensions={dimensions}
         measures={measures}
       />
+
+      {fieldDimension &&
+        field === "animation" &&
+        isAnimationInConfig(state.chartConfig) &&
+        state.chartConfig.fields.animation && (
+          <ChartFieldAnimation field={state.chartConfig.fields.animation} />
+        )}
     </div>
   );
 };
@@ -446,6 +457,81 @@ const ChartFieldAbbreviations = ({
   );
 };
 
+const ChartFieldAnimation = ({ field }: { field: AnimationField }) => {
+  return (
+    <ControlSection>
+      <SectionTitle iconName="settings">
+        <Trans id="controls.section.animation.settings">
+          Animation Settings
+        </Trans>
+      </SectionTitle>
+      <ControlSectionContent component="fieldset" gap="none">
+        <ChartOptionSwitchField
+          label={t({
+            id: "controls.section.animation.show-play-button",
+            message: "Show Play button",
+          })}
+          field="animation"
+          path="showPlayButton"
+        />
+        {field.showPlayButton && (
+          <>
+            <Box component="fieldset" mt={4}>
+              <FieldSetLegend
+                legendTitle={
+                  <Trans id="controls.section.animation.duration">
+                    Animation Duration
+                  </Trans>
+                }
+              />
+              <Flex sx={{ justifyContent: "flex-start" }}>
+                {[10, 30, 60].map((d) => (
+                  <ChartOptionRadioField
+                    key={d}
+                    label={`${d}s`}
+                    field="animation"
+                    path="duration"
+                    value={d}
+                  />
+                ))}
+              </Flex>
+            </Box>
+            <Box component="fieldset" mt={4}>
+              <FieldSetLegend
+                legendTitle={
+                  <Trans id="controls.section.animation.type">
+                    Animation Type
+                  </Trans>
+                }
+              />
+              <Flex sx={{ justifyContent: "flex-start" }}>
+                <ChartOptionRadioField
+                  label={t({
+                    id: "controls.section.animation.type.continuous",
+                    message: "Continuous",
+                  })}
+                  field="animation"
+                  path="type"
+                  value="continuous"
+                />
+                <ChartOptionRadioField
+                  label={t({
+                    id: "controls.section.animation.type.stepped",
+                    message: "Stepped",
+                  })}
+                  field="animation"
+                  path="type"
+                  value="stepped"
+                />
+              </Flex>
+            </Box>
+          </>
+        )}
+      </ControlSectionContent>
+    </ControlSection>
+  );
+};
+
 const ChartFieldMultiFilter = ({
   state,
   component,
@@ -527,7 +613,6 @@ const ChartFieldOptions = ({
         chartType === "column" && (
           <Box component="fieldset" mt={4}>
             <FieldSetLegend
-              sx={{ mb: 1 }}
               legendTitle={
                 <Trans id="controls.select.column.layout">Column layout</Trans>
               }
@@ -862,7 +947,6 @@ const ChartFieldColorComponent = ({
               nbClass={nbClass}
             />
             <FieldSetLegend
-              sx={{ mb: 1 }}
               legendTitle={t({
                 id: "controls.scale.type",
                 message: "Scale type",
diff --git a/app/configurator/components/field-i18n.ts b/app/configurator/components/field-i18n.ts
index c77264970..7c5d20152 100644
--- a/app/configurator/components/field-i18n.ts
+++ b/app/configurator/components/field-i18n.ts
@@ -14,6 +14,10 @@ const fieldLabels = {
     id: "controls.axis.vertical",
     message: "Vertical axis",
   }),
+  "controls.animation": defineMessage({
+    id: "controls.animation",
+    message: "Animation",
+  }),
   "controls.color": defineMessage({ id: "controls.color", message: "Color" }),
   "controls.title": defineMessage({ id: "controls.title", message: "Title" }),
   "controls.description": defineMessage({
@@ -174,6 +178,14 @@ export function getFieldLabel(field: string): string {
     case "bar.y":
     case "y":
       return i18n._(fieldLabels["controls.axis.vertical"]);
+    case "bar.animation":
+    case "column.animation":
+    case "line.animation":
+    case "area.animation":
+    case "scatterplot.animation":
+    case "pie.animation":
+    case "animation":
+      return i18n._(fieldLabels["controls.animation"]);
     case "bar.segment":
     case "column.segment":
     case "line.segment":
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index fb8bc3ff7..ef3a6055c 100644
--- a/app/configurator/components/field.tsx
+++ b/app/configurator/components/field.tsx
@@ -35,20 +35,19 @@ import {
   getTimeIntervalFormattedSelectOptions,
   getTimeIntervalWithProps,
 } from "@/configurator/components/ui-helpers";
+import useDisclosure from "@/configurator/components/use-disclosure";
 import {
+  isMultiFilterFieldChecked,
   Option,
   useActiveFieldField,
   useChartFieldField,
+  useChartOptionBooleanField,
   useChartOptionRadioField,
+  useChartOptionSelectField,
   useChartOptionSliderField,
   useMetaField,
-  useSingleFilterField,
-} from "@/configurator/config-form";
-import {
-  isMultiFilterFieldChecked,
-  useChartOptionBooleanField,
-  useChartOptionSelectField,
   useMultiFilterContext,
+  useSingleFilterField,
   useSingleFilterSelect,
 } from "@/configurator/config-form";
 import {
@@ -60,34 +59,16 @@ import { truthy } from "@/domain/types";
 import { useTimeFormatLocale } from "@/formatters";
 import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks";
 import { HierarchyValue } from "@/graphql/resolver-types";
-import SvgIcEdit from "@/icons/components/IcEdit";
 import { useLocale } from "@/locales/use-locale";
 import { getPalette } from "@/palettes";
 import { hierarchyToOptions } from "@/utils/hierarchy";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-import useDisclosure from "./use-disclosure";
-
-const useFieldEditIconStyles = makeStyles<Theme>((theme) => ({
-  root: {
-    color: theme.palette.primary.main,
-  },
-}));
-
-const FieldEditIcon = () => {
-  const classes = useFieldEditIconStyles();
-  return <SvgIcEdit width={18} height={18} className={classes.root} />;
-};
-
 const useStyles = makeStyles<Theme>((theme) => ({
   root: {
     display: "flex",
-    alignItems: "center",
     gap: "0.25rem",
   },
-  optional: {
-    paddingBottom: "4px",
-  },
   loadingIndicator: {
     color: theme.palette.grey[700],
     display: "inline-block",
@@ -116,7 +97,6 @@ export const ControlTabField = ({
       labelId={labelId}
       checked={field.checked}
       onClick={field.onClick}
-      rightIcon={<FieldEditIcon />}
     />
   );
 };
@@ -528,7 +508,6 @@ export const AnnotatorTabField = ({
       value={`${fieldProps.value}`}
       checked={fieldProps.checked}
       onClick={fieldProps.onClick}
-      rightIcon={<FieldEditIcon />}
     />
   );
 };
@@ -706,13 +685,11 @@ const FieldLabel = ({
     id: "controls.select.optional",
     message: `optional`,
   });
+
   return (
     <div className={classes.root}>
       {label}
-
-      {isOptional ? (
-        <span className={classes.optional}>({optionalLabel})</span>
-      ) : null}
+      {isOptional ? <span>({optionalLabel})</span> : null}
       {isFetching ? (
         <CircularProgress size={12} className={classes.loadingIndicator} />
       ) : null}
@@ -721,13 +698,13 @@ const FieldLabel = ({
 };
 
 export const ChartFieldField = ({
-  label,
+  label = "",
   field,
   options,
   optional,
   disabled,
 }: {
-  label: string;
+  label?: string;
   field: string;
   options: Option[];
   optional?: boolean;
@@ -776,7 +753,7 @@ export const ChartOptionRadioField = ({
   label: string;
   field: string | null;
   path: string;
-  value: string;
+  value: string | number;
   defaultChecked?: boolean;
   disabled?: boolean;
 }) => {
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index bb435e5dd..875327df0 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -188,8 +188,8 @@ export const getIconName = (name: string): IconName => {
       return "tableColumnTimeHidden";
     case "time":
       return "time";
-    case "play":
-      return "play";
+    case "animation":
+      return "animation";
 
     default:
       return "table";
diff --git a/app/configurator/config-form.tsx b/app/configurator/config-form.tsx
index 53c874d50..3dd641080 100644
--- a/app/configurator/config-form.tsx
+++ b/app/configurator/config-form.tsx
@@ -297,7 +297,7 @@ export const useChartOptionRadioField = ({
 }: {
   field: string | null;
   path: string;
-  value: string;
+  value: string | number;
 }): FieldProps => {
   const locale = useLocale();
   const [state, dispatch] = useConfiguratorState();
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index e29fed2d5..e041816f0 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -103,14 +103,6 @@ export type InteractiveFiltersTimeRange = t.TypeOf<
   typeof InteractiveFiltersTimeRange
 >;
 
-const InteractiveFiltersTimeSlider = t.type({
-  // FIXME: add range
-  componentIri: t.string,
-});
-export type InteractiveFiltersTimeSlider = t.TypeOf<
-  typeof InteractiveFiltersTimeSlider
->;
-
 const InteractiveFiltersDataConfig = t.type({
   active: t.boolean,
   componentIris: t.array(t.string),
@@ -123,7 +115,6 @@ const InteractiveFiltersConfig = t.union([
   t.type({
     legend: InteractiveFiltersLegend,
     timeRange: InteractiveFiltersTimeRange,
-    timeSlider: InteractiveFiltersTimeSlider,
     dataFilters: InteractiveFiltersDataConfig,
   }),
   t.undefined,
@@ -167,6 +158,19 @@ const GenericSegmentField = t.intersection([
 ]);
 export type GenericSegmentField = t.TypeOf<typeof GenericSegmentField>;
 
+const AnimationType = t.union([t.literal("continuous"), t.literal("stepped")]);
+export type AnimationType = t.TypeOf<typeof AnimationType>;
+
+const AnimationField = t.intersection([
+  GenericField,
+  t.type({
+    showPlayButton: t.boolean,
+    duration: t.number,
+    type: AnimationType,
+  }),
+]);
+export type AnimationField = t.TypeOf<typeof AnimationField>;
+
 const SortingField = t.partial({
   sorting: t.type({
     sortingType: SortingType,
@@ -191,6 +195,7 @@ const ColumnFields = t.intersection([
   }),
   t.partial({
     segment: ColumnSegmentField,
+    animation: AnimationField,
   }),
 ]);
 const ColumnConfig = t.type(
@@ -278,6 +283,7 @@ const ScatterPlotFields = t.intersection([
   }),
   t.partial({
     segment: ScatterPlotSegmentField,
+    animation: AnimationField,
   }),
 ]);
 const ScatterPlotConfig = t.type(
@@ -296,11 +302,14 @@ export type ScatterPlotConfig = t.TypeOf<typeof ScatterPlotConfig>;
 const PieSegmentField = t.intersection([GenericSegmentField, SortingField]);
 export type PieSegmentField = t.TypeOf<typeof PieSegmentField>;
 
-const PieFields = t.type({
-  y: GenericField,
-  // FIXME: "segment" should be "x" for consistency
-  segment: PieSegmentField,
-});
+const PieFields = t.intersection([
+  t.type({
+    y: GenericField,
+    // FIXME: "segment" should be "x" for consistency
+    segment: PieSegmentField,
+  }),
+  t.partial({ animation: AnimationField }),
+]);
 const PieConfig = t.type(
   {
     version: t.string,
@@ -625,6 +634,16 @@ export const isSegmentInConfig = (
   return !isTableConfig(chartConfig) && !isMapConfig(chartConfig);
 };
 
+export const isAnimationInConfig = (
+  chartConfig: ChartConfig
+): chartConfig is ColumnConfig | ScatterPlotConfig | PieConfig => {
+  return (
+    chartConfig.chartType === "column" ||
+    chartConfig.chartType === "scatterplot" ||
+    chartConfig.chartType === "pie"
+  );
+};
+
 export const isColorFieldInConfig = (
   chartConfig: ChartConfig
 ): chartConfig is MapConfig => {
@@ -695,6 +714,7 @@ type ColumnAdjusters = BaseAdjusters<ColumnConfig> & {
       | PieSegmentField
       | TableFields
     >;
+    animation: FieldAdjuster<ColumnConfig, AnimationField | undefined>;
   };
 };
 
@@ -739,6 +759,7 @@ type ScatterPlotAdjusters = BaseAdjusters<ScatterPlotConfig> & {
       | PieSegmentField
       | TableFields
     >;
+    animation: FieldAdjuster<ScatterPlotConfig, AnimationField | undefined>;
   };
 };
 
@@ -753,6 +774,7 @@ type PieAdjusters = BaseAdjusters<PieConfig> & {
       | ScatterPlotSegmentField
       | TableFields
     >;
+    animation: FieldAdjuster<PieConfig, AnimationField | undefined>;
   };
 };
 
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index 7b402a4a8..3d99e7a0b 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -39,17 +39,18 @@ import {
   ConfiguratorStateConfiguringChart,
   ConfiguratorStateSelectingDataSet,
   DataSource,
+  decodeConfiguratorState,
+  Filters,
   FilterValue,
   FilterValueMultiValues,
-  Filters,
   GenericField,
   GenericFields,
   ImputationType,
   InteractiveFiltersConfig,
+  isAnimationInConfig,
   MapConfig,
   MapFields,
   NumericalColorField,
-  decodeConfiguratorState,
   isAreaConfig,
   isColorFieldInConfig,
   isColumnConfig,
@@ -200,9 +201,6 @@ export type ConfiguratorStateAction =
       type: "INTERACTIVE_FILTER_CHANGED";
       value: InteractiveFiltersConfig;
     }
-  | {
-      type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET";
-    }
   | {
       type: "CHART_CONFIG_REPLACED";
       value: {
@@ -812,15 +810,21 @@ export const handleChartFieldChanged = (
   const component = [...dimensions, ...measures].find(
     (dim) => dim.iri === componentIri
   );
-  const selectedValues = actionSelectedValues
-    ? actionSelectedValues
-    : component?.values || [];
+  const selectedValues = actionSelectedValues ?? component?.values ?? [];
+
   // The field was not defined before
   if (!f) {
     // FIXME?
-    // optionalFields = ['segment', 'areaLayer', 'symbolLayer'],
+    // optionalFields = ['animation', 'segment', 'areaLayer', 'symbolLayer'],
     // should be reflected in chart encodings
-    if (field === "segment") {
+    if (field === "animation" && isAnimationInConfig(draft.chartConfig)) {
+      draft.chartConfig.fields.animation = {
+        componentIri,
+        showPlayButton: true,
+        duration: 30,
+        type: "continuous",
+      };
+    } else if (field === "segment") {
       // FIXME: This should be more chart specific
       // (no "stacked" for scatterplots for instance)
       if (isSegmentInConfig(draft.chartConfig)) {
@@ -868,7 +872,15 @@ export const handleChartFieldChanged = (
     }
   } else {
     // The field is being updated
-    if (
+    if (field === "animation" && isAnimationInConfig(draft.chartConfig)) {
+      draft.chartConfig.fields.animation = {
+        componentIri,
+        showPlayButton:
+          draft.chartConfig.fields.animation?.showPlayButton ?? true,
+        duration: draft.chartConfig.fields.animation?.duration ?? 30,
+        type: draft.chartConfig.fields.animation?.type ?? "continuous",
+      };
+    } else if (
       field === "segment" &&
       "segment" in draft.chartConfig.fields &&
       draft.chartConfig.fields.segment &&
@@ -1124,18 +1136,6 @@ export const handleInteractiveFilterChanged = (
   return draft;
 };
 
-export const handleInteractiveFilterTimeSliderReset = (
-  draft: ConfiguratorState
-) => {
-  if (draft.state === "CONFIGURING_CHART") {
-    if (draft.chartConfig.interactiveFiltersConfig) {
-      draft.chartConfig.interactiveFiltersConfig.timeSlider.componentIri = "";
-    }
-  }
-
-  return draft;
-};
-
 const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
   draft,
   action
@@ -1274,9 +1274,6 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
     case "INTERACTIVE_FILTER_CHANGED":
       return handleInteractiveFilterChanged(draft, action);
 
-    case "INTERACTIVE_FILTER_TIME_SLIDER_RESET":
-      return handleInteractiveFilterTimeSliderReset(draft);
-
     case "CHART_CONFIG_REPLACED":
       if (draft.state === "CONFIGURING_CHART") {
         draft.chartConfig = deriveFiltersFromFields(
diff --git a/app/configurator/interactive-filters/helpers.ts b/app/configurator/interactive-filters/helpers.ts
index 8b9d2e2b2..bf91948f8 100644
--- a/app/configurator/interactive-filters/helpers.ts
+++ b/app/configurator/interactive-filters/helpers.ts
@@ -1,44 +1,9 @@
-import { getFieldComponentIri, getFieldComponentIris } from "@/charts";
+import { getFieldComponentIris } from "@/charts";
 import { isTemporalDimension } from "@/domain/data";
-import {
-  DimensionMetadataFragment,
-  TemporalDimension,
-  TimeUnit,
-} from "@/graphql/query-hooks";
+import { TimeUnit } from "@/graphql/query-hooks";
 import { DataCubeMetadata } from "@/graphql/types";
 
-import {
-  ChartConfig,
-  ConfiguratorStateConfiguringChart,
-} from "../config-types";
-
-export const getTimeSliderFilterDimensions = ({
-  chartConfig,
-  dataCubeByIri,
-}: {
-  chartConfig: ChartConfig;
-  dataCubeByIri: {
-    dimensions: DimensionMetadataFragment[];
-    measures: DimensionMetadataFragment[];
-  };
-}): TemporalDimension[] => {
-  if (dataCubeByIri) {
-    const allComponents = [
-      ...dataCubeByIri.dimensions,
-      ...dataCubeByIri.measures,
-    ];
-    const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
-    const xComponent = allComponents.find((d) => d.iri === xComponentIri);
-
-    return allComponents.filter(
-      (d) =>
-        isTemporalDimension(d) &&
-        (isTemporalDimension(xComponent) ? d.iri !== xComponent.iri : true)
-    ) as TemporalDimension[];
-  }
-
-  return [];
-};
+import { ConfiguratorStateConfiguringChart } from "../config-types";
 
 export const getDataFilterDimensions = (
   chartConfig: ConfiguratorStateConfiguringChart["chartConfig"],
diff --git a/app/configurator/interactive-filters/interactive-filters-config-options.tsx b/app/configurator/interactive-filters/interactive-filters-config-options.tsx
index 4688eb4ff..645822845 100644
--- a/app/configurator/interactive-filters/interactive-filters-config-options.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-config-options.tsx
@@ -1,11 +1,10 @@
 import { t, Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import { extent } from "d3";
-import get from "lodash/get";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { getFieldComponentIri } from "@/charts";
-import { Checkbox, Select } from "@/components/form";
+import { Checkbox } from "@/components/form";
 import { Loading } from "@/components/hint";
 import {
   ControlSection,
@@ -15,19 +14,12 @@ import {
 import { parseDate } from "@/configurator/components/ui-helpers";
 import { ConfiguratorStateConfiguringChart } from "@/configurator/config-types";
 import { EditorBrush } from "@/configurator/interactive-filters/editor-time-brush";
-import {
-  useInteractiveTimeRangeFiltersToggle,
-  useInteractiveTimeSliderFiltersSelect,
-} from "@/configurator/interactive-filters/interactive-filters-config-state";
+import { useInteractiveTimeRangeFiltersToggle } from "@/configurator/interactive-filters/interactive-filters-config-state";
 import { InteractiveFilterType } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import { useFormatFullDateAuto } from "@/formatters";
-import { TemporalDimension, useComponentsQuery } from "@/graphql/query-hooks";
+import { useComponentsQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { FIELD_VALUE_NONE } from "../constants";
-
-import { getTimeSliderFilterDimensions } from "./helpers";
-
 export const InteractiveFiltersOptions = ({
   state,
 }: {
@@ -70,19 +62,6 @@ export const InteractiveFiltersOptions = ({
           </ControlSectionContent>
         </ControlSection>
       );
-    } else if (activeField === "timeSlider") {
-      return (
-        <ControlSection>
-          <SectionTitle iconName="play">
-            <Trans id="controls.interactive.filters.timeSlider">
-              Time slider
-            </Trans>
-          </SectionTitle>
-          <ControlSectionContent gap="none">
-            <InteractiveTimeSliderFilterOptions state={state} />
-          </ControlSectionContent>
-        </ControlSection>
-      );
     }
   }
 
@@ -190,79 +169,3 @@ const InteractiveTimeRangeFilterOptions = ({
     return <Loading />;
   }
 };
-
-const InteractiveTimeSliderFilterOptions = ({
-  state: { chartConfig, dataSet, dataSource },
-}: {
-  state: ConfiguratorStateConfiguringChart;
-}) => {
-  const locale = useLocale();
-  const [{ data }] = useComponentsQuery({
-    variables: {
-      iri: dataSet,
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
-
-  const value =
-    get(chartConfig, "interactiveFiltersConfig.timeSlider.componentIri") ||
-    FIELD_VALUE_NONE;
-
-  if (data?.dataCubeByIri) {
-    const timeSliderDimensions = getTimeSliderFilterDimensions({
-      chartConfig,
-      dataCubeByIri: data.dataCubeByIri,
-    });
-
-    return (
-      <InteractiveTimeSliderFilterOptionsSelect
-        dimensions={timeSliderDimensions}
-        value={value}
-      />
-    );
-  } else {
-    return <Loading />;
-  }
-};
-
-const InteractiveTimeSliderFilterOptionsSelect = ({
-  dimensions,
-  value,
-}: {
-  dimensions: TemporalDimension[];
-  value: string;
-}) => {
-  const fieldProps = useInteractiveTimeSliderFiltersSelect();
-  const options = useMemo(() => {
-    return [
-      {
-        label: t({
-          id: "controls.none",
-          message: "None",
-        }),
-        value: FIELD_VALUE_NONE,
-        isNoneValue: true,
-      },
-      ...dimensions.map((d) => ({
-        label: d.label,
-        value: d.iri,
-      })),
-    ];
-  }, [dimensions]);
-
-  return (
-    <Select
-      id="time-slider-component-iri"
-      options={options}
-      label={t({
-        id: "controls.select.dimension",
-        message: "Select a dimension",
-      })}
-      value={value}
-      displayEmpty={true}
-      {...fieldProps}
-    />
-  );
-};
diff --git a/app/configurator/interactive-filters/interactive-filters-config-state.tsx b/app/configurator/interactive-filters/interactive-filters-config-state.tsx
index 348fb2bce..f3ff49b16 100644
--- a/app/configurator/interactive-filters/interactive-filters-config-state.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-config-state.tsx
@@ -1,4 +1,3 @@
-import { SelectChangeEvent } from "@mui/material";
 import produce from "immer";
 import get from "lodash/get";
 import { ChangeEvent, useCallback } from "react";
@@ -11,8 +10,6 @@ import {
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import useEvent from "@/utils/use-event";
 
-import { FIELD_VALUE_NONE } from "../constants";
-
 export const useInteractiveFiltersToggle = (target: "legend") => {
   const [state, dispatch] = useConfiguratorState(isConfiguring);
   const onChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
@@ -115,41 +112,6 @@ export const updateInteractiveTimeRangeFilter = produce(
   }
 );
 
-export const useInteractiveTimeSliderFiltersSelect = () => {
-  const [state, dispatch] = useConfiguratorState(isConfiguring);
-  const { chartConfig } = state;
-
-  const onChange = useCallback<(e: SelectChangeEvent<unknown>) => void>(
-    (e) => {
-      const value = (
-        e.target.value === FIELD_VALUE_NONE ? "" : e.target.value
-      ) as string;
-
-      const newConfig = produce(
-        chartConfig.interactiveFiltersConfig,
-        (draft) => {
-          if (draft?.timeSlider) {
-            draft.timeSlider.componentIri = value;
-          }
-
-          return draft;
-        }
-      );
-
-      dispatch({
-        type: "INTERACTIVE_FILTER_CHANGED",
-        value: newConfig,
-      });
-    },
-    [chartConfig, dispatch]
-  );
-
-  return {
-    name: "timeSlider",
-    onChange,
-  };
-};
-
 /**
  * Toggles all data filters
  */
diff --git a/app/configurator/interactive-filters/interactive-filters-configurator.tsx b/app/configurator/interactive-filters/interactive-filters-configurator.tsx
index efe477eaa..f707c6bfd 100644
--- a/app/configurator/interactive-filters/interactive-filters-configurator.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-configurator.tsx
@@ -17,29 +17,15 @@ import {
   useConfiguratorState,
 } from "@/configurator/configurator-state";
 import { isTemporalDimension } from "@/domain/data";
-import { flag } from "@/flags/flag";
 import { useComponentsQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { getTimeSliderFilterDimensions } from "./helpers";
-
-const ENABLE_TIME_SLIDER = typeof window !== "undefined" && flag("timeslider");
-
-export type InteractiveFilterType =
-  | "legend"
-  | "timeRange"
-  | "timeSlider"
-  | "dataFilters";
+export type InteractiveFilterType = "legend" | "timeRange" | "dataFilters";
 
 export const isInteractiveFilterType = (
   field: string | undefined
 ): field is InteractiveFilterType => {
-  return (
-    field === "legend" ||
-    field === "timeRange" ||
-    field === "timeSlider" ||
-    field === "dataFilters"
-  );
+  return field === "legend" || field === "timeRange" || field === "dataFilters";
 };
 
 export const InteractiveFiltersConfigurator = ({
@@ -65,21 +51,13 @@ export const InteractiveFiltersConfigurator = ({
     const xComponentIri = getFieldComponentIri(fields, "x");
     const xComponent = allComponents.find((d) => d.iri === xComponentIri);
 
-    const timeSliderDimensions = getTimeSliderFilterDimensions({
-      chartConfig,
-      dataCubeByIri: data.dataCubeByIri,
-    });
-
     const canFilterTimeRange =
       isTemporalDimension(xComponent) &&
       chartConfigOptionsUISpec[chartType].interactiveFilters.includes(
         "timeRange"
       );
 
-    const canFilterTimeSlider =
-      ENABLE_TIME_SLIDER && timeSliderDimensions.length > 0;
-
-    if (!canFilterTimeRange && !canFilterTimeSlider) {
+    if (!canFilterTimeRange) {
       return null;
     }
 
@@ -107,18 +85,6 @@ export const InteractiveFiltersConfigurator = ({
               label={xComponent!.label}
             />
           )}
-          {/* Time slider */}
-          {canFilterTimeSlider && (
-            <InteractiveFilterTabField
-              value="timeSlider"
-              icon="play"
-              label={
-                <Trans id="controls.interactive.filters.timeSlider">
-                  Time slider
-                </Trans>
-              }
-            />
-          )}
         </ControlSectionContent>
       </ControlSection>
     );
@@ -165,9 +131,7 @@ const InteractiveFilterTabField = ({
   const checked = state.activeField === value;
   const active = !!get(
     state,
-    `chartConfig.interactiveFiltersConfig["${value}"].${
-      value === "timeSlider" ? "componentIri" : "active"
-    }`
+    `chartConfig.interactiveFiltersConfig["${value}"].active`
   );
 
   return (
diff --git a/app/configurator/interactive-filters/time-slider.tsx b/app/configurator/interactive-filters/time-slider.tsx
index cefdc2274..2d7e366dc 100644
--- a/app/configurator/interactive-filters/time-slider.tsx
+++ b/app/configurator/interactive-filters/time-slider.tsx
@@ -7,6 +7,7 @@ import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { TableChartState } from "@/charts/table/table-state";
 import { Slider as GenericSlider } from "@/components/form";
 import { parseDate } from "@/configurator/components/ui-helpers";
+import { AnimationType } from "@/configurator/config-types";
 import { useTimeFormatUnit } from "@/formatters";
 import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks";
 import { TemporalDimension } from "@/graphql/resolver-types";
@@ -33,9 +34,16 @@ const useTimeline = () => {
 export const TimeSlider = ({
   componentIri,
   dimensions,
+  showPlayButton,
+  animationDuration,
+  animationType,
 }: {
   componentIri?: string;
   dimensions: DimensionMetadataFragment[];
+  showPlayButton: boolean;
+  /** Animation duration in seconds. */
+  animationDuration: number;
+  animationType: AnimationType;
 }) => {
   const component = React.useMemo(() => {
     return dimensions.find((d) => d.iri === componentIri) as
@@ -77,17 +85,22 @@ export const TimeSlider = ({
   ]);
 
   const timeline = React.useMemo(() => {
-    return new Timeline(timelineData, formatDate);
-  }, [timelineData, formatDate]);
+    return new Timeline({
+      type: animationType,
+      msDuration: animationDuration * 1000,
+      msValues: timelineData,
+      formatMsValue: formatDate,
+    });
+  }, [animationType, animationDuration, timelineData, formatDate]);
 
   return (
     <TimelineContext.Provider value={timeline}>
-      <Root />
+      <Root showPlayButton={showPlayButton} />
     </TimelineContext.Provider>
   );
 };
 
-const Root = () => {
+const Root = ({ showPlayButton }: { showPlayButton: boolean }) => {
   const timeline = useTimeline();
   const chartState = useChartState();
 
@@ -101,8 +114,14 @@ const Root = () => {
         mr: `${chartState.bounds.margins.right}px`,
       }}
     >
-      <PlayButton />
-      <Box sx={{ position: "relative", width: "100%" }}>
+      {showPlayButton && <PlayButton />}
+      <Box
+        sx={{
+          position: "relative",
+          width: "100%",
+          ml: `${showPlayButton ? 0 : 32}px`,
+        }}
+      >
         <Slider />
         <Typography variant="caption" sx={{ position: "absolute", left: 0 }}>
           {timeline.formattedExtent[0]}
diff --git a/app/docs/annotations.docs.tsx b/app/docs/annotations.docs.tsx
index 71c906cb7..7f6e7f70f 100644
--- a/app/docs/annotations.docs.tsx
+++ b/app/docs/annotations.docs.tsx
@@ -14,10 +14,10 @@ import { InteractiveFiltersProvider } from "@/charts/shared/use-interactive-filt
 import Flex from "@/components/flex";
 import { ColumnConfig } from "@/configurator";
 import {
+  dimensions,
   fields,
   margins,
   measures,
-  dimensions,
   observations,
 } from "@/docs/fixtures";
 
@@ -39,7 +39,7 @@ ${(
         dimensions={dimensions}
         chartConfig={
           {
-            fields: fields,
+            fields,
             interactiveFiltersConfig: {
               legend: { active: false, componentIri: "" },
               timeRange: {
@@ -194,9 +194,6 @@ ${(
                 componentIri: "",
                 presets: { type: "range", from: "", to: "" },
               },
-              timeSlider: {
-                componentIri: "",
-              },
               dataFilters: { active: false, componentIris: [] },
             },
           } as unknown as ColumnConfig
@@ -240,9 +237,6 @@ ${(
                 componentIri: "",
                 presets: { type: "range", from: "", to: "" },
               },
-              timeSlider: {
-                componentIri: "",
-              },
               dataFilters: { active: false, componentIris: [] },
             },
           } as unknown as ColumnConfig
diff --git a/app/docs/columns.docs.tsx b/app/docs/columns.docs.tsx
index 638f7f07c..2bbbf0281 100644
--- a/app/docs/columns.docs.tsx
+++ b/app/docs/columns.docs.tsx
@@ -1,5 +1,4 @@
 import { markdown, ReactSpecimen } from "catalog";
-import * as React from "react";
 
 import { Columns, ErrorWhiskers } from "@/charts/column/columns-simple";
 import { ColumnChart } from "@/charts/column/columns-state";
@@ -26,8 +25,9 @@ ${(
         dimensions={columnDimensions}
         chartConfig={
           {
+            chartType: "column",
+            filters: {},
             fields: columnFields,
-
             interactiveFiltersConfig: {
               legend: {
                 active: false,
@@ -46,9 +46,6 @@ ${(
                 active: false,
                 componentIri: "http://fake-iri",
               },
-              timeSlider: {
-                componentIri: "",
-              },
             },
           } as unknown as ColumnConfig
         }
diff --git a/app/docs/fixtures.ts b/app/docs/fixtures.ts
index a69d2aba6..973258a6c 100644
--- a/app/docs/fixtures.ts
+++ b/app/docs/fixtures.ts
@@ -42,9 +42,6 @@ export const states: ConfiguratorState[] = [
       filters: {},
       interactiveFiltersConfig: {
         legend: { active: false, componentIri: "" },
-        timeSlider: {
-          componentIri: "",
-        },
         timeRange: {
           active: false,
           componentIri: "",
diff --git a/app/docs/lines.docs.tsx b/app/docs/lines.docs.tsx
index a5f258850..f2a5ab912 100644
--- a/app/docs/lines.docs.tsx
+++ b/app/docs/lines.docs.tsx
@@ -1,5 +1,4 @@
 import { markdown, ReactSpecimen } from "catalog";
-import * as React from "react";
 
 import { Lines } from "@/charts/line/lines";
 import { LineChart } from "@/charts/line/lines-state";
@@ -27,9 +26,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
     componentIri: "",
     presets: { type: "range", from: "", to: "" },
   },
-  timeSlider: {
-    componentIri: "",
-  },
   dataFilters: {
     active: false,
     componentIris: [],
diff --git a/app/docs/scatterplot.docs.tsx b/app/docs/scatterplot.docs.tsx
index 19af56cc7..935d6c6ce 100644
--- a/app/docs/scatterplot.docs.tsx
+++ b/app/docs/scatterplot.docs.tsx
@@ -1,5 +1,4 @@
 import { markdown, ReactSpecimen } from "catalog";
-import * as React from "react";
 
 import { Scatterplot } from "@/charts/scatterplot/scatterplot-simple";
 import { ScatterplotChart } from "@/charts/scatterplot/scatterplot-state";
@@ -30,9 +29,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
     componentIri: "",
     presets: { type: "range", from: "", to: "" },
   },
-  timeSlider: {
-    componentIri: "",
-  },
   dataFilters: {
     active: false,
     componentIris: [],
diff --git a/app/homepage/examples.tsx b/app/homepage/examples.tsx
index 3a936a41d..dcfae30f7 100644
--- a/app/homepage/examples.tsx
+++ b/app/homepage/examples.tsx
@@ -112,9 +112,6 @@ export const Examples = ({
                 },
                 componentIri: "",
               },
-              timeSlider: {
-                componentIri: "",
-              },
               legend: {
                 active: false,
                 componentIri: "",
@@ -197,9 +194,6 @@ export const Examples = ({
                 },
                 componentIri: "",
               },
-              timeSlider: {
-                componentIri: "",
-              },
               legend: {
                 active: true,
                 componentIri: "",
diff --git a/app/icons/components/IcAnimation.tsx b/app/icons/components/IcAnimation.tsx
new file mode 100644
index 000000000..4280d640f
--- /dev/null
+++ b/app/icons/components/IcAnimation.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+function SvgIcAnimation(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd" transform="translate(3, 3)">
+        <path
+          fill="currentColor"
+          d="M16.2602209,6.01875664 L1.46463791,6.01875664 C1.05627982,6.01875664 0.724858763,6.35348262 0.724858763,6.76758435 L0.724858763,17.2511723 C0.724858763,17.665274 1.05627982,18 1.46463791,18 L16.2602209,18 C16.6685789,18 17,17.665274 17,17.2511723 L17,6.76758435 C17,6.35348262 16.6685789,6.01875664 16.2602209,6.01875664 Z M12.5613251,10.5117229 L5.16353365,10.5117229 L5.16353365,9.01406748 L12.5613251,9.01406748 L12.5613251,10.5117229 Z M12.5613251,13.9402943 L5.16353365,13.9402943 L5.16353365,12.4426389 L12.5613251,12.4426389 L12.5613251,13.9402943 Z M-2.75508782e-14,3.248437 L15.7296575,2.79776202e-14 L16.0254212,1.46740278 L0.295763703,4.71583978 L-2.75508782e-14,3.248437 Z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgIcAnimation;
diff --git a/app/icons/components/index.tsx b/app/icons/components/index.tsx
index 94efeaf55..1f7c10bc3 100644
--- a/app/icons/components/index.tsx
+++ b/app/icons/components/index.tsx
@@ -1,4 +1,5 @@
 import { default as Add } from "@/icons/components/IcAdd";
+import { default as Animation } from "@/icons/components/IcAnimation";
 import { default as AnnotationArea } from "@/icons/components/IcAnnotationArea";
 import { default as App } from "@/icons/components/IcApp";
 import { default as ArrowBottom } from "@/icons/components/IcArrowBottom";
@@ -136,6 +137,7 @@ import { default as ZoomIn } from "@/icons/components/IcZoomIn";
 
 export const Icons = {
   add: Add,
+  animation: Animation,
   annotationArea: AnnotationArea,
   app: App,
   arrowBottom: ArrowBottom,
diff --git a/app/icons/svg/ic_animation.svg b/app/icons/svg/ic_animation.svg
new file mode 100644
index 000000000..82aac72f1
--- /dev/null
+++ b/app/icons/svg/ic_animation.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd" transform="translate(3, 3)">
+    <path
+      fill="#454545"
+      d="M16.2602209,6.01875664 L1.46463791,6.01875664 C1.05627982,6.01875664 0.724858763,6.35348262 0.724858763,6.76758435 L0.724858763,17.2511723 C0.724858763,17.665274 1.05627982,18 1.46463791,18 L16.2602209,18 C16.6685789,18 17,17.665274 17,17.2511723 L17,6.76758435 C17,6.35348262 16.6685789,6.01875664 16.2602209,6.01875664 Z M12.5613251,10.5117229 L5.16353365,10.5117229 L5.16353365,9.01406748 L12.5613251,9.01406748 L12.5613251,10.5117229 Z M12.5613251,13.9402943 L5.16353365,13.9402943 L5.16353365,12.4426389 L12.5613251,12.4426389 L12.5613251,13.9402943 Z M-2.75508782e-14,3.248437 L15.7296575,2.79776202e-14 L16.0254212,1.46740278 L0.295763703,4.71583978 L-2.75508782e-14,3.248437 Z"
+    />
+  </g>
+</svg>
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 670ad98fc..4906bbfab 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -179,6 +179,10 @@ msgstr "Standardeinstellung"
 msgid "controls.abbreviations"
 msgstr "Abkürzungen verwenden"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.animation"
+msgstr "Animation"
+
 #: app/configurator/components/chart-annotator.tsx
 msgid "controls.annotator.add-description-warning"
 msgstr "Fügen Sie eine Beschreibung hinzu"
@@ -234,7 +238,7 @@ msgstr "Farbe"
 
 #: app/configurator/components/chart-controls/control-tab.tsx
 msgid "controls.color.add"
-msgstr "Hinzufügen …"
+msgstr "Hinzufügen…"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.color.opacity"
@@ -375,11 +379,6 @@ msgstr "-"
 msgid "controls.imputation.type.zeros"
 msgstr "Nullen"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx
-msgid "controls.interactive.filters.timeSlider"
-msgstr "Zeitschieber"
-
 #: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Keine Zeitdimension verfügbar!"
@@ -435,7 +434,6 @@ msgstr "Zurück zur Vorschau"
 
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.none"
 msgstr "Keine"
 
@@ -459,6 +457,30 @@ msgstr "Suche zurücksetzen"
 msgid "controls.section.additional-information"
 msgstr "Zusätzliche Informationen"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.duration"
+msgstr "Animation Dauer"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.settings"
+msgstr "Animation Einstellungen"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.show-play-button"
+msgstr "Schaltfläche Abspielen anzeigen"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Animation Typ"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Kontinuierlich"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "Abgestuft"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Diagramm-Einstellungen"
@@ -580,7 +602,7 @@ msgid "controls.select.columnStyle.textStyle"
 msgstr "Schriftstil"
 
 #: app/configurator/components/chart-options-selector.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
+#: app/configurator/components/chart-options-selector.tsx
 msgid "controls.select.dimension"
 msgstr "Dimension auswählen"
 
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 6482c2164..0312b5206 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -179,6 +179,10 @@ msgstr "Default Settings"
 msgid "controls.abbreviations"
 msgstr "Use abbreviations"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.animation"
+msgstr "Animation"
+
 #: app/configurator/components/chart-annotator.tsx
 msgid "controls.annotator.add-description-warning"
 msgstr "Please add a description"
@@ -234,7 +238,7 @@ msgstr "Color"
 
 #: app/configurator/components/chart-controls/control-tab.tsx
 msgid "controls.color.add"
-msgstr "Add ..."
+msgstr "Add…"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.color.opacity"
@@ -375,11 +379,6 @@ msgstr "-"
 msgid "controls.imputation.type.zeros"
 msgstr "Zeros"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx
-msgid "controls.interactive.filters.timeSlider"
-msgstr "Time slider"
-
 #: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "There is no time dimension!"
@@ -435,7 +434,6 @@ msgstr "Back to preview"
 
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.none"
 msgstr "None"
 
@@ -459,6 +457,30 @@ msgstr "Clear search field"
 msgid "controls.section.additional-information"
 msgstr "Additional information"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.duration"
+msgstr "Animation Duration"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.settings"
+msgstr "Animation Settings"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.show-play-button"
+msgstr "Show Play button"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Animation Type"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Continuous"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "Stepped"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Chart Options"
@@ -580,7 +602,7 @@ msgid "controls.select.columnStyle.textStyle"
 msgstr "Text Style"
 
 #: app/configurator/components/chart-options-selector.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
+#: app/configurator/components/chart-options-selector.tsx
 msgid "controls.select.dimension"
 msgstr "Select a dimension"
 
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index d755e4a20..f842c32d0 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -179,6 +179,10 @@ msgstr "Paramètres d'origine"
 msgid "controls.abbreviations"
 msgstr "Utiliser des abréviations"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.animation"
+msgstr "Animation"
+
 #: app/configurator/components/chart-annotator.tsx
 msgid "controls.annotator.add-description-warning"
 msgstr "Ajoutez une description au graphique"
@@ -375,11 +379,6 @@ msgstr "-"
 msgid "controls.imputation.type.zeros"
 msgstr "Zéros"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx
-msgid "controls.interactive.filters.timeSlider"
-msgstr "Curseur temporel"
-
 #: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Il n'y a pas de dimension temporelle!"
@@ -435,7 +434,6 @@ msgstr "Retour à l'aperçu"
 
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.none"
 msgstr "Aucun"
 
@@ -459,6 +457,30 @@ msgstr "Effacer la recherche"
 msgid "controls.section.additional-information"
 msgstr "Informations supplémentaires"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.duration"
+msgstr "Durée de l'animation"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.settings"
+msgstr "Paramètres d'animation"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.show-play-button"
+msgstr "Bouton Afficher la lecture"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Type d'animation"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "En continu"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "En escalier"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Paramètres graphiques"
@@ -580,7 +602,7 @@ msgid "controls.select.columnStyle.textStyle"
 msgstr "Style du texte"
 
 #: app/configurator/components/chart-options-selector.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
+#: app/configurator/components/chart-options-selector.tsx
 msgid "controls.select.dimension"
 msgstr "Sélectionner une dimension"
 
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 23b3b4188..b62d0921d 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -179,6 +179,10 @@ msgstr "Impostazioni predefinite"
 msgid "controls.abbreviations"
 msgstr "Usa abbreviazioni"
 
+#: app/configurator/components/field-i18n.ts
+msgid "controls.animation"
+msgstr "Animazione"
+
 #: app/configurator/components/chart-annotator.tsx
 msgid "controls.annotator.add-description-warning"
 msgstr "Aggiungi una descrizione"
@@ -234,7 +238,7 @@ msgstr "Colore"
 
 #: app/configurator/components/chart-controls/control-tab.tsx
 msgid "controls.color.add"
-msgstr "Aggiungi ..."
+msgstr "Aggiungi…"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.color.opacity"
@@ -375,11 +379,6 @@ msgstr "-"
 msgid "controls.imputation.type.zeros"
 msgstr "Zeri"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx
-msgid "controls.interactive.filters.timeSlider"
-msgstr "Cursore del tempo"
-
 #: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Nessuna dimensione temporale disponibile!"
@@ -435,7 +434,6 @@ msgstr "Torna all'anteprima"
 
 #: app/configurator/components/field.tsx
 #: app/configurator/components/field.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
 msgid "controls.none"
 msgstr "Nessuno"
 
@@ -459,6 +457,30 @@ msgstr "Cancella la ricerca"
 msgid "controls.section.additional-information"
 msgstr "Informazioni aggiuntive"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.duration"
+msgstr "Durata dell'animazione"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.settings"
+msgstr "Impostazioni dell'animazione"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.show-play-button"
+msgstr "Mostra il pulsante di riproduzione"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Tipo di animazione"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Continuo"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "A gradini"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Opzioni del grafico"
@@ -580,7 +602,7 @@ msgid "controls.select.columnStyle.textStyle"
 msgstr "Stile del testo"
 
 #: app/configurator/components/chart-options-selector.tsx
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx
+#: app/configurator/components/chart-options-selector.tsx
 msgid "controls.select.dimension"
 msgstr "Seleziona una dimensione"
 
diff --git a/app/test/__fixtures/config/dev/chartConfig-column-covid19.json b/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
index d03c57cd2..a40d4a74a 100644
--- a/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
+++ b/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
@@ -25,9 +25,6 @@
         "to": ""
       }
     },
-    "timeSlider": {
-      "componentIri": ""
-    },
     "dataFilters": {
       "active": false,
       "componentIris": []
diff --git a/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json b/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
index b4b119daa..e1f398a8a 100644
--- a/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
+++ b/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
@@ -43,7 +43,7 @@
           "value": "E.coli"
         }
       },
-      "version": "1.3.0",
+      "version": "1.4.0",
       "chartType": "column",
       "interactiveFiltersConfig": {
         "legend": {
@@ -59,9 +59,6 @@
           },
           "componentIri": ""
         },
-        "timeSlider": {
-          "componentIri": ""
-        },
         "dataFilters": {
           "active": true,
           "componentIris": [
diff --git a/app/test/__fixtures/config/prod/line-1.json b/app/test/__fixtures/config/prod/line-1.json
index 3626ee28c..203101c45 100644
--- a/app/test/__fixtures/config/prod/line-1.json
+++ b/app/test/__fixtures/config/prod/line-1.json
@@ -11,7 +11,7 @@
       "url": "https://lindas.admin.ch/query"
     },
     "chartConfig": {
-      "version": "1.3.0",
+      "version": "1.4.0",
       "fields": {
         "x": {
           "componentIri": "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/0"
diff --git a/app/utils/chart-config/versioning.ts b/app/utils/chart-config/versioning.ts
index 55385c4a6..e98f6db25 100644
--- a/app/utils/chart-config/versioning.ts
+++ b/app/utils/chart-config/versioning.ts
@@ -1,6 +1,6 @@
 import produce from "immer";
 
-export const CHART_CONFIG_VERSION = "1.3.0";
+export const CHART_CONFIG_VERSION = "1.4.0";
 
 type Migration = {
   description: string;
@@ -473,6 +473,66 @@ const migrations: Migration[] = [
         });
       }
 
+      return newConfig;
+    },
+  },
+  {
+    description: `ALL
+    fields {
+      + animation {
+        componentIri
+      }
+    }`,
+    from: "1.3.0",
+    to: "1.4.0",
+    up: (config: any) => {
+      let newConfig = { ...config, version: "1.4.0" };
+
+      const { interactiveFiltersConfig } = newConfig;
+
+      if (interactiveFiltersConfig) {
+        const { legend, timeRange, timeSlider, dataFilters } =
+          interactiveFiltersConfig;
+
+        newConfig = produce(newConfig, (draft: any) => {
+          draft.interactiveFiltersConfig = { legend, timeRange, dataFilters };
+
+          if (
+            ["column", "pie", "scatterplot"].includes(draft.chartType) &&
+            timeSlider?.componentIri
+          ) {
+            draft.fields.animation = {
+              ...timeSlider,
+              showPlayButton: true,
+              duration: 30,
+              type: "continuous",
+            };
+          }
+        });
+      }
+
+      return newConfig;
+    },
+    down: (config: any) => {
+      let newConfig = { ...config, version: "1.3.0" };
+
+      const { fields } = config;
+      const { animation } = fields;
+
+      if (animation) {
+        newConfig = produce(newConfig, (draft: any) => {
+          delete draft.fields.animation;
+
+          if (["column", "pie", "scatterplot"].includes(draft.chartType)) {
+            draft.interactiveFiltersConfig.timeSlider = {
+              componentIri: animation.componentIri,
+            };
+          } else {
+            draft.interactiveFiltersConfig.timeSlider = { componentIri: "" };
+          }
+        });
+      }
+
       return newConfig;
     },
   },
diff --git a/app/utils/observables.spec.ts b/app/utils/observables.spec.ts
index a236f021b..1550afd23 100644
--- a/app/utils/observables.spec.ts
+++ b/app/utils/observables.spec.ts
@@ -4,7 +4,12 @@ describe("Timeline", () => {
   const values = [1, 100, 200, 500, 750, 1000];
   const [min, max] = [values[0], values[values.length - 1]];
   const formatValue = (d: number) => `${d}ms`;
-  const timeline = new Timeline(values, formatValue);
+  const timeline = new Timeline({
+    type: "continuous",
+    msDuration: 1000,
+    msValues: values,
+    formatMsValue: formatValue,
+  });
 
   beforeEach(() => timeline.setProgress(0));
 
diff --git a/app/utils/observables.ts b/app/utils/observables.ts
index df5dfa28e..162a8bc7b 100644
--- a/app/utils/observables.ts
+++ b/app/utils/observables.ts
@@ -1,5 +1,7 @@
 import { ascending, bisect, scaleLinear } from "d3";
 
+import { AnimationType } from "@/configurator/config-types";
+
 abstract class Observable {
   private observers: Function[];
 
@@ -27,12 +29,15 @@ abstract class Observable {
 
 /** Observable timeline which encloses animation state and logic. */
 export class Timeline extends Observable {
-  /** Relative timeline progress (0-1). */
-  public progress = 0;
+  /** */
+  private type: AnimationType;
 
   // Animation state.
   public playing = false;
-  private duration = 10000;
+  /** Animation progress (0-1). */
+  private animationProgress = 0;
+  /** Duration of the animation in miliseconds. */
+  private animationDuration: number;
   private requestAnimationFrameId: number | undefined;
   /** Timestamp set when animation beings. */
   private t: number | undefined;
@@ -42,6 +47,9 @@ export class Timeline extends Observable {
   private msValues: number[];
   /** Based on current progress. */
   private msValue: number;
+  /** Min and max values of msValues. */
+  private minMsValue: number;
+  private maxMsValue: number;
   /** msValueScale(min value) = 0, msValueScale(max value) = 1 */
   private msValueScale = scaleLinear();
   /** msValues converted to relative values (0-1). */
@@ -50,15 +58,29 @@ export class Timeline extends Observable {
   private formatMsValue: (d: number) => string;
   private formattedMsExtent: [min: string, max: string];
 
-  constructor(msValues: number[], formatMsValue: (d: number) => string) {
+  constructor({
+    type,
+    msDuration,
+    msValues,
+    formatMsValue,
+  }: {
+    type: AnimationType;
+    msDuration: number;
+    msValues: number[];
+    formatMsValue: (d: number) => string;
+  }) {
     super();
 
+    this.type = type;
+    this.animationDuration = msDuration;
     this.msValues = msValues.sort(ascending);
     const [min, max] = [
       this.msValues[0],
       this.msValues[this.msValues.length - 1],
     ];
     this.msValue = min;
+    this.minMsValue = min;
+    this.maxMsValue = max;
     this.msValueScale = this.msValueScale.range([min, max]);
     this.msRelativeValues = this.msValues.map(this.msValueScale.invert);
     this.formatMsValue = formatMsValue;
@@ -71,8 +93,8 @@ export class Timeline extends Observable {
 
   public start = () => {
     if (!this.playing) {
-      if (this.progress === 1) {
-        this.setProgress(0);
+      if (this.animationProgress === 1) {
+        this.setProgress(0, true);
       }
 
       this.playing = true;
@@ -84,16 +106,16 @@ export class Timeline extends Observable {
 
   private animate = (t: number) => {
     if (this.t === undefined) {
-      this.t = t - this.progress * this.duration;
+      this.t = t - this.animationProgress * this.animationDuration;
     }
 
-    if (t - this.t > this.duration) {
+    if (t - this.t > this.animationDuration) {
       this.stop(false);
       this.setProgress(1);
     } else {
-      const progress = (t - this.t) / this.duration;
+      const progress = (t - this.t) / this.animationDuration;
+      this.setProgress(progress, true);
 
-      this.setProgress(progress);
       this.requestAnimationFrameId = requestAnimationFrame(
         this.animate.bind(this)
       );
@@ -110,21 +132,52 @@ export class Timeline extends Observable {
         this.requestAnimationFrameId = undefined;
       }
 
-      if (notify) this.notify();
+      if (notify) {
+        this.notify();
+      }
     }
   };
 
-  public setProgress = (progress: number) => {
-    this.progress = progress;
-    this.setValue(progress);
+  /** Sets the animation progress and timeline value.
+   *
+   * For stepped type during the animation, the progress is calculated based on the
+   * artificial division (equal time segments to jump between values) and does not
+   * correspond to the actual progress of the slider.
+   */
+  public setProgress = (progress: number, triggeredByAnimation = false) => {
+    let value: number;
+
+    switch (this.type) {
+      case "continuous":
+        this.animationProgress = progress;
+        value = progress;
+
+        break;
+      case "stepped":
+        let i: number;
+
+        if (triggeredByAnimation) {
+          i = Math.floor(progress * this.msValues.length);
+        } else {
+          const msValue = Math.round(this.msValueScale(progress));
+          i = bisect(this.msValues, msValue) - 1;
+        }
+
+        const msRelativeValue = this.msRelativeValues[i];
+        this.animationProgress = i / (this.msValues.length - 1);
+        value = msRelativeValue;
+
+        break;
+    }
+
+    this.setValue(value);
     this.notify();
   };
 
   private setValue = (progress: number) => {
     const ms = Math.round(this.msValueScale(progress));
-    const i = bisect(this.msValues, ms);
-
-    this.msValue = this.msValues[i - 1];
+    const i = bisect(this.msValues, ms) - 1;
+    this.msValue = this.msValues[i];
   };
 
   get domain() {
@@ -142,4 +195,16 @@ export class Timeline extends Observable {
   get formattedExtent() {
     return this.formattedMsExtent;
   }
+
+  /** Timeline progress (0-1) (mapped to track background color of Slider). */
+  get progress() {
+    switch (this.type) {
+      case "continuous":
+        return this.animationProgress;
+      case "stepped":
+        return (
+          (this.msValue - this.minMsValue) / (this.maxMsValue - this.minMsValue)
+        );
+    }
+  }
 }