"Fossies" - the Fresh Open Source Software Archive

Member "reveal.js-4.1.2/examples/auto-animate.html" (9 Jun 2021, 7441 Bytes) of package /linux/www/reveal.js-4.1.2.tar.gz:


Caution: In this restricted "Fossies" environment the current HTML page may not be correctly presentated and may have some non-functional links. You can here alternatively try to browse the pure source code or just view or download the uninterpreted raw source code. If the rendering is insufficient you may try to find and view the page on the project site itself.

Auto-Animate Example

This will fade out


						function Example() {
						  const [count, setCount] = useState(0);
						}
					

Auto-Animate Example

This will fade out

This element is unmatched


						function Example() {
						  New line!
						  const [count, setCount] = useState(0);
						}
					

Line Height & Letter Spacing

Line Height & Letter Spacing


							import React, { useState } from 'react';

							function Example() {
							  const [count, setCount] = useState(0);

							  return (
							    ...
							  );
							}
						

							function Example() {
							  const [count, setCount] = useState(0);

							  return (
							    <div>
							      <p>You clicked {count} times</p>
							      <button onClick={() => setCount(count + 1)}>
							        Click me
							      </button>
							    </div>
							  );
							}
						

							function Example() {
							  // A comment!
							  const [count, setCount] = useState(0);

							  return (
							    <div>
							      <p>You clicked {count} times</p>
							      <button onClick={() => setCount(count + 1)}>
							        Click me
							      </button>
							    </div>
							  );
							}
						

Swapping list items

  • One
  • Two
  • Three

Swapping list items

  • Two
  • One
  • Three

Swapping list items

  • Two
  • Three
  • One

SLIDE 1

Animate Anything

SLIDE 2

With Auto Animate

SLIDE 3

With Auto Animate

SLIDE 3

With Auto Animate

data-auto-animate-id="a"

A1

data-auto-animate-id="a"

A1

A2

data-auto-animate-id="b"

B1

data-auto-animate-id="b"

B1

B2