Animated Tour

Tours are animated by default (animate: true). Between two steps the highlight slides from one element to the next, and the popover of the new step fades in halfway through the slide.

Project settings

Sample content for the demo to highlight. None of these controls do anything.

const { drive } = useDriver({
  steps: [
    { element: "#title", popover: { title: "Title", description: "The first step highlights the heading." } },
    { element: "#search", popover: { title: "Name field", description: "The highlight slid down from the heading." } },
    { element: "#export", popover: { title: "Export button", description: "And from the field to this button.", side: "right" } },
  ],
});

drive();

Animation duration

duration is the length of the transition in milliseconds (default 400). It sets both the slide between steps and the fade of the overlay and the popover. It has no effect when animate is false.

Project settings

Sample content for the demo to highlight. None of these controls do anything.

const { drive } = useDriver({
  duration: 150,
  steps: [/* ... */],
});

To change the easing curve or style the moving highlight, see Highlight Animation.

Static tour

With animate: false nothing slides or fades: the highlight and the popover jump to the next element at once. Keyboard navigation, buttons and hooks work the same.

Project settings

Sample content for the demo to highlight. None of these controls do anything.

const { drive } = useDriver({
  animate: false,
  steps: [/* ... */],
});

The default fade rules are scoped to the driver-fade class, which a static tour does not set. Transition rules of your own that do not check for that class still run; see Highlight Animation.