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