Design System: animation blockreveal added

g-loot · Dec 5, 2023 · 8a37a57 · 8a37a57
1 parent 355d0a6
commit 8a37a57
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/pages/design-system/animation.js b/pages/design-system/animation.js
@@ -26,6 +26,7 @@ const DSpage = () => {
   const [StartAnim17, setStartAnim17] = useState(false);
   const [StartAnim18, setStartAnim18] = useState(false);
   const [StartAnim19, setStartAnim19] = useState(false);
+  const [StartAnim20, setStartAnim20] = useState(false);
 
   function handleStartAnim1() {
     setStartAnim1(true);
@@ -148,6 +149,13 @@ const DSpage = () => {
     }, 1600);
     return () => clearTimeout(timer);
   }
+  function handleStartAnim20() {
+    setStartAnim20(true);
+    const timer = setTimeout(() => {
+      setStartAnim20(false);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }
 
   return (
     <>
@@ -1101,6 +1109,40 @@ const DSpage = () => {
         </div>
       </div>
 
+      {/* Block reveal */}
+      <div className="mb-12">
+        <Anchor title="Block reveal" />
+        <div className="surface rounded-lg p-4">
+          <div className="">
+            <div className="flex gap-4 flex-col lg:flex-row lg:items-center">
+              <div className="flex-1 flex flex-col items-center gap-4">
+                <span
+                  className={`h1 text-mono-100  animate-paused animate-delay ${
+                    StartAnim20 === true ? "animate-running blockreveal" : "opacity-0"
+                  }`}
+                >
+                  <span>Battle Pass</span>
+                </span>
+                <button
+                  className="button button-tertiary mx-auto"
+                  onClick={handleStartAnim20.bind(this)}
+                >
+                  <span>Play animation</span>
+                </button>
+              </div>
+              <div className="flex-1">
+                <iframe
+                  className="rounded"
+                  width="100%"
+                  height="300"
+                  src="//jsfiddle.net/augustin_hiebel/zwe7v4d8/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"
+                ></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Info banner */}
       <div className="mb-12">
         <Anchor title="Info banner" />