Add Slide Step Classes

Add Step Animations

You can add classes to elements at specific steps in your presentation. To do this import the addSteps action. You can use this action to specify which classes you want to add and when. Step 0 always represents the inital slide when you enter it. You can add classes in 2 different ways:

1. Add step-A-B: in front of the class. You can also just specify one step number (the range is optional). For example: step-1:one-class or step-2-4:another-class.
2. You can pass the steps and the classes to the action as an argument. The argument should be a list of objects with a step and a classes property. Example: use:addSteps={[ { steps: '0, 3-5', classes: 'scale-125 bg-gray-900' } ]}.

You should use the 2nd method for Tailwind classes to avoid them from being purged. The 2nd method also allows you to separate multiple steps with commas. For example: '1, 3, 5-8'.

addSteps will automatically update the maxSteps store to the highest step value you specified.

Animate.css

You can use the animate.css library to easily add transitions to your elements. Check out the documentation for a full list of available animations. You can use method 1 for these types of classes. In the example below the image will fade in from the left when entering the slide (at step 0), using the animate__fadeInLeft Animate.css' class, and fade out to the right at step 1.

Tailwind CSS

You can also add Tailwind classes stepwise. To do this you have to use method 2, otherwise Tailwind will purge the classes. Pass the steps and classes you want to add as an argument to the addSteps action.