Skip to content

Commit

Permalink
♻️ Chore: Refactor The Breakpoint System
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirzenoozi
amirzenoozi committed May 30, 2024
1 parent 3c78356 commit 2addce9
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 128 deletions.
195 changes: 74 additions & 121 deletions src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ 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 matchMedia = gsap.matchMedia()
const features: FeatureInterface[] = [
{
Expand Down Expand Up @@ -54,78 +50,33 @@ function Home () {
]

useGSAP(() => {
// Animating The Wrapper By Pulling It Down From The Top
parallaxTimeLine.from('.section--parallax', { yPercent: -100 })
matchMedia.add('(min-width: 992px)', () => {
ScrollTrigger.create({
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
ScrollTrigger.create({
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
ScrollTrigger.create({
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(max-width: 576px)', () => {
ScrollTrigger.create({
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(max-width: 576px) and (prefers-reduced-motion: no-preference)', () => {
const parallaxTimeLine = gsap.timeline()
const featureTimeLine = gsap.timeline()
const descriptionTimeLine = gsap.timeline()
const deviceTimeline = gsap.timeline()

parallaxTimeLine.from('.section--parallax', { yPercent: -100 })

// Animating The Features Items
matchMedia.add('(min-width: 992px)', () => {
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_2', { yPercent: 10, opacity: 0, delay: 2 }, 1)
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)
featureTimeLine.from('#feature_4', { yPercent: 15, opacity: 0, delay: 3 }, 2)
featureTimeLine.from('#feature_5', { yPercent: 15, opacity: 0, delay: 3 }, 2)

descriptionTimeLine.from('#content_desc', { yPercent: 20, opacity: 0 })

// Animating The Wrapper By Pulling It Down From The Top
ScrollTrigger.create({
animation: featureTimeLine,
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'bottom 35%',
start: 'top top',
endTrigger: '.section--red',
end: 'top bottom',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
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',
Expand All @@ -135,67 +86,63 @@ function Home () {
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
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: 2 }, 1)
featureTimeLine.from('#feature_3', { yPercent: 15, opacity: 0, delay: 2 }, 1)
featureTimeLine.from('#feature_4', { yPercent: 15, opacity: 0, delay: 3 }, 2)
featureTimeLine.from('#feature_5', { yPercent: 15, opacity: 0, delay: 3 }, 2)
ScrollTrigger.create({
animation: featureTimeLine,
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 35%',
start: 'bottom 25%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(max-width: 576px)', () => {
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: 2 }, 1)
featureTimeLine.from('#feature_3', { yPercent: 15, opacity: 0, delay: 2 }, 1)
featureTimeLine.from('#feature_4', { yPercent: 15, opacity: 0, delay: 3 }, 2)
featureTimeLine.from('#feature_5', { yPercent: 15, opacity: 0, delay: 3 }, 2)
ScrollTrigger.create({
animation: featureTimeLine,
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 35%',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top bottom',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 577px) and (max-width: 768px) and (prefers-reduced-motion: no-preference)', () => {
const parallaxTimeLine = gsap.timeline()
const featureTimeLine1 = gsap.timeline()
const descriptionTimeLine = gsap.timeline()
const deviceTimeline = gsap.timeline()

parallaxTimeLine.from('.section--parallax', { yPercent: -100 })

// Animating The Description Content
descriptionTimeLine.from('#content_desc', { yPercent: 20, opacity: 0 })
matchMedia.add('(min-width: 992px)', () => {
featureTimeLine1.from('#feature_0', { yPercent: 10, opacity: 0, delay: 1 }, 0)
featureTimeLine1.from('#feature_1', { yPercent: 10, opacity: 0, delay: 1 }, 0)
featureTimeLine1.from('#feature_2', { yPercent: 10, opacity: 0, delay: 2 }, 1)
featureTimeLine1.from('#feature_3', { yPercent: 15, opacity: 0, delay: 2 }, 1)
featureTimeLine1.from('#feature_4', { yPercent: 15, opacity: 0, delay: 3 }, 2)
featureTimeLine1.from('#feature_5', { yPercent: 15, opacity: 0, delay: 3 }, 2)

descriptionTimeLine.from('#content_desc', { yPercent: 20, opacity: 0 })

// Animating The Wrapper By Pulling It Down From The Top
ScrollTrigger.create({
animation: descriptionTimeLine,
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'bottom 75%',
start: 'top top',
endTrigger: '.section--red',
end: 'top bottom',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
animation: featureTimeLine1,
// trigger: '.section--parallax',
// start: 'bottom 50%',
trigger: '.section--blue',
start: 'bottom 75%',
start: 'bottom 35%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
trigger: '.section--blue',
Expand All @@ -205,55 +152,61 @@ function Home () {
scrub: true,
markers: false
})
})
matchMedia.add('(max-width: 576px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 25%',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top bottom',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 769px) and (prefers-reduced-motion: no-preference)', () => {
const parallaxTimeLine = gsap.timeline()
const featureTimeLine = gsap.timeline()
const descriptionTimeLine = gsap.timeline()
const deviceTimeline = gsap.timeline()

parallaxTimeLine.from('.section--parallax', { yPercent: -100 })

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)

// Animating The Pinned Image To Have Better Animation
deviceTimeline.from('#pinned-image', { yPercent: -50 })
matchMedia.add('(min-width: 992px)', () => {
descriptionTimeLine.from('#content_desc', { y: '30vh', opacity: 0 })

// Animating The Wrapper By Pulling It Down From The Top
ScrollTrigger.create({
animation: deviceTimeline,
animation: parallaxTimeLine,
trigger: '.section--blue',
start: 'bottom 50%',
start: 'top top',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
animation: featureTimeLine,
trigger: '.section--blue',
start: 'bottom 50%',
start: 'bottom 15%',
endTrigger: '.section--red',
end: 'top 80%',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 50%',
start: 'bottom 30%',
endTrigger: '.section--red',
end: 'top 80%',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(max-width: 576px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
trigger: '.section--blue',
Expand Down
24 changes: 17 additions & 7 deletions src/pages/home/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,24 +58,34 @@
}
&--parallax {
z-index: 1;
padding: px-to-rem(640) px-to-rem(8) px-to-rem(80);
padding: px-to-rem(2000) px-to-rem(8) px-to-rem(32);

@include respond-to(lg) {
padding: px-to-rem(640) px-to-rem(96) px-to-rem(80);
@include respond-to('450px') {
padding: px-to-rem(1200) px-to-rem(32) px-to-rem(80);
}
@include respond-to(sm) {
padding: px-to-rem(1000) px-to-rem(32) px-to-rem(80);
}
@include respond-to(md) {
padding: px-to-rem(640) px-to-rem(96) px-to-rem(80);
padding: px-to-rem(900) px-to-rem(32) px-to-rem(80);
}
@include respond-to(sm) {
padding: px-to-rem(1200) px-to-rem(48) px-to-rem(80);
@include respond-to(lg) {
padding: px-to-rem(580) px-to-rem(96) px-to-rem(80);
}

// For Whom Hates Animations (Reduced Motion)
@media (prefers-reduced-motion: reduce) {
padding: px-to-rem(64) px-to-rem(64) px-to-rem(32);
}
}
&--no-padding {
margin-right: px-to-rem(-16);
margin-left: px-to-rem(-16);
}
}

.pinned-image {
margin-top: px-to-rem(48);
}
.feature {
position: relative;
display: flex;
Expand Down

0 comments on commit 2addce9

Please sign in to comment.