Reveal

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

Table of contents

• Introduction
• Triggers
• Exception
• Edit
• Examples
• List
• Examples for list
• Installation
• Using from a CDN
• Install from NPM
• Framework integration

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>
Copy

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>
Copy

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>
Copy

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:

Theming

The following theming options are also available:

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>
Copy

Installation

This component could be added to your web application using the following methods.

If you are using our Starter Kit, no need to worry about this, this component is included, therefore you could skip the "Installation" chapter.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo reveal component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/elements@latest/dist/elements/elements.esm.js"></script>
Copy

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/elements
Copy

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/elements';
Copy

Loader

import { defineCustomElements } from '@deckdeckgo/elements/dist/loader';
defineCustomElements();
Copy