Skip to content

Commit

Permalink
feat: add motion div into initial transition
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mornieur
Mornieur committed Aug 8, 2023
1 parent cfcf2aa commit 1108e55
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 114 deletions.
54 changes: 33 additions & 21 deletions src/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as S from './styles';
import logo from '../../assets/images/logo.png';
import assetHeader from '../../assets/images/asset-header.png';
import { FC } from 'react';
import { motion } from 'framer-motion';

interface HeaderProps {
minText?: string;
Expand All @@ -17,28 +18,39 @@ export const Header: FC<HeaderProps> = ({
}) => {
return (
<S.Container>
<article>
<Image src={logo} width={200} height={100} alt="logo" />
</article>
<S.TitleComponent>
<S.MinText>{minText}</S.MinText>
<S.MinTitle>{minTitle}</S.MinTitle>
<S.MaxTitle>
{maxTitle}
<Image
className="minLogo"
src={assetHeader}
width={40}
height={40}
alt="asset"
/>
</S.MaxTitle>
<motion.div
className="header-container"
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
<article>
<Image src={logo} width={200} height={100} alt="logo" />
</article>
<S.TitleComponent>
<S.MinText>{minText}</S.MinText>
<S.MinTitle>{minTitle}</S.MinTitle>
<S.MaxTitle>
{maxTitle}
<Image
className="minLogo"
src={assetHeader}
width={40}
height={40}
alt="asset"
/>
</S.MaxTitle>

<S.StyledText bold>
Conheça as estratégias que <b>mudaram o jogo</b> e como aplicá-las no
seu negócio
</S.StyledText>
</S.TitleComponent>
<S.StyledText bold>
Conheça as estratégias que <b>mudaram o jogo</b> e como aplicá-las
no seu negócio
</S.StyledText>
</S.TitleComponent>
</motion.div>
</S.Container>
);
};
54 changes: 34 additions & 20 deletions src/components/VideoComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import videos from './data.json';
import { useEffect, useState } from 'react';
import { ModalView } from './ModalView';
import { BsFillPlayFill } from 'react-icons/bs';
import { motion } from 'framer-motion';

export const VideoComponent = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
Expand All @@ -26,26 +27,39 @@ export const VideoComponent = () => {
)}
<S.Container isOpen={isModalOpen}>
{videos.map((video, index) => (
<S.VideoCard
key={video.id}
onClick={openModal}
data-testid={`video-card-${index}`}
>
<S.PlayIcon>
<BsFillPlayFill size={'8rem'} color="#fff" />
</S.PlayIcon>
<S.VideoPreview>
<S.ThumbnailImage
src={ThumbnailImage.src}
alt={video.alt}
height={300}
data-testid={`thumbnail-${index}`}
/>
<S.Description data-testid={`video-title-${index}`}>
{video.title}
</S.Description>
</S.VideoPreview>
</S.VideoCard>
<>
<motion.div
className="videoGroup"
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
<S.VideoCard
key={video.id}
onClick={openModal}
data-testid={`video-card-${index}`}
>
<S.PlayIcon>
<BsFillPlayFill size={'8rem'} color="#fff" />
</S.PlayIcon>
<S.VideoPreview>
<S.ThumbnailImage
src={ThumbnailImage.src}
alt={video.alt}
height={300}
data-testid={`thumbnail-${index}`}
/>
<S.Description data-testid={`video-title-${index}`}>
{video.title}
</S.Description>
</S.VideoPreview>
</S.VideoCard>
</motion.div>
</>
))}
</S.Container>
</>
Expand Down
157 changes: 84 additions & 73 deletions src/components/ViewComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,83 +35,94 @@ export const ViewComponent: FC<ViewComponentProps> = ({

return (
<S.Container>
<S.Menu>
{menuItems.map((item, index) => (
<S.Button
role="button"
key={index}
active={activeButton === item}
onClick={() => {
setActiveButton(activeButton === item ? null : item);
}}
>
{item}
</S.Button>
))}
<S.OrderList>
<p>{orderList}</p>
<motion.nav
initial={false}
animate={isOpen ? 'open' : 'closed'}
className="menu"
style={{ overflow: 'hidden' }}
>
<motion.button
whileTap={{ scale: 0.97 }}
onClick={() => setIsOpen(!isOpen)}
<motion.div
className="buttonsMenu"
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
<S.Menu>
{menuItems.map((item, index) => (
<S.Button
role="button"
key={index}
active={activeButton === item}
onClick={() => {
setActiveButton(activeButton === item ? null : item);
}}
>
{dropDownText}
<motion.div
variants={{
open: { rotate: 180 },
closed: { rotate: 0 },
}}
transition={{ duration: 0.2 }}
style={{ originY: 0.55 }}
{item}
</S.Button>
))}
<S.OrderList>
<p>{orderList}</p>
<motion.nav
initial={false}
animate={isOpen ? 'open' : 'closed'}
className="menu"
style={{ overflow: 'hidden' }}
>
<motion.button
whileTap={{ scale: 0.97 }}
onClick={() => setIsOpen(!isOpen)}
>
<svg width="15" height="15" viewBox="0 0 20 20">
<path d="M0 7 L 20 7 L 10 16" />
</svg>
</motion.div>
</motion.button>
<motion.ul
variants={{
open: {
clipPath: 'inset(0% 0% 0% 0% round 10px)',
transition: {
type: 'spring',
bounce: 0,
duration: 0.7,
delayChildren: 0.3,
staggerChildren: 0.05,
{dropDownText}
<motion.div
variants={{
open: { rotate: 180 },
closed: { rotate: 0 },
}}
transition={{ duration: 0.2 }}
style={{ originY: 0.55 }}
>
<svg width="15" height="15" viewBox="0 0 20 20">
<path d="M0 7 L 20 7 L 10 16" />
</svg>
</motion.div>
</motion.button>
<motion.ul
variants={{
open: {
clipPath: 'inset(0% 0% 0% 0% round 10px)',
transition: {
type: 'spring',
bounce: 0,
duration: 0.7,
delayChildren: 0.3,
staggerChildren: 0.05,
},
},
},
closed: {
clipPath: 'inset(10% 50% 90% 50% round 10px)',
transition: {
type: 'spring',
bounce: 0,
duration: 0.3,
closed: {
clipPath: 'inset(10% 50% 90% 50% round 10px)',
transition: {
type: 'spring',
bounce: 0,
duration: 0.3,
},
},
},
}}
style={{
pointerEvents: isOpen ? 'auto' : 'none',
zIndex: isOpen ? '999' : 'none',
position: 'absolute',
maxWidth: '300px',
width: '100%',
}}
>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
</motion.ul>
</motion.nav>
</S.OrderList>
</S.Menu>
}}
style={{
pointerEvents: isOpen ? 'auto' : 'none',
zIndex: isOpen ? '999' : 'none',
position: 'absolute',
maxWidth: '300px',
width: '100%',
}}
>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
<motion.li variants={itemVariants}>{itemText}</motion.li>
</motion.ul>
</motion.nav>
</S.OrderList>
</S.Menu>
</motion.div>
</S.Container>
);
};

0 comments on commit 1108e55

Please sign in to comment.