sputlit animations (#92)

#92

Author: sahil-shubham

apps/extension/src/Components/InternalEvents.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { useSputlitContext, VisualState } from '../Hooks/useSputlitContext'
 import { getSelectionHTML } from '../Utils/getSelectionHTML'
@@ -28,6 +28,7 @@ export function InternalEvents() {
 }
 
 const highlighter = new Highlighter()
+type Timeout = ReturnType<typeof setTimeout>
 
 /**
  * `useToggleHandler` handles the keyboard events for toggling sputlit.
@@ -37,6 +38,26 @@ function useToggleHandler() {
   const { previewMode, setPreviewMode } = useEditorContext()
   const { saveIt } = useSaveChanges()
 
+  const timeoutRef = useRef<Timeout>()
+  const runAnimateTimer = useCallback((vs: VisualState.animatingIn | VisualState.animatingOut) => {
+    let ms = 0
+    if (vs === VisualState.animatingIn) {
+      ms = 200
+    }
+    if (vs === VisualState.animatingOut) {
+      ms = 100
+    }
+
+    clearTimeout(timeoutRef.current as Timeout)
+    timeoutRef.current = setTimeout(() => {
+      if (vs === VisualState.animatingIn) {
+        setVisualState(VisualState.showing)
+      } else if (vs === VisualState.animatingOut) {
+        setVisualState(VisualState.hidden)
+      }
+    }, ms)
+  }, [])
+
   useEffect(() => {
     function messageHandler(request: any, sender: chrome.runtime.MessageSender, sendResponse: (response: any) => void) {
       switch (request.type) {
@@ -53,9 +74,9 @@ function useToggleHandler() {
               setSelection(undefined)
             }
 
-            setVisualState(VisualState.showing)
+            setVisualState(VisualState.animatingIn)
           } else {
-            setVisualState(VisualState.hidden)
+            setVisualState(VisualState.animatingOut)
           }
           sendResponse(true)
       }
@@ -64,7 +85,7 @@ function useToggleHandler() {
     function handleKeyDown(event: KeyboardEvent) {
       if (event.key === 'Escape') {
         if (previewMode) {
-          setVisualState(VisualState.hidden)
+          setVisualState(VisualState.animatingOut)
           setTooltipState({ visualState: VisualState.hidden })
         } else {
           setPreviewMode(true)
@@ -73,6 +94,13 @@ function useToggleHandler() {
       }
     }
 
+    switch (visualState) {
+      case VisualState.animatingIn:
+      case VisualState.animatingOut:
+        runAnimateTimer(visualState)
+        break
+    }
+
     // Listen for message from background script to see if sputlit is requested
     chrome.runtime.onMessage.addListener(messageHandler)
 

apps/extension/src/Components/Sputlit/index.tsx

@@ -1,24 +1,109 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import Search from '../Search'
 import Content from '../Content'
 import { useSputlitContext, VisualState } from '../../Hooks/useSputlitContext'
 import { Main, Overlay, SputlitContainer, Wrapper } from './styled'
 
+const appearanceAnimationKeyframes = [
+  {
+    opacity: 0,
+    transform: 'scale(0.99)'
+  },
+  { opacity: 1, transform: 'scale(1.01)' },
+  { opacity: 1, transform: 'scale(1)' }
+]
+
 const Sputlit = () => {
-  const setVisualState = useSputlitContext().setVisualState
+  const { visualState, setVisualState } = useSputlitContext()
+
+  const outerRef = React.useRef<HTMLDivElement>(null)
+  const innerRef = React.useRef<HTMLDivElement>(null)
+
+  const enterMs = 200
+  const exitMs = 100
+
+  // Show/hide animation
+  useEffect(() => {
+    if (visualState === VisualState.showing) {
+      return
+    }
+
+    const duration = visualState === VisualState.animatingIn ? enterMs : exitMs
+
+    const element = outerRef.current
+
+    element?.animate(appearanceAnimationKeyframes, {
+      duration,
+      easing: visualState === VisualState.animatingOut ? 'ease-in' : 'ease-out',
+      direction: visualState === VisualState.animatingOut ? 'reverse' : 'normal',
+      fill: 'forwards'
+    })
+  }, [visualState])
+
+  // Height animation
+  const previousHeight = useRef<number>()
+  useEffect(() => {
+    // Only animate if we're actually showing
+    if (visualState === VisualState.showing) {
+      const outer = outerRef.current
+      const inner = innerRef.current
+
+      if (!outer || !inner) {
+        return
+      }
+
+      const ro = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          const cr = entry.contentRect
+
+          if (!previousHeight.current) {
+            previousHeight.current = cr.height
+          }
+
+          outer.animate(
+            [
+              {
+                height: `${previousHeight.current}px`
+              },
+              {
+                height: `${cr.height}px`
+              }
+            ],
+            {
+              duration: enterMs / 2,
+              easing: 'ease-out',
+              fill: 'forwards'
+            }
+          )
+          previousHeight.current = cr.height
+        }
+      })
+
+      ro.observe(inner)
+
+      return () => {
+        ro.unobserve(inner)
+      }
+    }
+  }, [visualState])
 
   return (
     <SputlitContainer id="sputlit-container">
-      <Wrapper>
-        <Main id="sputlit-main">
+      <Wrapper
+        ref={outerRef}
+        // style={{
+        //   ...appearanceAnimationKeyframes[0]
+        // }}
+      >
+        <Main id="sputlit-main" ref={innerRef}>
           <Search />
           <Content />
         </Main>
       </Wrapper>
       <Overlay
         id="sputlit-overlay"
         onClick={() => {
-          setVisualState(VisualState.hidden)
+          setVisualState(VisualState.animatingOut)
         }}
       />
     </SputlitContainer>

apps/extension/src/Components/Sputlit/styled.tsx

@@ -1,9 +1,17 @@
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 import { normalize } from '@mexit/shared'
 
 export const SputlitContainer = styled.div`
   ${normalize}
   font-family: 'Inter', sans-serif;
+
+  position: fixed;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  inset: 0;
+  padding: 14vh 16px 16px;
 `
 
 export const Overlay = styled.div`
@@ -12,37 +20,25 @@ export const Overlay = styled.div`
   position: fixed;
   top: 0px;
   left: 0px;
-  z-index: 9999;
+  z-index: -1;
   opacity: 0.6;
-  transition: all 0.1s cubic-bezier(0.05, 0.03, 0.35, 1);
 `
 
 export const Wrapper = styled.div`
-  position: fixed;
   width: 700px;
-  border-radius: 8px;
 
-  margin: auto;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 9999999999;
-  height: 540px;
-  transition: all 0.2s cubic-bezier(0.05, 0.03, 0.35, 1);
+  overflow: hidden;
+  background: ${({ theme }) => theme.colors.background.app};
+  box-shadow: 0px 6px 20px rgb(0 0 0 / 20%);
+  border-radius: 10px;
 `
 
 export const Main = styled.div`
   position: absolute;
   width: 100%;
-  background: ${({ theme }) => theme.colors.background.app};
-  box-shadow: 0px 6px 20px rgb(0 0 0 / 20%);
 
-  border-radius: 10px;
   top: 0px;
   left: 0px;
   z-index: 9999999998;
-  height: fit-content;
-  transition: all 0.2s cubic-bezier(0.05, 0.03, 0.35, 1);
   display: block;
 `