From d283f7e661e14d6ae1881fe803e5b4f1ed0689ff Mon Sep 17 00:00:00 2001 From: David Thompson Date: Mon, 24 Jun 2024 13:49:08 -0400 Subject: Add 2024 Guix social talk. --- .../reveal.js/examples/auto-animate.html | 225 +++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 2024-06-18-guix-social/reveal.js/examples/auto-animate.html (limited to '2024-06-18-guix-social/reveal.js/examples/auto-animate.html') diff --git a/2024-06-18-guix-social/reveal.js/examples/auto-animate.html b/2024-06-18-guix-social/reveal.js/examples/auto-animate.html new file mode 100644 index 0000000..199810e --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/examples/auto-animate.html @@ -0,0 +1,225 @@ + + + + + + + reveal.js - Auto Animate + + + + + + + + + + +
+ +
+
+

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

+
+ +
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ +
+ +
+ + + + + + + -- cgit v1.2.3