3rd barbajs stream

finsweet · Mar 10, 2023 · 6b6a510 · 6b6a510
1 parent 3e3df46
commit 6b6a510
Showing 1 changed file with 102 additions and 56 deletions.
diff --git a/packages/barbajs/src/index.ts b/packages/barbajs/src/index.ts
@@ -1,4 +1,4 @@
-import barba from '@barba/core';
+import barba, { ITransitionData } from '@barba/core';
 import { restartWebflow } from '@finsweet/ts-utils';
 import { gsap } from 'gsap';
 import { Flip } from 'gsap/Flip';
@@ -41,34 +41,7 @@ barba.init({
       },
       sync: true,
       async enter(data) {
-        console.log('contact: enter');
-
-        data.next.container.classList.add('is-transitioning');
-
-        const currentH1 = data.current.container.querySelector('h1') as HTMLHeadingElement;
-        const nextH1 = data.next.container.querySelector('h1') as HTMLHeadingElement;
-
-        const currentLogo = data.current.container.querySelector(
-          '[data-element="logo"]'
-        ) as HTMLElement;
-        const nextLogo = data.next.container.querySelector('[data-element="logo"]') as HTMLElement;
-
-        const currentLogoParent = currentLogo.parentNode as HTMLElement;
-        const nextLogoParent = nextLogo.parentNode as HTMLElement;
-
-        const state = Flip.getState(currentLogo);
-
-        currentLogoParent.style.height = `${currentLogo.offsetHeight}px`;
-        nextLogo.remove();
-        nextLogoParent.appendChild(currentLogo);
-
-        await Promise.all([
-          Flip.from(state, { duration: 0.5 }),
-          gsap.to(currentH1, { opacity: 0, duration: 0.5 }),
-          gsap.from(nextH1, { opacity: 1, duration: 0.5 }),
-        ]);
-
-        data.next.container.classList.remove('is-transitioning');
+        await contactTransition(data);
       },
     },
     {
@@ -77,34 +50,36 @@ barba.init({
         namespace: ['contact'],
       },
       sync: true,
-      async leave(data) {
-        console.log('contact: leave');
-
-        data.next.container.classList.add('is-transitioning');
 
-        const currentH1 = data.current.container.querySelector('h1') as HTMLHeadingElement;
-        const nextH1 = data.next.container.querySelector('h1') as HTMLHeadingElement;
-
-        const currentLogo = data.current.container.querySelector(
-          '[data-element="logo"]'
-        ) as HTMLElement;
-        const nextLogo = data.next.container.querySelector('[data-element="logo"]') as HTMLElement;
-        const currentLogoParent = currentLogo.parentNode as HTMLElement;
-        const nextLogoParent = nextLogo.parentNode as HTMLElement;
-
-        const state = Flip.getState(currentLogo);
+      async leave(data) {
+        await contactTransition(data);
+      },
+    },
 
-        currentLogoParent.style.height = `${currentLogo.offsetHeight}px`;
-        nextLogo.remove();
-        nextLogoParent.appendChild(currentLogo);
+    {
+      name: 'pricing',
+      to: {
+        namespace: ['pricing'],
+      },
+      async leave(data) {
+        await pricingLeaveTransition(data);
+      },
 
-        await Promise.all([
-          Flip.from(state, { duration: 0.5 }),
-          gsap.to(currentH1, { opacity: 0, duration: 0.5 }),
-          gsap.from(nextH1, { opacity: 1, duration: 0.5 }),
-        ]);
+      async enter(data) {
+        await pricingEnterTransition(data);
+      },
+    },
+    {
+      name: 'pricing',
+      from: {
+        namespace: ['pricing'],
+      },
+      async leave(data) {
+        await pricingLeaveTransition(data);
+      },
 
-        data.next.container.classList.remove('is-transitioning');
+      async enter(data) {
+        await pricingEnterTransition(data);
       },
     },
   ],
@@ -134,6 +109,77 @@ barba.hooks.after(async (data) => {
   await restartWebflow();
 });
 
-function swap(a: HTMLElement, b: HTMLElement) {
-  a.parentNode?.children[0] === a ? a.parentNode.appendChild(a) : a.parentNode?.appendChild(b);
-}
+const contactTransition = async (data: ITransitionData) => {
+  console.log('contact: enter');
+
+  data.next.container.classList.add('is-transitioning');
+
+  const currentH1 = data.current.container.querySelector('h1') as HTMLHeadingElement;
+  const nextH1 = data.next.container.querySelector('h1') as HTMLHeadingElement;
+
+  const currentLogo = data.current.container.querySelector('[data-element="logo"]') as HTMLElement;
+  const nextLogo = data.next.container.querySelector('[data-element="logo"]') as HTMLElement;
+
+  const currentLogoParent = currentLogo.parentNode as HTMLElement;
+  const nextLogoParent = nextLogo.parentNode as HTMLElement;
+
+  const state = Flip.getState(currentLogo);
+
+  currentLogoParent.style.height = `${currentLogo.offsetHeight}px`;
+  nextLogo.remove();
+  nextLogoParent.appendChild(currentLogo);
+
+  await Promise.all([
+    Flip.from(state, { duration: 0.5 }),
+    gsap.to(currentH1, { opacity: 0, duration: 0.5 }),
+    gsap.from(nextH1, { opacity: 1, duration: 0.5 }),
+  ]);
+
+  data.next.container.classList.remove('is-transitioning');
+};
+
+const pricingLeaveTransition = async (data: ITransitionData) => {
+  data.next.container.classList.add('is-transitioning');
+
+  const currentCircle = data.current.container.querySelector(
+    `[data-element="${data.current.namespace}-circle"]`
+  ) as HTMLElement;
+
+  currentCircle.style.display = 'block';
+
+  await gsap.to(currentCircle, {
+    width: '200vw',
+    height: '200vw',
+    duration: 1,
+    ease: 'power4',
+  });
+};
+
+const pricingEnterTransition = async (data: ITransitionData) => {
+  const currentCircle = data.current.container.querySelector(
+    `[data-element="${data.current.namespace}-circle"]`
+  ) as HTMLElement;
+
+  const nextCircle = data.next.container.querySelector(
+    `[data-element="${data.next.namespace}-circle"]`
+  ) as HTMLElement;
+
+  nextCircle.style.width = '200vw';
+  nextCircle.style.height = '200vw';
+
+  currentCircle.style.display = 'none';
+  nextCircle.style.display = 'block';
+
+  data.current.container.style.display = 'none';
+
+  await gsap.to(nextCircle, {
+    width: '0',
+    height: '0',
+    duration: 1,
+    ease: 'power4',
+  });
+
+  nextCircle.style.display = 'none';
+
+  data.next.container.classList.remove('is-transitioning');
+};