Skip to content

Commit

Permalink
📱 Feat: Work on Animation on Responsive Mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirzenoozi
amirzenoozi committed May 29, 2024
1 parent 1dc9456 commit c9c9763
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 38 deletions.
185 changes: 147 additions & 38 deletions src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ function Home () {
const featureTimeLine = gsap.timeline()
const descriptionTimeLine = gsap.timeline()
const deviceTimeline = gsap.timeline()
const matchMedia = gsap.matchMedia()
const features: FeatureInterface[] = [
{
image: '/assets/4K144.svg',
Expand Down Expand Up @@ -54,52 +55,160 @@ function Home () {

useGSAP(() => {
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
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
})
})

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
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_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
})
})
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',
start: 'bottom 35%',
endTrigger: '.section--red',
end: 'top bottom',
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,
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
matchMedia.add('(min-width: 992px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 75%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 75%',
endTrigger: '.section--red',
end: 'top bottom',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
ScrollTrigger.create({
animation: descriptionTimeLine,
trigger: '.section--blue',
start: 'bottom 25%',
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
matchMedia.add('(min-width: 992px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 768px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
matchMedia.add('(min-width: 576px)', () => {
ScrollTrigger.create({
animation: deviceTimeline,
trigger: '.section--blue',
start: 'bottom 50%',
endTrigger: '.section--red',
end: 'top 80%',
scrub: true,
markers: false
})
})
}, { scope: main })

Expand Down
9 changes: 9 additions & 0 deletions src/pages/home/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,15 @@
&--parallax {
z-index: 1;

@include respond-to(lg) {
padding: px-to-rem(640) px-to-rem(96) px-to-rem(80);
}
@include respond-to(md) {
padding: px-to-rem(640) px-to-rem(96) px-to-rem(80);
}
@include respond-to(sm) {
padding: px-to-rem(1200) px-to-rem(48) px-to-rem(80);
}
}
}

Expand All @@ -76,6 +82,9 @@
@include respond-to(md) {
padding: px-to-rem(4) px-to-rem(48);
}
@include respond-to(sm) {
padding: px-to-rem(4) px-to-rem(12);
}

figure {
font-size: 0;
Expand Down

0 comments on commit c9c9763

Please sign in to comment.