diff --git a/apps/frontpage/components/home/hero/manager/component.tsx b/apps/frontpage/components/home/hero/manager/component.tsx index 1cd91cc9..9a0ede4b 100644 --- a/apps/frontpage/components/home/hero/manager/component.tsx +++ b/apps/frontpage/components/home/hero/manager/component.tsx @@ -1,4 +1,5 @@ -import { motion } from 'framer-motion'; +import { motion, useAnimate } from 'framer-motion'; +import { useEffect } from 'react'; import { ComponentImage } from './component-image'; export const Component = () => { @@ -6,6 +7,39 @@ export const Component = () => { const DELAY = 1.4; const DELAY2 = 2.7; + const [scope, animate] = useAnimate(); + const [scopeAddToCart, animateAddToCart] = useAnimate(); + + useEffect(() => { + void (async () => { + await animate( + scope.current, + { opacity: 1, y: 0, fill: '#000' }, + { duration: DURATION, delay: DELAY }, + ); + await animate( + scope.current, + { fill: '#fff' }, + { duration: DURATION, delay: 1.15 }, + ); + })(); + }, [animate, scope]); + + useEffect(() => { + void (async () => { + await animateAddToCart( + scopeAddToCart.current, + { opacity: 0.6, fill: '#666D82' }, + { duration: DURATION, delay: DELAY }, + ); + await animateAddToCart( + scopeAddToCart.current, + { fill: '#fff' }, + { duration: DURATION, delay: 1.15 }, + ); + })(); + }, [animateAddToCart, scopeAddToCart]); + return ( { /> {/* Out of stock */} - + {/* Circle around color */} { strokeOpacity="0.4" transition={{ delay: DELAY2, duration: DURATION }} width="27" - x="246.5" + x="212.5" y="161.5" /> - + {/* Price */} { initial={{ fill: '#000000' }} transition={{ delay: DELAY2, duration: DURATION }} /> - { stroke="#979B9B" strokeWidth="0.2" /> - - {/* Add to bag text */} - - {/* Remind me */} + {/* Add to cart text */} diff --git a/apps/frontpage/components/home/hero/manager/panel-controls.tsx b/apps/frontpage/components/home/hero/manager/panel-controls.tsx index 3411ddcc..9299f833 100644 --- a/apps/frontpage/components/home/hero/manager/panel-controls.tsx +++ b/apps/frontpage/components/home/hero/manager/panel-controls.tsx @@ -39,7 +39,7 @@ export const PanelControls: FC = () => { ); await animate(scope.current, { scale: 1 }, { duration: 0.1 }); })(); - }); + }, [animate, scope]); return (