Animation
Configure enter/exit animations for the tooltip and overlay spotlight transitions.
Borda supports configurable animations for tooltip enter/exit and overlay spotlight transitions. All animation settings are grouped under the animation config key.
Config
| Property | Type | Default | Description |
|---|---|---|---|
isEnabled | boolean | true | Master switch for all animations |
tooltip.enter | AnimationEffect | FADE | Tooltip enter effect |
tooltip.exit | AnimationEffect | FADE | Tooltip exit effect |
tooltip.enterDuration | number | 200 | Enter animation duration in ms |
tooltip.exitDuration | number | 150 | Exit animation duration in ms |
tooltip.easing | string | ease-out | CSS easing function |
tooltip.appearance | BordaScrollAppearance | AFTER_SCROLL | When to reveal the tooltip relative to scroll animation |
tooltip.transition | BordaTooltipTransition | FADE | How the tooltip moves between steps |
overlay.transitionDuration | number | 350 | Spotlight transition duration between steps |
overlay.easing | string | ease-in-out | CSS easing for spotlight movement |
Tooltip transition
Controls how the tooltip moves between steps:
| Transition | Description |
|---|---|
FADE | Hide the tooltip while transitioning, then fade it in at the new step |
GLIDE | Keep the tooltip visible and glide its position to the new step |
import { BordaTooltipTransition } from '@retoo/borda';
await borda.mount({
steps: [...],
animation: {
tooltip: {
transition: BordaTooltipTransition.GLIDE,
},
},
});
Animation effects
| Effect | Description |
|---|---|
NONE | No animation |
FADE | Opacity transition |
SCALE | Scale from center |
SLIDE | Slide from edge |
import { AnimationEffect } from '@retoo/borda';
await borda.mount({
steps: [
{
target: '#element',
title: 'Title',
description: 'Description',
placement: 'bottom-center',
},
],
animation: {
isEnabled: true,
tooltip: {
enter: AnimationEffect.FADE,
exit: AnimationEffect.FADE,
enterDuration: 300,
exitDuration: 200,
},
overlay: {
transitionDuration: 400,
},
},
});
Disabling animation
Pass false to disable all animations globally:
await borda.mount({
steps: [
{
target: '#element',
title: 'Title',
description: 'Description',
placement: 'bottom-center',
},
],
animation: false,
});
Runtime API
Read the resolved animation settings at runtime:
instance.animation.isEnabled;
instance.animation.tooltip;
instance.animation.overlay;