studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💫(frontend) add animation on interaction with slider

Browse Source 
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.
This commit is contained in:
lebaudantoine
2024-11-16 23:59:26 +01:00
committed by aleb_the_flash
parent 8516782d79
commit 0522696842
1 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/frontend/src/features/home/components/IntroSlider.tsx
View File

@@ -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 = { type Slide = {
key: string key: string
img: string img: string
@@ -166,8 +187,10 @@ export const IntroSlider = () => {
{SLIDES.map((slide, index) => ( {SLIDES.map((slide, index) => (
<Slide visible={index == slideIndex}> <Slide visible={index == slideIndex}>
<Image src={slide.img} alt={t(`${slide.key}.imgAlt`)} /> <Image src={slide.img} alt={t(`${slide.key}.imgAlt`)} />
<Heading>{t(`${slide.key}.title`)}</Heading> <TextAnimation visible={index == slideIndex}>
<Body>{t(`${slide.key}.body`)}</Body> <Heading>{t(`${slide.key}.title`)}</Heading>
<Body>{t(`${slide.key}.body`)}</Body>
</TextAnimation>
</Slide> </Slide>
))} ))}
</SlideContainer> </SlideContainer>