Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: framer-motion bundle reduction #111

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore: framer-motion bundle reduction #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ddc44d
chore: framer-motion bundle reduction
Den-Bratchikov Dec 9, 2022
f178bc7
fix: add minir fix
Den-Bratchikov Dec 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions src/components/pages/services-web-design/in-house-team/in-house-team.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useAnimation, motion } from 'framer-motion';
import { useAnimation, m, LazyMotion, domAnimation } from 'framer-motion';
import React, { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { useRive, Layout, Fit, Alignment } from 'rive-react';
Expand Down Expand Up @@ -56,21 +56,23 @@ const InHouseTeam = () => {
<section className="safe-paddings bg-black pt-32 lg:pt-24 md:pt-20 sm:pt-14" ref={wrapperRef}>
<div className="container grid-gap-x grid grid-cols-12 items-center md:block">
<div className="col-span-6 text-white" ref={contentRef}>
<TitleAnimation
tag="h2"
className="max-w-[520px] text-6xl font-normal leading-snug lg:max-w-[400px] lg:text-[42px] md:max-w-none md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
<motion.p
className="mt-5 max-w-[520px] text-lg md:mt-3 md:max-w-none sm:mt-2.5 sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
With years of experience supplying visuals for tech companies' marketing platforms.
</motion.p>
<LazyMotion features={domAnimation}>
<TitleAnimation
tag="h2"
className="max-w-[520px] text-6xl font-normal leading-snug lg:max-w-[400px] lg:text-[42px] md:max-w-none md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
<m.p
className="mt-5 max-w-[520px] text-lg md:mt-3 md:max-w-none sm:mt-2.5 sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
With years of experience supplying visuals for tech companies' marketing platforms.
</m.p>
</LazyMotion>
</div>
<div
className="relative col-span-6 flex items-center justify-center md:mx-auto md:mt-11 md:max-w-[590px] sm:mt-8"
Expand Down
36 changes: 19 additions & 17 deletions src/components/pages/services-web-development/code-quality/code-quality.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useAnimation, motion } from 'framer-motion';
import { useAnimation, m, LazyMotion, domAnimation } from 'framer-motion';
import React, { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { useRive, Layout, Fit, Alignment } from 'rive-react';
Expand Down Expand Up @@ -46,22 +46,24 @@ const CodeQuality = () => {
<section className="safe-paddings bg-black py-80 lg:py-56 md:py-40 sm:py-24" ref={wrapperRef}>
<div className="container grid-gap-x grid grid-cols-12 items-center md:block">
<div className="col-span-6 text-white" ref={contentRef}>
<TitleAnimation
tag="h2"
className="max-w-[520px] text-6xl font-normal leading-snug lg:max-w-[420px] lg:text-[42px] md:max-w-[490px] md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
<motion.p
className="mt-5 max-w-[520px] text-lg md:mt-3 md:max-w-[490px] sm:mt-2.5 sm:max-w-none sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
A lean and maintainable code base as a guaranteed part of Pixel Point front-end
development services.
</motion.p>
<LazyMotion features={domAnimation}>
<TitleAnimation
tag="h2"
className="max-w-[520px] text-6xl font-normal leading-snug lg:max-w-[420px] lg:text-[42px] md:max-w-[490px] md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
<m.p
className="mt-5 max-w-[520px] text-lg md:mt-3 md:max-w-[490px] sm:mt-2.5 sm:max-w-none sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
A lean and maintainable code base as a guaranteed part of Pixel Point front-end
development services.
</m.p>
</LazyMotion>
</div>
<div
className="relative col-span-6 flex items-center justify-center md:mx-auto md:mt-11 md:max-w-[590px] sm:mt-8"
Expand Down
146 changes: 74 additions & 72 deletions src/components/pages/services-web-development/frameworks/frameworks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useAnimation, motion } from 'framer-motion';
import { useAnimation, m, LazyMotion, domAnimation } from 'framer-motion';
import React, { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

Expand Down Expand Up @@ -76,80 +76,82 @@ const Frameworks = () => {
return (
<section className="safe-paddings bg-black pt-52 text-white lg:pt-18 sm:pt-11">
<div className="container grid-gap-x grid grid-cols-2 items-center md:block">
<div ref={contentRef}>
<TitleAnimation
tag="h2"
className="text-6xl font-normal leading-snug lg:text-[42px] md:max-w-[470px] md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
<motion.p
className="mt-5 max-w-[410px] text-lg md:mt-3 md:max-w-[470px] sm:mt-2.5 sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
Always ready to jump on a project quickly with our custom inclusive{' '}
<Link
to={LINKS.gatsbyStarter}
theme="underline-red"
target="_blank"
rel="noopener noreferrer"
>
GatsbyJS
</Link>{' '}
&{' '}
<Link
to={LINKS.nextjsStarter}
theme="underline-red"
target="_blank"
rel="noopener noreferrer"
>
NextJS
</Link>{' '}
starters.
</motion.p>
</div>
<motion.div
className="md:mx-auto md:mt-11 md:max-w-[590px] sm:mt-8 sm:block sm:space-y-4"
initial="initial"
animate={itemsWrapperControls}
variants={itemsWrapperVariants}
ref={itemsWrapperRef}
>
<motion.div
className="relative flex min-h-[224px] items-center justify-between overflow-hidden rounded-2xl pl-10 pr-6 lg:min-h-[168px] lg:rounded-xl lg:pl-7 md:min-h-[140px] md:py-8 md:px-4 md:pl-12 md:pr-7 sm:flex sm:flex-col sm:items-start sm:justify-between sm:p-5"
variants={itemVariants}
style={{ background: 'linear-gradient(261.85deg, #773399 19.08%, #402060 81.57%)' }}
>
<GatsbyLogo className="relative z-10 h-14 lg:h-10 sm:h-8" aria-hidden />
<span className="sr-only">Gatsby</span>
<p className="relative z-10 max-w-[256px] text-lg lg:max-w-[190px] lg:text-base md:max-w-[256px] sm:max-w-none">
Best for building SEO-friendly, high-performing marketing websites
</p>
<img
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
src={gatsbyBackground}
alt=""
loading="lazy"
aria-hidden
<LazyMotion features={domAnimation}>
<div ref={contentRef}>
<TitleAnimation
tag="h2"
className="text-6xl font-normal leading-snug lg:text-[42px] md:max-w-[470px] md:text-4xl sm:text-2xl"
items={titleItems}
animationName="second"
controls={titleControls}
/>
</motion.div>
<div className="mt-8 flex space-x-8 lg:mt-7 lg:space-x-7 md:mt-5 md:space-x-5 sm:block sm:space-x-0 sm:space-y-4">
{items.map(({ logo: Logo, name, description }, index) => (
<motion.div
className="flex min-h-[224px] w-1/2 flex-col items-start justify-between rounded-2xl bg-gray-9 px-6 pt-4 pb-5 lg:min-h-[168px] lg:rounded-xl lg:px-5 lg:pt-3 md:min-h-[140px] sm:w-full"
variants={itemVariants}
key={index}
<m.p
className="mt-5 max-w-[410px] text-lg md:mt-3 md:max-w-[470px] sm:mt-2.5 sm:text-base"
initial="initial"
animate={descriptionControls}
variants={descriptionVariants}
>
Always ready to jump on a project quickly with our custom inclusive{' '}
<Link
to={LINKS.gatsbyStarter}
theme="underline-red"
target="_blank"
rel="noopener noreferrer"
>
GatsbyJS
</Link>{' '}
&{' '}
<Link
to={LINKS.nextjsStarter}
theme="underline-red"
target="_blank"
rel="noopener noreferrer"
>
<Logo className="h-14 lg:h-11" aria-hidden />
<span className="sr-only">{name}</span>
<p className="text-base lg:text-sm">{description}</p>
</motion.div>
))}
NextJS
</Link>{' '}
starters.
</m.p>
</div>
</motion.div>
<m.div
className="md:mx-auto md:mt-11 md:max-w-[590px] sm:mt-8 sm:block sm:space-y-4"
initial="initial"
animate={itemsWrapperControls}
variants={itemsWrapperVariants}
ref={itemsWrapperRef}
>
<m.div
className="relative flex min-h-[224px] items-center justify-between overflow-hidden rounded-2xl pl-10 pr-6 lg:min-h-[168px] lg:rounded-xl lg:pl-7 md:min-h-[140px] md:py-8 md:px-4 md:pl-12 md:pr-7 sm:flex sm:flex-col sm:items-start sm:justify-between sm:p-5"
variants={itemVariants}
style={{ background: 'linear-gradient(261.85deg, #773399 19.08%, #402060 81.57%)' }}
>
<GatsbyLogo className="relative z-10 h-14 lg:h-10 sm:h-8" aria-hidden />
<span className="sr-only">Gatsby</span>
<p className="relative z-10 max-w-[256px] text-lg lg:max-w-[190px] lg:text-base md:max-w-[256px] sm:max-w-none">
Best for building SEO-friendly, high-performing marketing websites
</p>
<img
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
src={gatsbyBackground}
alt=""
loading="lazy"
aria-hidden
/>
</m.div>
<div className="mt-8 flex space-x-8 lg:mt-7 lg:space-x-7 md:mt-5 md:space-x-5 sm:block sm:space-x-0 sm:space-y-4">
{items.map(({ logo: Logo, name, description }, index) => (
<m.div
className="flex min-h-[224px] w-1/2 flex-col items-start justify-between rounded-2xl bg-gray-9 px-6 pt-4 pb-5 lg:min-h-[168px] lg:rounded-xl lg:px-5 lg:pt-3 md:min-h-[140px] sm:w-full"
variants={itemVariants}
key={index}
>
<Logo className="h-14 lg:h-11" aria-hidden />
<span className="sr-only">{name}</span>
<p className="text-base lg:text-sm">{description}</p>
</m.div>
))}
</div>
</m.div>
</LazyMotion>
</div>
</section>
);
Expand Down
94 changes: 48 additions & 46 deletions src/components/pages/services-web-development/lighthouse/lighthouse.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useAnimation, motion, animate } from 'framer-motion';
import { useAnimation, m, LazyMotion, domAnimation, animate } from 'framer-motion';
import PropTypes from 'prop-types';
import React, { useEffect, useRef } from 'react';
import { useInView } from 'react-intersection-observer';
Expand Down Expand Up @@ -74,52 +74,54 @@ const Lighthouse = () => {
<h2 className="with-text-highlight-red mx-auto max-w-[1008px] text-center text-6xl font-normal leading-snug lg:max-w-[782px] lg:text-[42px] md:text-4xl sm:text-2xl">
Always in the upper <span>Lighthouse</span> threshold to outperform competitors
</h2>
<motion.ul
className="mt-16 flex justify-center space-x-44 lg:mt-14 lg:space-x-32 md:mt-12 md:justify-between md:space-x-0 sm:mt-11 sm:flex-wrap"
initial="initial"
animate={itemsWrapperControls}
ref={itemsWrapperRef}
>
{items.map(({ name, value, circleValue }, index) => (
<li
className={clsx('sm:basis-1/2', (index === 2 || index === 3) && 'sm:mt-11')}
key={index}
>
<div className="relative mx-auto h-36 w-36 lg:h-28 lg:w-28 md:h-24 md:w-24">
<div
className="h-full w-full rounded-full border-[6px] border-green border-opacity-20 lg:border-[5px]"
aria-hidden
/>
<svg
className="absolute top-1/2 left-1/2 h-full w-full"
width="144"
height="144"
viewBox="0 0 144 144"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'scale(1, -1) rotate(-90deg) translate(-50%, -50%)' }}
aria-hidden
>
<motion.path
className="stroke-green"
d="M3.49609 72.0001C3.49609 109.834 34.1664 140.504 72.0001 140.504C109.834 140.504 140.504 109.834 140.504 72.0001C140.504 34.1664 109.834 3.49609 72.0001 3.49609C34.1664 3.49609 3.49609 34.1664 3.49609 72.0001Z"
strokeWidth="6"
strokeLinecap="round"
custom={{ value: circleValue }}
variants={itemCircleVariants}
<LazyMotion features={domAnimation}>
<m.ul
className="mt-16 flex justify-center space-x-44 lg:mt-14 lg:space-x-32 md:mt-12 md:justify-between md:space-x-0 sm:mt-11 sm:flex-wrap"
initial="initial"
animate={itemsWrapperControls}
ref={itemsWrapperRef}
>
{items.map(({ name, value, circleValue }, index) => (
<li
className={clsx('sm:basis-1/2', (index === 2 || index === 3) && 'sm:mt-11')}
key={index}
>
<div className="relative mx-auto h-36 w-36 lg:h-28 lg:w-28 md:h-24 md:w-24">
<div
className="h-full w-full rounded-full border-[6px] border-green border-opacity-20 lg:border-[5px]"
aria-hidden
/>
</svg>
{isItemsWrapperInView && (
<Value
className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-5xl font-normal lg:text-4xl md:text-3xl"
value={value}
/>
)}
</div>
<div className="mt-4 text-center text-lg font-normal">{name}</div>
</li>
))}
</motion.ul>
<svg
className="absolute top-1/2 left-1/2 h-full w-full"
width="144"
height="144"
viewBox="0 0 144 144"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'scale(1, -1) rotate(-90deg) translate(-50%, -50%)' }}
aria-hidden
>
<m.path
className="stroke-green"
d="M3.49609 72.0001C3.49609 109.834 34.1664 140.504 72.0001 140.504C109.834 140.504 140.504 109.834 140.504 72.0001C140.504 34.1664 109.834 3.49609 72.0001 3.49609C34.1664 3.49609 3.49609 34.1664 3.49609 72.0001Z"
strokeWidth="6"
strokeLinecap="round"
custom={{ value: circleValue }}
variants={itemCircleVariants}
/>
</svg>
{isItemsWrapperInView && (
<Value
className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-5xl font-normal lg:text-4xl md:text-3xl"
value={value}
/>
)}
</div>
<div className="mt-4 text-center text-lg font-normal">{name}</div>
</li>
))}
</m.ul>
</LazyMotion>
</div>
</section>
);
Expand Down
Loading