feat: add animate skip on homepage

moby-it · Feb 7, 2024 · 8d02648 · 8d02648
1 parent aad08df
commit 8d02648
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/ui/src/pages/home/animations.ts b/ui/src/pages/home/animations.ts
@@ -1,5 +1,5 @@
 import anime from 'animejs/lib/anime.es.js';
-import { createEffect, createSignal } from "solid-js";
+import { Accessor, Setter, createEffect, createSignal } from "solid-js";
 
 export function transformH1() {
   const title: any = document.querySelector('h1');
@@ -29,13 +29,12 @@ function staggerEnterFromRight(selector: string, duration = 1000) {
 }
 function animateWord(selector: string) {
   const textNodes = document.querySelectorAll(selector);
-  anime({
+  const a = anime({
     targets: textNodes,
     translateY: [-40, 0],
     opacity: [0, 1],
     easing: 'easeInOutElastic',
-    delay: anime.stagger(200),
-    duration: 200
+    delay: anime.stagger(100),
   });
 }
 function fromTop(selector: string) {
@@ -44,11 +43,11 @@ function fromTop(selector: string) {
     opacity: 1,
   });
 }
-export function registerAnimations() {
+export function registerAnimations(): [Accessor<number>, Setter<number>] {
   const [timer, setTimer] = createSignal(0);
   const showHeader = () => timer() > 1;
-  const showTags = () => timer() > 6;
-  const showBy = () => timer() > 7;
+  const showTags = () => timer() > 5;
+  const showBy = () => timer() > 6;
   const interval = setInterval(() => {
     setTimer(v => v += 1);
     if (timer() > 10)
@@ -78,4 +77,5 @@ export function registerAnimations() {
     }
     return showBy();
   });
+  return [timer, setTimer];
 }
diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx
@@ -1,11 +1,11 @@
 import { useNavigate } from "@solidjs/router";
-import { Component, onMount } from "solid-js";
+import { Component, Setter, onMount } from "solid-js";
 import { Button } from "../../components/button/button";
 import { hide, registerAnimations, transformH1 } from "./animations";
 import "./home.css";
 const Home: Component = () => {
   const navigate = useNavigate();
-
+  let timerFn: Setter<number>;
   onMount(() => {
     transformH1();
     hide(
@@ -15,10 +15,11 @@ const Home: Component = () => {
       '#start-here',
       '.subtitle > *',
     );
-    registerAnimations();
+    const [_, setTimer] = registerAnimations();
+    timerFn = setTimer;
   });
   return (
-    <div class="col home">
+    <div class="col home" onClick={() => timerFn(20)}>
       <div class="row align-center title">
         <img src="/icon-lg.svg" width="105" height="98" alt="" srcset="" />
         <h1 data-testid="title">Poker Planning</h1>