Skip to content

Commit

Permalink
💫 Feat: Finalize The Animation For Desktop View
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirzenoozi
amirzenoozi committed May 28, 2024
1 parent 40443f8 commit a630960
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 61 deletions.
117 changes: 73 additions & 44 deletions src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ gsap.registerPlugin(useGSAP, ScrollTrigger)
function Home () {
const { t } = useTranslation(['home'])
const main = useRef<HTMLElement | null>(null) as React.MutableRefObject<HTMLInputElement>
const parallaxTimeLine = gsap.timeline()
const featureTimeLine = gsap.timeline()
const descriptionTimeLine = gsap.timeline()
const deviceTimeline = gsap.timeline()
const features: FeatureInterface[] = [
{
image: '/assets/4K144.svg',
Expand Down Expand Up @@ -48,59 +52,84 @@ function Home () {
]

useGSAP(() => {
gsap.to('.section__content', {
y: 0,
scrollTrigger: {
trigger: '.section__content',
start: 'bottom bottom',
end: 'top 20%',
scrub: true,
markers: false
}
parallaxTimeLine.from('.section--parallax', { yPercent: -100 })
ScrollTrigger.create({
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
// const boxes = gsap.utils.toArray('.box')
// boxes.forEach((box: any) => {
// // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
// gsap.to(box, {
// y: -300,
// scrollTrigger: {
// trigger: box,
// start: 'bottom bottom',
// end: 'top 20%',
// scrub: true,
// markers: false
// }
// })
// })
}, { scope: main })

featureTimeLine.from('#feature_0', { yPercent: 10, opacity: 0, delay: 1 }, 0)
featureTimeLine.from('#feature_1', { yPercent: 10, opacity: 0, delay: 1 }, 0)
featureTimeLine.from('#feature_2', { yPercent: 10, opacity: 0, delay: 1 }, 0)
featureTimeLine.from('#feature_3', { yPercent: 15, opacity: 0, delay: 2 }, 1)
featureTimeLine.from('#feature_4', { yPercent: 15, opacity: 0, delay: 2 }, 1)
featureTimeLine.from('#feature_5', { yPercent: 15, opacity: 0, delay: 2 }, 1)
ScrollTrigger.create({
animation: featureTimeLine,
trigger: '.section--blue',
start: 'bottom 35%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})

descriptionTimeLine.from('#content_desc', { yPercent: 20, opacity: 0 })
ScrollTrigger.create({
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 75%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})

deviceTimeline.from('#pinned-image', { yPercent: -50 })
ScrollTrigger.create({
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
}, { scope: main })

return (
<>
<section className={'page'}>
<section className={'page'} ref={main}>
<Container>
<div className={['section', 'section--blue', 'section--centered'].join(' ')}>
<p className={'section__title'}>{t('welcome')}</p>
</div>
<div className={['section', 'section--parallax'].join(' ')} ref={main}>
<div className={'section__content'}>
<p className={'section__desc'}>{t('promotion_content')}</p>
<FlexRow>
{
features.map((feature: FeatureInterface, index: number) => (
<FlexCol key={index} xs={12} sm={8}>
<div className={'feature'}>
<figure className={'figure__thumb'}>
<img src={feature.image} alt={feature.title}/>
</figure>
<div className={'feature__content'}>
<h3>{feature.title}</h3>
<p>{feature.desc}</p>
</div>
<div id={'features-wrapper'} className={['section', 'section--parallax'].join(' ')}>
<p className={'section__desc'} id={'content_desc'}>{t('promotion_content')}</p>
<FlexRow>
{
features.map((feature: FeatureInterface, index: number) => (
<FlexCol key={index} xs={12} sm={8}>
<div className={'feature'} id={`feature_${index}`}>
<figure className={'figure__thumb'}>
<img src={feature.image} alt={feature.title}/>
</figure>
<div className={'feature__content'}>
<h3>{feature.title}</h3>
<p>{feature.desc}</p>
</div>
</FlexCol>
))
}
</FlexRow>
</div>
</FlexCol>
))
}
</FlexRow>
<div className={'pinned-image'} id={'pinned-image'}>
<img src={'./assets/capturecard.png'} alt='Capture Card' />
</div>
</div>
<div className={['section', 'section--red', 'section--centered'].join(' ')}>
Expand Down
47 changes: 30 additions & 17 deletions src/pages/home/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,59 @@
justify-content: center;
box-sizing: border-box;
overflow: hidden;
background-color: #0E131E;
background-color: #030303;
color: #FFFFFF;
}

.section {
position: relative;
min-height: 100vh;
background-color: #030303;
//padding: px-to-rem(16) px-to-rem(16) px-to-rem(32);
padding: px-to-rem(16) px-to-rem(16);

&__content {
transform: translateY(120px);
@include respond-to(md) {
padding: px-to-rem(32) px-to-rem(96);
}

&__desc {
font-family: 'Univers67BoldCondensed';
text-align: center;
font-size: px-to-rem(24);
font-size: px-to-rem(28);
text-transform: uppercase;
margin-bottom: px-to-rem(32);
margin-bottom: px-to-rem(64);
line-height: 1.4;
background: -webkit-radial-gradient(#eee, #333);
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
&__title {
text-align: center;
font-size: px-to-rem(32);
font-size: px-to-rem(48);
text-transform: uppercase;
font-family: 'Univers67BoldCondensed';
}

&--red {
background-color: #FF0000;
z-index: 2;
}
&--blue {
background-color: #0000FF;
z-index: 2;
}
&--red {
background-color: #FF0000;
z-index: 2;
}
&--centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&--parallax {
top: -120px;
z-index: 1;
}

@include respond-to(md) {
padding: 160px px-to-rem(96) 220px;
@include respond-to(md) {
padding: px-to-rem(640) px-to-rem(96) px-to-rem(80);
}
}
}

Expand All @@ -65,7 +71,11 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: px-to-rem(4) px-to-rem(48);
padding: px-to-rem(4) px-to-rem(8);

@include respond-to(md) {
padding: px-to-rem(4) px-to-rem(48);
}

figure {
font-size: 0;
Expand All @@ -81,7 +91,10 @@
p {
text-align: center;
font-size: px-to-rem(18);
margin-bottom: px-to-rem(24);

margin-bottom: px-to-rem(64);
@include respond-to(md) {
margin-bottom: px-to-rem(64);
}
}
}

0 comments on commit a630960

Please sign in to comment.