Animate hero screens (#529)

Author: yelyzavetakhokhlova

Diff for: gatsby-browser.ts

@@ -30,3 +30,7 @@ exports.shouldUpdateScroll = ({
 
   return true;
 };
+
+exports.onPreRouteUpdate = ({ prevLocation }) => {
+  window.prevLocation = prevLocation;
+};

Diff for: src/components/AnimatedHeader/AnimatedHeader.tsx

@@ -1,31 +1,35 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { createElement, FC, PropsWithChildren } from 'react';
 import { motion, Transition } from 'framer-motion';
 import { useInView } from '@app/hooks/useInView';
 import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
 import { easeInOutTransition, opacityScaleAnimationProps } from '@app/utils';
 
 interface AnimatedHeaderProps {
   transition?: Transition;
+  delay?: number;
+  headerLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   className?: string;
   isAnimationEnabled?: boolean;
 }
 
 export const AnimatedHeader: FC<PropsWithChildren<AnimatedHeaderProps>> = ({
-  children,
   transition = easeInOutTransition,
+  delay,
+  headerLevel = 2,
   className,
   isAnimationEnabled = true,
+  children,
 }) => {
-  const [titleRef, isTitleInView] = useInView({ once: true });
+  const [titleRef, isTitleInView] = useInView();
 
   const getAnimation = useMotionEnterAnimation(
     { ...opacityScaleAnimationProps, transition },
     isAnimationEnabled,
   );
 
-  return (
-    <motion.h2 className={className} ref={titleRef} {...getAnimation({ inView: isTitleInView })}>
-      {children}
-    </motion.h2>
+  return createElement(
+    motion[`h${headerLevel}`],
+    { className, ref: titleRef, ...getAnimation({ inView: isTitleInView, delay }) },
+    children,
   );
 };

Diff for: src/components/AnimatedList/AnimatedList.tsx

@@ -3,8 +3,9 @@ import { motion } from 'framer-motion';
 import classNames from 'classnames';
 import {
   createBemBlockBuilder,
+  defaultSpringTransition,
   easeInOutOpacityScaleAnimationProps,
-  getSpringTransition,
+  getEaseInOutTransition,
   LIST_ANIMATION_DELAY,
   opacityScaleAnimationProps,
 } from '@app/utils';
@@ -41,10 +42,7 @@ const cardAnimationProps = {
     opacity: 1,
     x: 0,
   },
-  transition: {
-    ease: 'easeInOut',
-    duration: 0.7,
-  },
+  ...getEaseInOutTransition(0.7),
 };
 
 export const AnimatedList: FC<AnimatedListProps> = ({
@@ -65,20 +63,17 @@ export const AnimatedList: FC<AnimatedListProps> = ({
   const getCardAnimation = useMotionEnterAnimation(cardAnimationProps);
   const getButtonsAnimation = useMotionEnterAnimation({
     ...opacityScaleAnimationProps,
-    ...getSpringTransition(400, 30),
+    ...defaultSpringTransition,
   });
   const getImageAnimation = useMotionEnterAnimation({
     ...opacityScaleAnimationProps,
-    transition: {
-      ease: 'easeInOut',
-      duration: 1,
-    },
+    ...getEaseInOutTransition(1),
   });
 
   return (
     <section ref={ref} className={classNames(getBlocksWith(), 'container')}>
       <div>
-        <AnimatedHeader transition={getSpringTransition(400, 30)}>{title}</AnimatedHeader>
+        <AnimatedHeader transition={defaultSpringTransition}>{title}</AnimatedHeader>
         <motion.h3 {...getSubtitleAnimation({ delay: 0.1, inView })}>{subtitle}</motion.h3>
       </div>
       <div className={getBlocksWith('__content')}>

Diff for: src/components/ArticlePreview/ArticlePreview.tsx

@@ -1,22 +1,39 @@
 import React, { FC } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { createBemBlockBuilder, BlogPostDto } from '@app/utils';
+import chunk from 'lodash/chunk';
+import { useMediaQuery } from 'react-responsive';
+import { BlogPostDto, MEDIA_DESKTOP_SM, MEDIA_TABLET_SM } from '@app/utils';
 
-import { ArticlePreviewItem } from './ArticlePreviewItem';
+import { ArticlePreviewRow } from './ArticlePreviewRow';
 
 import './ArticlePreview.scss';
 
 interface ArticlePreviewProps {
   posts: BlogPostDto[];
 }
 
-const getBlocksWith = createBemBlockBuilder(['article-preview-list']);
+const getItemsPerRow = (isDesktop: boolean, isTablet: boolean) => {
+  if (isDesktop) {
+    return 3;
+  }
 
-export const ArticlePreview: FC<ArticlePreviewProps> = ({ posts }) =>
-  !isEmpty(posts) ? (
-    <ul className={getBlocksWith()}>
-      {posts.map(post => (
-        <ArticlePreviewItem key={post.id} post={post} />
+  if (isTablet) {
+    return 2;
+  }
+
+  return 1;
+};
+
+export const ArticlePreview: FC<ArticlePreviewProps> = ({ posts }) => {
+  const isDesktop = useMediaQuery({ query: MEDIA_DESKTOP_SM });
+  const isTablet = useMediaQuery({ query: MEDIA_TABLET_SM });
+  const rows = chunk(posts, getItemsPerRow(isDesktop, isTablet));
+
+  return !isEmpty(posts) ? (
+    <ul>
+      {rows.map((row, rowIndex) => (
+        <ArticlePreviewRow key={rowIndex} row={row} />
       ))}
     </ul>
   ) : null;
+};

Diff for: src/components/ArticlePreview/ArticlePreviewRow/ArticlePreviewRow.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { motion } from 'framer-motion';
+import {
+  BlogPostDto,
+  createBemBlockBuilder,
+  getEaseInOutTransition,
+  opacityScaleAnimationProps,
+} from '@app/utils';
+import { useInView } from '@app/hooks/useInView';
+import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
+
+import { ArticlePreviewItem } from '../ArticlePreviewItem';
+
+interface ArticlePreviewRowProps {
+  row: BlogPostDto[];
+}
+
+const getBlocksWith = createBemBlockBuilder(['article-preview-list']);
+
+export const ArticlePreviewRow: FC<ArticlePreviewRowProps> = ({ row }) => {
+  const [rowRef, isInView] = useInView();
+  const getAnimation = useMotionEnterAnimation({
+    ...opacityScaleAnimationProps,
+    ...getEaseInOutTransition(0.7),
+  });
+
+  return (
+    <motion.div
+      ref={rowRef}
+      className={getBlocksWith()}
+      {...getAnimation({
+        inView: isInView,
+        additionalEffects: {
+          hiddenAdditional: {
+            y: 150,
+          },
+          enterAdditional: {
+            y: 0,
+          },
+        },
+      })}
+    >
+      {row.map(post => (
+        <ArticlePreviewItem key={post.id} post={post} />
+      ))}
+    </motion.div>
+  );
+};

Diff for: src/components/ArticlePreview/ArticlePreviewRow/index.ts

@@ -0,0 +1 @@
+export * from './ArticlePreviewRow';

Diff for: src/components/HeroSwitching/HeroSwitching.tsx

@@ -1,6 +1,13 @@
 import React, { FC, ReactNode } from 'react';
+import { motion } from 'framer-motion';
 import { ButtonSwitcher, ButtonSwitcherProps } from '@app/components/ButtonSwitcher';
-import { createBemBlockBuilder } from '@app/utils';
+import {
+  createBemBlockBuilder,
+  defaultSpringTransition,
+  opacityScaleAnimationProps,
+} from '@app/utils';
+import { AnimatedHeader } from '@app/components/AnimatedHeader';
+import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
 
 import './HeroSwitching.scss';
 
@@ -10,6 +17,8 @@ interface HeroSwitchingProps {
   buttons: ButtonSwitcherProps['buttons'];
   switchActiveBtn?: (text: string) => void;
   subtitle?: string;
+  isHeroInView?: boolean;
+  isAnimationEnabled?: boolean;
   children?: ReactNode;
 }
 
@@ -21,14 +30,43 @@ export const HeroSwitching: FC<HeroSwitchingProps> = ({
   buttons,
   activeButton,
   switchActiveBtn,
+  isHeroInView = true,
+  isAnimationEnabled = true,
   children,
-}) => (
-  <>
-    <h1 className={getBlocksWith('__title')}>{title}</h1>
-    {subtitle && <p className={getBlocksWith('__subtitle')}>{subtitle}</p>}
-    {children}
-    <div className={getBlocksWith('__btn-box')}>
-      <ButtonSwitcher buttons={buttons} activeBtnName={activeButton} onSwitch={switchActiveBtn} />
-    </div>
-  </>
-);
+}) => {
+  const getSubtitleAnimation = useMotionEnterAnimation(
+    {
+      ...opacityScaleAnimationProps,
+      ...defaultSpringTransition,
+    },
+    isAnimationEnabled,
+  );
+
+  return (
+    <>
+      <AnimatedHeader
+        headerLevel={1}
+        transition={defaultSpringTransition}
+        className={getBlocksWith('__title')}
+        isAnimationEnabled={isAnimationEnabled}
+      >
+        {title}
+      </AnimatedHeader>
+      {subtitle && (
+        <motion.p
+          className={getBlocksWith('__subtitle')}
+          {...getSubtitleAnimation({ delay: 0.1, inView: isHeroInView })}
+        >
+          {subtitle}
+        </motion.p>
+      )}
+      {children}
+      <motion.div
+        className={getBlocksWith('__btn-box')}
+        {...getSubtitleAnimation({ delay: 0.2, inView: isHeroInView })}
+      >
+        <ButtonSwitcher buttons={buttons} activeBtnName={activeButton} onSwitch={switchActiveBtn} />
+      </motion.div>
+    </>
+  );
+};

Diff for: src/components/OfferPageWrapper/OfferPageWrapper.tsx

@@ -1,6 +1,12 @@
 import React, { FC } from 'react';
+import { motion } from 'framer-motion';
 import classNames from 'classnames';
-import { createBemBlockBuilder, FormattedComparePlansDto, OfferingPlansDto } from '@app/utils';
+import {
+  createBemBlockBuilder,
+  easeInOutOpacityScaleAnimationProps,
+  FormattedComparePlansDto,
+  OfferingPlansDto,
+} from '@app/utils';
 import { usePricingHeroProps } from '@app/hooks/usePricingHeroProps';
 import { FooterContent } from '@app/components/Layout';
 import { TrustedOrganizations } from '@app/components/TrustedOrganizations';
@@ -10,9 +16,12 @@ import { PricingHero } from '@app/components/PricingHero';
 import { ComparePlans } from '@app/components/ComparePlans';
 import { Faq } from '@app/components/Faq';
 import InfoIcon from '@app/svg/infoIcon.inline.svg';
+import { useInView } from '@app/hooks/useInView';
+import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
+import { useAnimationEnabledForSiblingRoutes } from '@app/hooks/useAnimationEnabledForSiblingRoutes';
 
-import { TimeScale } from './TimeScale';
 import { PentagonCard } from './PentagonCard';
+import { TimeScale } from './TimeScale';
 
 import './OfferPageWrapper.scss';
 
@@ -60,9 +69,16 @@ export const OfferPageWrapper: FC<OfferPageWrapperProps> = ({
   isAccelerator = false,
 }) => {
   const { buttons, isDiscount, toggleDiscount } = usePricingHeroProps(page);
+  const [cardsRef, areCardsInView] = useInView();
+  const isAnimationEnabled = useAnimationEnabledForSiblingRoutes();
 
   const discount = isDiscount ? 'yearly' : 'quarterly';
 
+  const getCardsAnimation = useMotionEnterAnimation(
+    easeInOutOpacityScaleAnimationProps,
+    isAnimationEnabled,
+  );
+
   return (
     <>
       <PricingHero
@@ -78,8 +94,24 @@ export const OfferPageWrapper: FC<OfferPageWrapperProps> = ({
           messageInactive: 'Quarterly',
           messageActive: 'Yearly (Save 5%)',
         }}
+        isAnimationEnabled={isAnimationEnabled}
       />
-      <div className={getBlocksWith('__pentagons')}>
+      <motion.div
+        className={getBlocksWith('__pentagons')}
+        ref={cardsRef}
+        {...getCardsAnimation({
+          inView: areCardsInView,
+          delay: 0.6,
+          additionalEffects: {
+            hiddenAdditional: {
+              y: 50,
+            },
+            enterAdditional: {
+              y: 0,
+            },
+          },
+        })}
+      >
         {plans.items.map((plan, index) => {
           const pricingValue = plan.price?.[discount];
           const href = plan.cta.link.url;
@@ -95,7 +127,7 @@ export const OfferPageWrapper: FC<OfferPageWrapperProps> = ({
             />
           );
         })}
-      </div>
+      </motion.div>
       <div className={getBlocksWith('__utilization')}>
         <h2>Indicative Professional Service Point utilization</h2>
         <div className={getBlocksWith('__utilization-subtitle')}>{utilizationDescription}</div>

Diff for: src/components/OfferPageWrapper/TimeScale/TimeScale.tsx

@@ -6,8 +6,8 @@ import './TimeScale.scss';
 
 interface TimeScaleProps {
   data: {
-    items: string[];
-    time: string;
+    items: string[] | React.ReactNode[];
+    time: string | number;
   }[];
   isShifted?: boolean;
 }