From ca32a67501f5dfdca6aed99b5b5e3496837ca231 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Sat, 26 Aug 2023 12:00:02 +0300 Subject: [PATCH] functions card animation polish --- apps/www/components/Panel/index.tsx | 3 +- .../components/Products/FunctionsVisual.tsx | 104 +++++++----------- .../images/index/products/functions.svg | 103 ++++++++++++----- 3 files changed, 114 insertions(+), 96 deletions(-) diff --git a/apps/www/components/Panel/index.tsx b/apps/www/components/Panel/index.tsx index ab5ac294ddc..9ee2f113933 100644 --- a/apps/www/components/Panel/index.tsx +++ b/apps/www/components/Panel/index.tsx @@ -70,9 +70,8 @@ const Panel = ({ !trackCursor && hasActiveOnHover ? 'hover:bg-none hover:!bg-brand' : '', outerClassName, ].join(' ')} - initial="rest" whileHover="hover" - animate="hover" + animate="initial" >
{ +const FunctionsVisual = () => { + const initial = { x1: [0, 0], x2: [0, 0], y1: [0, 0], y2: [0, 0] } const gradientVariant1 = { - rest: { - x1: [0], - x2: [0], - y1: [0], - y2: [0], - }, - out: { - x1: [0], - x2: [0], - y1: [0], - y2: [0], - }, + initial, hover: { - x1: [30, 200, 400], - x2: [0, 0, 348], + x1: [30, 200, 450], + x2: [0, 50, 350], y1: [40, 0, 0], y2: [0, 0, 0], }, } const gradientVariant2 = { - rest: { - x1: [0], - x2: [0], - y1: [0], - y2: [0], - }, - out: { - x1: [0], - x2: [0], - y1: [0], - y2: [0], - }, + initial, hover: { - x1: [400, 200, 0], - x2: [348, 150, 0], - y1: [0, 0, 0], - y2: [0, 0, 0], + x1: [400, 50], + x2: [300, -100], + y1: [0, 0], + y2: [0, 0], }, } return (
- + @@ -79,11 +56,11 @@ const FunctionsVisual = ({ isHovered }: { isHovered?: boolean }) => { width="485.675" height="261.952" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - + { width="372.67" height="416.295" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - + - - - - + + + + - - - - + + + + - + diff --git a/apps/www/public/images/index/products/functions.svg b/apps/www/public/images/index/products/functions.svg index 52b3886a96b..a526d0dfbdf 100644 --- a/apps/www/public/images/index/products/functions.svg +++ b/apps/www/public/images/index/products/functions.svg @@ -1,53 +1,100 @@ - - - - - + + + + + - - + + - - - + + + - - + + - - - + + + + + + + + + + + + + + + + + + + + - + - + - + - - + + - + - + - + - + - + + + + + + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + +