Animating only the home page logo

4lejandrito · Nov 9, 2022 · e9877f9 · e9877f9
1 parent 200181d
commit e9877f9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/creepyface-site/pages/index.tsx b/packages/creepyface-site/pages/index.tsx
@@ -18,7 +18,7 @@ export default function Home({ create = false }) {
     <CreateProvider open={create} navigate>
       <section className="description">
         <header>
-          <Logo />
+          <Logo animate />
         </header>
         <p>
           {translate('The JavaScript library that makes your face look at')}{' '}

diff --git a/packages/creepyface-site/src/components/Logo.tsx b/packages/creepyface-site/src/components/Logo.tsx
@@ -33,6 +33,7 @@ const Pointer = (props: {
 }
 
 export default function Logo(props: {
+  animate?: boolean
   onPointerPositionChange?: (position: Point) => void
 }) {
   const [animating, setAnimating] = useState(false)
@@ -45,8 +46,8 @@ export default function Logo(props: {
       <div className="wrapper">
         <svg
           className={animating ? ' animate' : ''}
-          onMouseEnter={() => setAnimating(true)}
-          onClick={() => setAnimating(true)}
+          onMouseEnter={props.animate ? () => setAnimating(true) : undefined}
+          onClick={props.animate ? () => setAnimating(true) : undefined}
           onAnimationEnd={() => setAnimating(false)}
           viewBox={`0 0 317.8 78`}
           xmlns="http://www.w3.org/2000/svg"