Skip to content

Commit

Permalink
Version 1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@Martinomagnifico
Martinomagnifico committed May 10, 2023
1 parent 7208f57 commit 3bb1d2a
Show file tree
Hide file tree
Showing 13 changed files with 1,755 additions and 736 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
# Changelog

## [1.2.0] - 2023-05-05
### Added
- Added local, specified, auto-appear
- Added Markdown example
- Added fix for Quarto list items

### Changed
- Reordered documentation
- Fragments can now be Appearance items


## [1.1.3] - 2022-06-26
### Changed
- Fixed a bug if there was no previous slide
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Martijn De Jongh (Martino)
Copyright (c) 2023 Martijn De Jongh (Martino)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
188 changes: 138 additions & 50 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation
Appearance v1.1.2 brought some **breaking changes**, please refer to the [migration guide](#migration-guide) before updating from v1.1.1 and under. It also changed the internal delay mechanism to use CSS animation delay in combination to adding the trigger on the parent, not each animated element. This will improve the performance.


## Basics

There are really only three steps:

1. Install Appearance
2. Edit the markup to add animation classes
2. Enjoy the animations


## Installation

### Regular installation
Expand Down Expand Up @@ -86,7 +95,87 @@ It is easy to set up your HTML structure for Appearance. Each element that you w
<li class="animate__bounceInLeft">It adds some attention.</li>
</ul>
```
When you are working with Markdown, this can be a chore so if you do not want to add all these classes, you can set the option `autoappear` to `true` (see Configuration below) and let Appearance do the heavy work. You do not need to add any markup and it will stay like this:

When you are working with Markdown (or in any other case), this can be a chore **so if you do not want to add all these classes**, you can set the option `autoappear` to `true` (see [Autoappear](#autoappear) below) and let Appearance do the heavy work.


## Now change it

It is easy to change the effects for Appearance.

### Changing the delay

Here's how to change the delay per element:

```html
<img class="animate__fadeInDown" data-src="1.jpg" data-delay="200">
<img class="animate__fadeInDown" data-src="2.jpg" data-delay="160">
<img class="animate__fadeInDown" data-src="3.jpg" data-delay="120">
```

### Changing the speed

You can change the speed of each animation, using the tempo classes from Animate.css:

```html
<img class="animate__fadeInDown animate__slower" data-src="1.jpg">
<img class="animate__fadeInDown animate__slow" data-src="2.jpg">
<img class="animate__fadeInDown animate__fast" data-src="3.jpg">
<img class="animate__fadeInDown animate__faster" data-src="4.jpg">
```

### Changing the 'appearevent'
When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended.

There are cases however, where there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting *together with* the transition might then be nicer. You can use any of the following events:

* *slidetransitionend* (default, Appearance will always start animating elements after the transition)
* *slidechanged* (Appearance will always start together with the transition)
* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*)

```html
<section data-appearevent="auto">
<ul>
<li class="animate__fadeInLeft">This is list item 1</li>
<li class="animate__fadeInLeft">This is list item 2</li>
<li class="animate__fadeInLeft">This is list item 1</li>
</ul>
</section>
```

These same event triggers can be set through the `appearevent` option in the global configuration.

When using Appearance inside an autoanimate slide, and changing the appearevent to `slidechanged` or `auto`, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.


## Autoappear

You can simplify the addition of animation classes.

Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements (tags or other selectors) in the presentation (with the option autoappear) or per slide (with data-autoappear).

### Global autoappear mode

With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector (and that are not already classed with your base animation class, like 'animated') will subsequently get this class, and thus an animation. These selectors and the animations can be set in the configuration options like this:

```javascript
Reveal.initialize({
// ...
appearance: {
// ...
autoappear: true,
autoelements: {
'ul li': 'animate__fadeInLeft',
'ol li': 'animate__fadeInRight'
}
},
plugins: [ Appearance ]
});
```

You can add any selector and animation class to this object.

Now you do not need to add any classes to the markup and it will stay like this:

```html
<ul>
Expand All @@ -105,6 +194,50 @@ or like this in Markdown:
```



### Local auto-appear

With the option `autoappear` set to `false`, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of `data-autoappear` will be animated automatically, with the selectors and animations as described in the configuration:

```javascript
Reveal.initialize({
// ...
appearance: {
// ...
autoappear: false,
autoelements: {
'ul li': 'animate__fadeInLeft',
'ol li': 'animate__fadeInRight'
}
},
plugins: [ Appearance ]
});
```

```html
<section data-autoappear="true">
<ul>
<li>This is list item 1</li>
<li>This is list item 2</li>
</ul>
</section>
```


### Local auto-appear, specified

You can also add a JSON object to the slide’s `data-autoappear`, with specific elements, their animations class as a string or an array with animations class, optional speed class and delay.

```html
<section data-autoappear='{"ul li":"animate__fadeInRight","h3":["animate__fadeInDown, animate__slow","100ms"]}'>
<h3>Local auto-appear, specified</h3>
<ul>
<li>This is list item 1</li>
<li>This is list item 2</li>
</ul>
</section>
```

## Configuration

There are a few options that you can change from the Reveal.js options. The values below are default and do not need to be set if they are not changed.
Expand Down Expand Up @@ -133,61 +266,15 @@ Reveal.initialize({
* **`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
* **`delay`**: Base time in ms between appearances.
* **`appearevent`**: Use a specific event at which Appearance starts.
* **`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Using 'autoappear'" mode below.
* **`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Autoappear" mode above.
* **`autoelements`**: These are the elements that `autoappear` will target. Each element has a selector and an animation class. If `autoappear` is off, the elements will still get animation if the section contains a `data-autoappear` attribute.
* **`csspath`**: Appearance will automatically load the styling of the plugin. If you want to customise the styling, you can link to your own CSS file here.
* **`animatecsspath`**: Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animeta.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.
* **`animatecsspath`**: Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animate.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.
* **`compatibility`**: This setting can let you use your current markup. However, because this also uses the Animate.css compatibility CSS, and it is likely that they will not support this in the future, please update your markup as shown above.
* **`compatibilitybaseclass`**: This is the baseclass to use if you don't change your markup.

### Changing the 'appearevent'
When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended.

There are cases however, where there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting *together with* the transition might then be nicer. You can use any of the following events:

* *slidetransitionend* (default, Appearance will start animating elements after the transition)
* *slidechanged* (Appearance will start together with the transition)
* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*)

