Reveal

Make elements and text appear one line at a time in DeckDeckGo.

Table of contents

Introduction

Per default all the content of each slide and component is visible. If you wish to make elements and text appear one line at a time, it's up to you using the following supported options.

Triggers

The animation of such elements will happen when you or your user will use the navigation buttons on the keyboard or the navigation buttons in the remote control.

Exception

Elements set as "to be animated" are going to be displayed on mobile devices, that's a design choice, but if you wish to activate the animation for mobile too, you could set the deck's property revealOnMobile to true.

I (David here) think that it is better in terms of mobile UX. For example, if a slide would contain for example 10 elements, the users would have to swipe the slide 10 times before being able to read the entire content and navigate. I'm open to suggestion and discussion about it, if you would rather like a different default behavior.

Edit

DeckDeckGo provides a component <deckgo-reveal/> which should be used in case you would like to make elements appear one at a time. Simply put your element with your content inside, that's it.

Good to know, the component could be use as a child of a slot you would pass to a slide or could also be use as slot value, as you wish.

Nota bene, at least one element should be provided, adding only text inside the component would not work as the detection is based on elements.

Examples

The component deckgo-reveal use as slot:

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <deckgo-reveal slot="content"> <p>Hello World πŸš€</p> </deckgo-reveal> </deckgo-slide-title> </deckgo-deck>

Many components deckgo-reveal as children:

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <p slot="content"> <deckgo-reveal><span>Hello World One πŸš€</span></deckgo-reveal> <deckgo-reveal><span>Hello World Two πŸš€</span></deckgo-reveal> <deckgo-reveal><span>Hello World Three πŸš€</span></deckgo-reveal> </p> </deckgo-slide-title> </deckgo-deck>

Or a component deckgo-reveal as child containing children:

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <div slot="content"> <deckgo-reveal> <p>Hello World One πŸš€</p> <p>Hello World Two πŸš€</p> <p>Hello World Three πŸš€</p> </deckgo-reveal> </div> </deckgo-slide-title> </deckgo-deck>

List

You could use the above component to encapsulate each li element of your lists, I guess that would work out, but DeckDeckGo also provides a dedicated component <deckgo-reveal-list/> to reveal list.

To use it, simply replace the opening tag of your list (ul, ol or dl) with it.

Attributes

The following attributes could be applied to the element:

PropertyAttributeMandatoryDescriptionTypeDefault
listTaglist-tagThe type of list (ol default, ul or dl)stringol

Theming

The following theming options are also available:

CSS4 variableDefaultNote
--reveal-list-styleThe list-style property of the list
--reveal-list-style-imageThe list-style property of the list
--reveal-list-style-positionThe list-style-position property of the list
--reveal-list-marginThe list-margin property of the list
--reveal-list-paddingThe list-padding property of the list
--reveal-list-backgroundThe list-background property of the list
--reveal-list-style-typediscThe list-style-type property in case of ul container
--reveal-list-style-typedecimalThe list-style-type property in case of ol container
--reveal-list-style-typenoneThe list-style-type property in case of dl container

Examples for list

Likewise, the component could be used as a child of a slot you would pass to a slide or could also be use as slot value, as you wish.

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <div slot="content"> <deckgo-reveal-list list-tag="ul"> <li>Hello World One πŸš€</li> <li>Hello World Two πŸš€</li> <li>Hello World Three πŸš€</li> </deckgo-reveal-list> </div> </deckgo-slide-title> </deckgo-deck>