enable wiggle on interval

packages/animation/package.json

@@ -41,6 +41,7 @@
     "@xylabs/react-flexbox": "workspace:^"
   },
   "devDependencies": {
+    "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@storybook/react": "^8.3.6",
     "@types/react": "^18.3.12",

packages/animation/src/RotationAnimation.stories.tsx

@@ -0,0 +1,45 @@
+import { Home } from '@mui/icons-material'
+import { IconButton, Stack } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { RotationAnimation } from './RotationAnimation.tsx'
+
+export default {
+  title: 'animations/RotationAnimation',
+  component: RotationAnimation,
+} as Meta
+
+const Template: StoryFn<typeof RotationAnimation> = args => <RotationAnimation {...args} />
+
+const Default = Template.bind({})
+Default.args = { children: null }
+
+const WithHoverActivation = Template.bind({})
+WithHoverActivation.args = {
+  children: (
+    <Stack alignItems="center">
+      <IconButton>
+        <Home />
+      </IconButton>
+    </Stack>
+  ),
+  rotation: 20,
+}
+
+const WithTimerActivation = Template.bind({})
+WithTimerActivation.args = {
+  activation: 'timer',
+  children: (
+    <Stack alignItems="center">
+      <IconButton>
+        <Home />
+      </IconButton>
+    </Stack>
+  ),
+  rotation: 20,
+}
+
+export {
+  Default, WithHoverActivation, WithTimerActivation,
+}

packages/animation/src/RotationAnimation.tsx

@@ -5,10 +5,16 @@ import React, { useEffect, useState } from 'react'
 // Inspired by https://www.joshwcomeau.com/react/rotate/#bonus-that-star-animation-8
 
 export interface RotationAnimationProps extends FlexBoxProps {
+  activation?: 'hover' | 'timer'
   rotation: number
 }
-export const RotationAnimation: React.FC<RotationAnimationProps> = ({ children, rotation }) => {
+export const RotationAnimation: React.FC<RotationAnimationProps> = ({
+  children, activation = 'hover', rotation,
+}) => {
   const [isRotated, setIsRotated] = useState(false)
+  const activateOnHover = activation === 'hover'
+  const activateOnTimer = activation === 'timer'
+
   const [springs, api] = useSpring(() => ({
     backfaceVisibility: 'hidden',
     config: {
@@ -19,6 +25,20 @@ export const RotationAnimation: React.FC<RotationAnimationProps> = ({ children,
     from: { rotate: '0deg' },
   }))
 
+  useEffect(() => {
+    let interval: NodeJS.Timeout
+    if (activateOnTimer) {
+      handleHover()
+      interval = setInterval(() => {
+        handleHover()
+      }, 5000)
+    }
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [activateOnTimer])
+
   const handleHover = () => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     api.start({
@@ -45,7 +65,7 @@ export const RotationAnimation: React.FC<RotationAnimationProps> = ({ children,
   }, [isRotated])
 
   return (
-    <animated.div onMouseEnter={handleHover} style={{ ...springs }}>
+    <animated.div onMouseEnter={activateOnHover ? handleHover : undefined} style={{ ...springs }}>
       {children}
     </animated.div>
   )

yarn.lock

@@ -5016,6 +5016,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@xylabs/react-animation@workspace:packages/animation"
   dependencies:
+    "@mui/icons-material": "npm:^6.1.5"
     "@mui/material": "npm:^6.1.5"
     "@react-spring/web": "npm:^9.7.5"
     "@storybook/react": "npm:^8.3.6"