{"id":16910962,"url":"https://github.com/martinomagnifico/reveal.js-appearance","last_synced_at":"2026-01-31T17:03:35.514Z","repository":{"id":40440622,"uuid":"178617755","full_name":"Martinomagnifico/reveal.js-appearance","owner":"Martinomagnifico","description":"An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.","archived":false,"fork":false,"pushed_at":"2024-10-09T17:30:28.000Z","size":3770,"stargazers_count":123,"open_issues_count":2,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-27T10:18:41.834Z","etag":null,"topics":["javascript","reveal-js","reveal-js-plugin","reveal-plugin","revealjs"],"latest_commit_sha":null,"homepage":"https://martinomagnifico.github.io/reveal.js-appearance/demo/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Martinomagnifico.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-30T22:27:34.000Z","updated_at":"2025-11-09T20:59:57.000Z","dependencies_parsed_at":"2024-03-17T09:23:35.062Z","dependency_job_id":"ad1d6f3a-482b-4bef-84f8-726aa023867a","html_url":"https://github.com/Martinomagnifico/reveal.js-appearance","commit_stats":{"total_commits":82,"total_committers":4,"mean_commits":20.5,"dds":0.6219512195121951,"last_synced_commit":"febe8bae35ede7692ec2e7fea767c1ed941722e8"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/Martinomagnifico/reveal.js-appearance","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-appearance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-appearance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-appearance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-appearance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Martinomagnifico","download_url":"https://codeload.github.com/Martinomagnifico/reveal.js-appearance/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-appearance/sbom","scorecard":{"id":90538,"data":{"date":"2025-08-11","repo":{"name":"github.com/Martinomagnifico/reveal.js-appearance","commit":"febe8bae35ede7692ec2e7fea767c1ed941722e8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.4,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":5,"reason":"5 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T07:49:35.563Z","repository_id":40440622,"created_at":"2025-08-15T07:49:35.563Z","updated_at":"2025-08-15T07:49:35.563Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28948356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T14:26:55.697Z","status":"ssl_error","status_checked_at":"2026-01-31T14:26:52.545Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","reveal-js","reveal-js-plugin","reveal-plugin","revealjs"],"created_at":"2024-10-13T19:03:56.457Z","updated_at":"2026-01-31T17:03:35.505Z","avatar_url":"https://github.com/Martinomagnifico.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Appearance\n\n[![Version](https://img.shields.io/npm/v/reveal.js-appearance)](#) [![Downloads](https://img.shields.io/npm/dt/reveal.js-appearance)](https://github.com/Martinomagnifico/reveal.js-appearance/archive/refs/heads/master.zip)\n\nAn animation plugin for [Reveal.js](https://revealjs.com) that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.\n\n[\u003cimg src=\"https://martinomagnifico.github.io/reveal.js-appearance/screenshot.png\" width=\"100%\"\u003e](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo.html)\n\nIn Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes to allow for a non-animated state. \n\n* [Demo](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo.html)\n* [Markdown demo](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo-markdown.html)\n\nThe animations will start automatically after or at each slide or fragment change if the HTML is set up to use Appearance.\n\n\n## Basics\n\nThere are really only three steps:\n\n1. Install Appearance\n2. Edit the markup to add animation classes\n2. Enjoy the animations\n\n\n## Installation\n\n### Regular installation\n\nCopy the appearance folder to the plugins folder of the reveal.js folder, like this: `plugin/appearance`.\n\n### npm installation\n\nThis plugin is published to, and can be installed from, npm.\n\n```console\nnpm install reveal.js-appearance\n```\nThe Appearance plugin folder can then be referenced from `node_modules/reveal.js-appearance/plugin/appearance`\n\n\n\n## Adding Appearance to your presentation\n\n### JavaScript\n\n\nThere are two JavaScript files for Appearance, a regular one, `appearance.js`, and a module one, `appearance.esm.js`. You only need one of them:\n\n#### Regular \nIf you're not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/reveal.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"plugin/appearance/appearance.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tReveal.initialize({\n\t\t// ...\n\t\tplugins: [ Appearance ]\n\t});\n\u003c/script\u003e\n```\n\n\n#### From npm\n\nYou can run it directly from npm:\n\n```html\n\u003cscript type=\"module\"\u003e\n\timport Reveal from 'reveal.js';\n\timport Appearance from 'reveal.js-appearance';\n\timport 'reveal.js-appearance/plugin/appearance/appearance.css';\n\tReveal.initialize({\n\t\t// ...\n\t\tplugins: [ Appearance ]\n\t});\n\u003c/script\u003e\n```\n\nOtherwise, you may want to copy the plugin into a plugin folder or an other location::\n\n```html\n\u003cscript type=\"module\"\u003e\n\timport Reveal from './dist/reveal.mjs';\n\timport Appearance from './plugin/appearance/appearance.mjs';\n\timport './plugin/appearance/appearance.css';\n\tReveal.initialize({\n\t\t// ...\n\t\tplugins: [ Appearance ]\n\t});\n\u003c/script\u003e\n```\n\n\n### Styling\nThe styling of Appearance is automatically inserted **when the appearance folder is manually copied** to the Reveal.js plugin folder.\n\nIf you **import** reveal.js-appearance from npm, you will need to **import** the CSS file yourself. Depending on your setup this can be something like this:\n```javascript\nimport 'reveal.js-appearance/plugin/appearance/appearance.css';\n```\n\nAppearance will detect if it runs in a module environment and will then not autoload the CSS. You can still set `cssautoload` to `true` if you like, but your bundler (Vite, Webpack) may not like that. In any of these cases, `import` the CSS file yourself.\n\nIf you want to change the Appearance style, you can do a lot of that via the Reveal.js options. Or you can simply make your own style and use that stylesheet instead. Linking to your custom styles can be managed through the `csspath` option of Appearance or through `import` when using modules.\n\n#### Custom CSS\nIf and when you decide to create your own CSS file, make sure that you also include the following CSS variable, that is used by the plugin to avoid loading the CSS multiple times, and to avoid using the autoloading feature when using modules:\n\n```css\n:root {\n\t--cssimported-appearance: true;\n}\n```\n\n## Setup\n\n### HTML\n\nIt is easy to set up your HTML structure for Appearance. Each element that you want to animate uses a base class and an animation class. ***You only have to add an animation class*** because the base class is automatically added to any element with an animation class. The names of these animation classes are defined by [Animate.css](https://animate.style). In the example below, you can see that the animation class is `animate__bounceInLeft`:  \n\n```html\n\u003cul\u003e\n\t\u003cli class=\"animate__bounceInLeft\"\u003eAdd it to any text element\u003c/li\u003e\n\t\u003cli class=\"animate__bounceInLeft\"\u003eLike list items, or headers.\u003c/li\u003e\n\t\u003cli class=\"animate__bounceInLeft\"\u003eIt adds some attention.\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nWhen 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.\n\n#### Animating words and letters\n\nTo nicely animate the words in a heading, or the letters of a word, add an animation class to it, and add a data-attribute for the kind of split you want:  \n\n```html\n\u003ch3 class=\"animate__fadeInDown\" data-split=\"words\"\u003eLet words appear word by word\u003c/h3\u003e\n\u003ch3 class=\"animate__fadeInDown\" data-split=\"letters\"\u003eLet letters appear letter by letter\u003c/h3\u003e\n```\n\n\n## Now change it\n\nIt is easy to change the effects for Appearance. \n\n### Changing the delay\n\nHere's how to change the delay per element: \n\n```html\n\u003cimg class=\"animate__fadeInDown\" data-src=\"1.jpg\" data-delay=\"200\"\u003e\n\u003cimg class=\"animate__fadeInDown\" data-src=\"2.jpg\" data-delay=\"160\"\u003e\n\u003cimg class=\"animate__fadeInDown\" data-src=\"3.jpg\" data-delay=\"120\"\u003e\n```\n\n### Changing the speed\n\nYou can change the speed of each animation, using the tempo classes from Animate.css:\n\n```html\n\u003cimg class=\"animate__fadeInDown animate__slower\" data-src=\"1.jpg\"\u003e\n\u003cimg class=\"animate__fadeInDown animate__slow\" data-src=\"2.jpg\"\u003e\n\u003cimg class=\"animate__fadeInDown animate__fast\" data-src=\"3.jpg\"\u003e\n\u003cimg class=\"animate__fadeInDown animate__faster\" data-src=\"4.jpg\"\u003e\n```\n\n\n### Changing word and letter animations\n\nFor words and letters, the same techniques can be used. \n\nNote that the data-delay also gets copied to the smaller elements in it, which means that there is no more 'whole sentence' or 'whole word' to delay. By default, the whole element then gets the delay (depending on if it is following other animations) as defined in the `delay` option in the Configuration, but it can be overriden by an optional `data-container-delay`.\n\nAlso note the (optional) `baseline` class here, which makes the words appear from the baseline of the text.\n\n```html\n\u003ch3 class=\"animate__fadeInUp animate__faster baseline\"\n\tdata-split=\"words\" \n\tdata-delay=\"80\"\n\tdata-container-delay=\"600\"\u003eLet words appear word by word\u003c/h3\u003e\n```\n\n\n### Changing the 'appearevent'\nWhen 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. \n\nThere 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:\n\n* *slidetransitionend* (default, Appearance will always start animating elements after the transition)\n* *slidechanged* (Appearance will always start together with the transition)\n* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*)\n\n```html\n\u003csection data-appearevent=\"auto\"\u003e\n\t\u003cul\u003e\n\t\t\u003cli class=\"animate__fadeInLeft\"\u003eThis is list item 1\u003c/li\u003e\n\t\t\u003cli class=\"animate__fadeInLeft\"\u003eThis is list item 2\u003c/li\u003e\n\t\t\u003cli class=\"animate__fadeInLeft\"\u003eThis is list item 1\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/section\u003e\n```\n\nThese same event triggers can be set through the `appearevent` option in the global configuration. \n\nWhen 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.\n\n\n### Initial delay on page load\nYou can set a delay before animations start, but only on the initial page load or reloads (not when navigating between slides):\n\n\u003csection data-init-delay=\"2000\"\u003e\n\t\u003ch3\u003eWelcome\u003c/h3\u003e\n\t\u003cp class=\"animate__fadeIn\"\u003eThis will appear 2 seconds after page load\u003c/p\u003e\n\u003c/section\u003e\n```\n\n\n\n\n## Autoappear\n\nYou can simplify the addition of animation classes.\n\nSometimes (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).\n\n### Global autoappear mode\n\nWith 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:  \n\n```javascript\nReveal.initialize({\n\t// ...\n\tappearance: {\n\t\t// ...\n\t\tautoappear: true,\n\t\tautoelements: {\n\t\t\t'ul li': 'animate__fadeInLeft',\n\t\t\t'ol li': 'animate__fadeInRight'\n\t\t}\n\t},\n\tplugins: [ Appearance ]\n});\n```\n\nYou can add any selector and animation class to this object. You can use a simple JSON object, or more elaborate like this (you can also mix them): `{\"ul li\": {\"animation\":\"animate__fadeInLeft\", \"speed\":\"slow\", \"delay\":\"100\"}}`. An object like that can contain the following keys:\n\n* **animation**: The Animate.css animation class\n* **speed**: Animation speed (slower, slow, fast, faster)\n* **delay**: Delay between elements in milliseconds\n* **initial-delay**: Delay before the first element of this type appears in milliseconds\n* * **container-delay**: Delay before the first element in each container (when elements are in separate parent containers)\n* **split**: Split text into words (`data-split=\"words\"`) or letters (`data-split=\"letters\"`) for individual animation\n\nwhere the last key is specific for word- and letter-animations.\n\nIf you choose to write all your animation selectors and properties globally, you no longer need to add any classes to the markup and it can stay like this:\n\n```html\n\u003cul\u003e\n\t\u003cli\u003eAdd it to any text element\u003c/li\u003e\n\t\u003cli\u003eLike list items, or headers.\u003c/li\u003e\n\t\u003cli\u003eIt adds some attention.\u003c/li\u003e\n\u003c/ul\u003e\n```\nor like this in Markdown:\n\n```markdown\n* Add it to any text element\n* Like list items, or headers.\n* It adds some attention.\n\n```\n\n\n\n### Local auto-appear\n\nWith 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: \n\n```javascript\nReveal.initialize({\n\t// ...\n\tappearance: {\n\t\t// ...\n\t\tautoappear: false,\n\t\tautoelements: {\n\t\t\t'ul li': 'animate__fadeInLeft',\n\t\t\t'ol li': 'animate__fadeInRight'\n\t\t}\n\t},\n\tplugins: [ Appearance ]\n});\n```\n\n```html\n\u003csection data-autoappear=\"true\"\u003e\n\t\u003cul\u003e\n\t\t\u003cli\u003eThis is list item 1\u003c/li\u003e\n\t\t\u003cli\u003eThis is list item 2\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\u003c/section\u003e\n```\n\n\n### Local auto-appear, specified\n\nYou can also add a JSON object to the slide’s `data-autoappear`, with specific elements, their animations class(es) as a string or an object with animations class(es), optional speed and optional delay.  \n\nIn the example below you can see that mixing strings and objects is perfectly fine. The `ul li` has a simple string for only the animation class(es) while the `h3` uses an object with keys.\n\n```html\n\u003csection data-autoappear='{\"ul li\":\"animate__fadeInRight\", \n\"h3\": {\"animation\":\"animate__fadeInDown\", \"speed\":\"slow\", \"delay\":\"100\"}}'\u003e\n\t\u003ch3\u003eLocal auto-appear, specified\u003c/h3\u003e\n\t\u003cul\u003e\n\t\t\u003cli\u003eThis is list item 1\u003c/li\u003e\n\t\t\u003cli\u003eThis is list item 2\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/section\u003e\n```\n\n### Container-aware delays\n\nWhen you have multiple groups of elements in separate containers, `container-delay` applies to the first element in each container, while `delay` applies between elements within the same container. In the example below, the `delay` is the standard 300ms from the global options.\n\n```html\n\u003csection data-autoappear='{\"img.test\": {\"animation\":\"animate__fadeInDown\", \"container-delay\":\"1200\"}}'\u003e\n\t\u003ch3\u003eContainer-aware delays\u003c/h3\u003e\n\t\u003cdiv class=\"row\"\u003e\n\t\t\u003cimg class=\"test\" src=\"assets/img/1.jpg\"\u003e\n\t\t... other images ...\n\t\u003c/div\u003e\n\u003c/section\u003e\n```\n\n\n\n\n\n## Global options\n\nThere are a few options that you can change from the Reveal.js options. The values below, in alphabetical order, are default and do not need to be set if they are not changed. Some of the options have been removed, compared to the previous version. This is mainly because we now auto-import Animate.css, so no need to set that up anymore.\n\n```javascript\nReveal.initialize({\n  // ...\n  appearance: {\n\tappearevent: 'slidetransitionend',\n\tautoappear: false,\n\tautoelements: false,\n\tcssautoload: true,\n\tcsspath: '',\n\tdelay: 300,\n\thideagain: true,\n\tinitdelay: 0\n  },\n  plugins: [ Appearance ]\n});\n```\n\n* **`appearevent`**: Use a specific event at which Appearance starts. Options: `'slidetransitionend'` (default), `'slidechanged'`, or `'auto'`.\n* **`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.\n* **`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.\n* **`cssautoload`**: Appearance will load the CSS (including Animate.css) if this is set to `true`. If you import reveal.js-appearance from npm, you will need to import the CSS file yourself. If you use 'import', then `cssautoload` should be set to `false`. If you know the path to the CSS file, you can use the `csspath` option and keep `cssautoload` set to `true`.\n* **`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.\n* **`delay`**: Base time in milliseconds between element appearances. This is the delay between items of the same type.\n* **`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back. When set to `true`, elements will hide again when navigating away from the slide.\n* **`initdelay`**: Sets a delay in milliseconds before any animations start, but only on the initial page load (not when navigating between slides). Default is `0` (no delay). Can be overridden per-slide with `data-init-delay` attribute.\n\n\n\n## Like it?\nIf you like it, please star this repo! \n\nAnd if you want to show off what you made with it, please do :smiley:\n\n\n## License\nMIT licensed\n\nCopyright (C) 2026 Martijn De Jongh (Martino)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinomagnifico%2Freveal.js-appearance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinomagnifico%2Freveal.js-appearance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinomagnifico%2Freveal.js-appearance/lists"}