From 0522696842dd7887baf802417e049f9e19d8f261 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Sat, 16 Nov 2024 23:59:26 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB(frontend)=20add=20animation=20on?= =?UTF-8?q?=20interaction=20with=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a minimal animation to enhance micro-interaction with our app. I've tried being minimal, please feel free to enhance or tune this animation. --- .../features/home/components/IntroSlider.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx index bde8b148..f47fa6a5 100644 --- a/src/frontend/src/features/home/components/IntroSlider.tsx +++ b/src/frontend/src/features/home/components/IntroSlider.tsx @@ -113,6 +113,27 @@ const Slide = styled('div', { }, }) +const TextAnimation = styled('div', { + base: { + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + }, + variants: { + visible: { + true: { + opacity: 1, + transform: 'none', + transition: 'opacity ease-in .3s, transform ease-in .3s', + }, + false: { + opacity: 0, + transform: 'translateX(-30%)', + }, + }, + }, +}) + type Slide = { key: string img: string @@ -166,8 +187,10 @@ export const IntroSlider = () => { {SLIDES.map((slide, index) => ( {t(`${slide.key}.imgAlt`)} - {t(`${slide.key}.title`)} - {t(`${slide.key}.body`)} + + {t(`${slide.key}.title`)} + {t(`${slide.key}.body`)} + ))}