Animation

The animation between the DeckDeckGo slides could happen in different ways.

Per default, the animation is the slide effect respectively a swipe effect.

Properties

A specific effect could be set using the following properties of the root element <deckgo-deck/>:

PropertyAttributeDescriptionTypeDefault
animationanimationThe animation effect between slides.slide, fade or noneslide

Styling

It is also possible to style the fade animation using the following CSS4 variables:

CSS4 variableDefaultNote
--animation-fade-duration500msThe duration of the animation.
--animation-fade-hidden-opacity0.4The base opacity when the slide is not displayed.
--slide-animationAn optional animation effect for each slide container.

Nota bene

In case you would select the fade or none animation effect and would use the deck's slots actions or background too, please notes that these have to be ordered in last positions of the deck's children otherwise the animation effect will not be able to determine correctly the index of the next slide to animate.