diff --git a/src/components/HomeIndex/index.tsx b/src/components/HomeIndex/index.tsx index 27c0182..9a196ca 100644 --- a/src/components/HomeIndex/index.tsx +++ b/src/components/HomeIndex/index.tsx @@ -6,233 +6,236 @@ import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx' const HomeIndex: React.FC = () => { useEffect(() => { document.body.classList.add('body') - if (!CSS.supports('animation-timeline: scroll()')) { - // const SPAN = 'max(45vw, 260px)'; - const CONFIG = [ - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) * -1 + setTimeout(() => { + if (!CSS.supports('animation-timeline: scroll()')) { + // const SPAN = 'max(45vw, 260px)'; + const CONFIG = [ + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) * -1 + }, + y: -10, + r: -8, + h: 160, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(320, width * 0.55) + }, }, - y: -10, - r: -8, - h: 160, - w: (el: any) => { - let width = el.parentNode.clientWidth - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(320, width * 0.55) + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) + }, + y: -50, + r: 15, + h: 360, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(220, width * 0.3) + }, }, - }, - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) * -1 + }, + y: -30, + r: 6, + h: 300, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(330, width * 0.55) + }, }, - y: -50, - r: 15, - h: 360, - w: (el: any) => { - let width = el.parentNode.clientWidth - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(220, width * 0.3) + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) + }, + y: -30, + r: -5, + h: 400, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(305, width * 0.45) + }, }, - }, - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) * -1 + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) * -1 + }, + y: -45, + r: -20, + h: 525, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(160, width * 0.3) + }, }, - y: -30, - r: 6, - h: 300, - w: (el: any) => { - let width = el.parentNode.clientWidth - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(330, width * 0.55) + { + x: () => { + return Math.max(260, window.innerWidth * 0.45) + }, + y: 10, + r: 10, + h: 160, + w: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(320, width * 0.55) + }, }, - }, + ] - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) - }, - y: -30, - r: -5, - h: 400, - w: (el: any) => { - let width = el.parentNode.clientWidth + gsap.registerPlugin(ScrollTrigger) + console.info('gsap: ScrollTrigger registered') - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(305, width * 0.45) - }, - }, + gsap.set('.hero', { position: 'absolute' }) - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) * -1 - }, - y: -45, - r: -20, - h: 525, - w: (el: any) => { - let width = el.parentNode.clientWidth + const cards = document.querySelectorAll('.card') - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(160, width * 0.3) - }, - }, + for (const [index, card] of [...cards].entries()) { + if (CONFIG[index]) { + gsap.from(card, { + x: CONFIG[index].x, + yPercent: CONFIG[index].y, + height: `${CONFIG[index].h}%`, + rotate: CONFIG[index].r, + width: CONFIG[index].w, + scrollTrigger: { + trigger: '.scroller', + start: 'top bottom', + end: 'top 50%', + scrub: true, + }, + }) + } + } - { - x: () => { - return Math.max(260, window.innerWidth * 0.45) - }, - y: 10, - r: 10, - h: 160, - w: (el: any) => { - let width = el.parentNode.clientWidth + gsap.from( + [ + '.card__content', + '.card--two .card__column:last-of-type', + '.card--three .card__column:last-of-type', + '.card--five .card__column:last-of-type', + ], - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(320, width * 0.55) - }, - }, - ] - - gsap.registerPlugin(ScrollTrigger) - console.info('gsap: ScrollTrigger registered') - - gsap.set('.hero', { position: 'absolute' }) - - const cards = document.querySelectorAll('.card') - - for (const [index, card] of [...cards].entries()) { - if (CONFIG[index]) { - gsap.from(card, { - x: CONFIG[index].x, - yPercent: CONFIG[index].y, - height: `${CONFIG[index].h}%`, - rotate: CONFIG[index].r, - width: CONFIG[index].w, + { + y: '-100cqh', scrollTrigger: { trigger: '.scroller', - start: 'top bottom', - end: 'top 50%', + start: 'top 80%', + end: 'top top', scrub: true, }, - }) - } - } + }, + ) - gsap.from( - [ - '.card__content', - '.card--two .card__column:last-of-type', - '.card--three .card__column:last-of-type', - '.card--five .card__column:last-of-type', - ], + gsap.from(['.card__avatar img', '.password svg'], { + opacity: 0, + scrollTrigger: { + trigger: '.scroller', + start: 'top 50%', + end: 'top top', + scrub: true, + }, + }) - { - y: '-100cqh', + gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], { + width: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return width * 0.26 + }, scrollTrigger: { trigger: '.scroller', start: 'top 80%', end: 'top top', scrub: true, }, - }, - ) + }) - gsap.from(['.card__avatar img', '.password svg'], { - opacity: 0, - scrollTrigger: { - trigger: '.scroller', - start: 'top 50%', - end: 'top top', - scrub: true, - }, - }) + gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], { + scale: 2, + scrollTrigger: { + trigger: '.scroller', + start: 'top bottom', + end: 'top top', + scrub: true, + }, + }) - gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], { - width: (el: any) => { - let width = el.parentNode.clientWidth + gsap.from('.card--two .card__avatar', { + width: (el: any) => { + let width = el.parentNode.clientWidth - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return width * 0.26 - }, - scrollTrigger: { - trigger: '.scroller', - start: 'top 80%', - end: 'top top', - scrub: true, - }, - }) + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(330, width * 0.55) - 32 + }, + borderRadius: '12px', + height: 'calc(300cqh - 2rem)', + scrollTrigger: { + trigger: '.scroller', + start: 'top bottom', + end: 'top 20%', + scrub: true, + }, + }) - gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], { - scale: 2, - scrollTrigger: { - trigger: '.scroller', - start: 'top bottom', - end: 'top top', - scrub: true, - }, - }) + gsap.from('.card--six .card__column:last-of-type .card__company', { + width: 120, + x: '-1rem', + scrollTrigger: { + trigger: '.scroller', + start: 'top bottom', + end: 'top 20%', + scrub: true, + }, + }) - gsap.from('.card--two .card__avatar', { - width: (el: any) => { - let width = el.parentNode.clientWidth + gsap.from('.cta', { + scale: 1, + scrollTrigger: { + trigger: '.scroller', + start: 'top bottom', + end: 'top 20%', + scrub: true, + }, + }) + } + }, 1000) - if (width < el.parentNode.scrollWidth) { - width = el.parentNode.scrollWidth - } - return Math.max(330, width * 0.55) - 32 - }, - borderRadius: '12px', - height: 'calc(300cqh - 2rem)', - scrollTrigger: { - trigger: '.scroller', - start: 'top bottom', - end: 'top 20%', - scrub: true, - }, - }) - - gsap.from('.card--six .card__column:last-of-type .card__company', { - width: 120, - x: '-1rem', - scrollTrigger: { - trigger: '.scroller', - start: 'top bottom', - end: 'top 20%', - scrub: true, - }, - }) - - gsap.from('.cta', { - scale: 1, - scrollTrigger: { - trigger: '.scroller', - start: 'top bottom', - end: 'top 20%', - scrub: true, - }, - }) - } return () => { document.body.classList.remove('body') }