Animations for Next.js

Default Animations

By default, NextStepjs uses a smooth animation for transitioning between tour steps. The default animation settings are:

// Default animation settings
cardTransition = {ease: 'anticipate', duration: 0.6};

These settings create a natural, fluid transition between steps that feels responsive and engaging.

Customizing Animations

You can customize the animation behavior by providing your own transition settings to the cardTransition prop of the NextStep component:

import { NextStep, NextStepProvider } from 'nextstepjs';

function MyApp({ Component, pageProps }) {
  return (
    <NextStepProvider>
      <NextStep
        steps={steps}
        cardTransition={{ 
          ease: 'easeOut', 
          duration: 0.4,
          stiffness: 100,
          damping: 10
        }}
      >
        <Component {...pageProps} />
      </NextStep>
    </NextStepProvider>
  );
}

Animation Properties

The cardTransition prop is passed directly to the motion.div transition prop from Motion, giving you access to all of Motion's animation capabilities. See Motion docs for more info.

Animation Examples

Here are some examples of different animation configurations you can use:

cardTransition={{ 
  ease: 'easeInOut', 
  duration: 0.5 
}}

cardTransition={{ 
  type: 'spring',
  stiffness: 300,
  damping: 20
}}

cardTransition={{ 
  ease: 'backOut', 
  duration: 0.3 
}}

cardTransition={{ 
  ease: 'easeOut', 
  duration: 0.4,
  delay: 0.2
}}

Disabling Animations

If you prefer not to have animations, you can effectively disable them by setting a very short duration:

cardTransition={{ 
  duration: 0.01 
}}