These same event triggers can be set through the data-attribute `data-appearevent`.

When using Appearance inside an autoanimate slide, and changing the appearevent to `slidechanged` or `auto`, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.


### Using 'autoappear' mode
Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements, or tags, in the presentation.

With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector (and that are not already classed with your base animation class, like 'animated') will subsequently get this class, and thus an animation. These selectors and the animations can be set in the configuration options like this:

```javascript
autoelements: {
'ul li': 'animate__fadeInLeft',
'ol li': 'animate__fadeInRight'
}
```
You can add any selector and animation class to this object.

With the option `autoappear` set to `false`, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of `data-autoappear` will be animated automatically.



## Now change it

It is easy to change the effects for Appearance. Here's how to change the delay per-element:

```html
<img class="animate__fadeInDown" data-src="1.jpg" data-delay="200">
<img class="animate__fadeInDown" data-src="2.jpg" data-delay="160">
<img class="animate__fadeInDown" data-src="3.jpg" data-delay="120">
```
or the speed of each animation, using the tempo classes from Animate.css:

```html
<img class="animate__fadeInDown slower" data-src="1.jpg">
<img class="animate__fadeInDown slow" data-src="2.jpg">
<img class="animate__fadeInDown fast" data-src="3.jpg">
<img class="animate__fadeInDown faster" data-src="4.jpg">
```

## Migration guide
Appearance v1.1.2 is an update to stay current with the latest version of Animate.css, which itself brought breaking changes in version 4. Animate.css v4 added a prefix for all of the Animate.css classes, defaulting to `animate__` . Appearance will now automatically add the Animate.css base class (`animate__animated`) to any element with a Animate.css animation class.
Expand All @@ -209,6 +296,7 @@ you should now use this:
```
which is the only change in the markup.


### Turn on compatibility mode

If you turn in compatibility mode in Appearance, you can keep using your current markup. However, because this also uses the Animate.css compatibility CSS, this might break your presentations in the future, so it is not recommended. See the options above for compatibility mode and the compatibility base class.
Expand All @@ -224,4 +312,4 @@ And if you want to show off what you made with it, please do :-)
## License
MIT licensed

Copyright (C) 2022 Martijn De Jongh (Martino)
Copyright (C) 2023 Martijn De Jongh (Martino)
110 changes: 106 additions & 4 deletions css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
:root {
--r-heading-text-transform: none ;
--r-background-color: #1a1626;
--r-main-font-size: 40px;
}

.slides {
opacity: 0;
-webkit-transition: opacity 0.5s ease;
Expand Down Expand Up @@ -56,12 +62,17 @@
perspective: 1000px;
}

small {
margin: 1.5rem 0 2rem 0;
p.small {
font-size: 75%;
}

p {
margin: var(--r-block-margin) 0;
}

.small {
font-size: 75%;
.reveal .slides ul li, .reveal .slides ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}

small code {
Expand All @@ -72,6 +83,24 @@ small code {
border-radius: 0.5rem;
}

p a code {
background: none;
padding: 0;
text-decoration: underline;
}

p a[href*=html], p a[href*=http] {
text-decoration: underline;
}

.reveal pre {
font-size: 0.5em;
}

.reveal table.imagetable thead {
display: none;
}

a.github-corner {
position: absolute;
z-index: 1;
Expand All @@ -82,4 +111,77 @@ a.github-corner {

a.github-corner:hover {
color: white;
}

.reveal pre {
width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 0.5em;
}

p code, p kbd, ul code {
background: rgba(180, 180, 180, 0.2);
font-size: 0.8em;
padding: 5px 10px;
border-radius: 4px;
}

p kbd, ul kbd {
font-family: monospace;
}

.reveal .code-wrapper, pre, pre code {
white-space: pre-wrap !important;
}

em[class*=animate] {
display: inline-block;
}

.reveal img.demoimg {
width: 140px;
height: 140px;
max-width: 100%;
max-height: 100%;
margin: 0.2em;
}

.centerblock {
height: 100%;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
}

ol.twocol {
padding: 0;
margin: 0 auto;
list-style: none;
counter-reset: item;
width: 80%;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
ol.twocol li {
counter-increment: item;
padding-left: 1.7em;
}
ol.twocol li:before {
content: counter(item) ".";
margin-left: -1.7em;
margin-right: 0.5em;
display: inline-block;
width: 1.2em;
text-align: right;
}
Loading

0 comments on commit 3bb1d2a

Please sign in to comment.