Skip to content

Commit

Permalink
feat: animate scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
d3george committed Sep 15, 2023
1 parent 04e5dc1 commit 733c8f6
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 3 deletions.
8 changes: 7 additions & 1 deletion src/pages/components/animate/views/inview/container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useMemo } from 'react';
import Cover3 from '@/assets/images/cover/cover_3.jpg';
import MotionContainer from '@/components/animate/motion-container';
import { getVariant } from '@/components/animate/variants';
import { useThemeToken } from '@/theme/hooks';

const TEXT = 'SlashAdmin';
type Props = {
Expand All @@ -13,11 +14,16 @@ type Props = {
variant: string;
};
export default function ContainerView({ isText, variant, isMulti }: Props) {
const { colorBgLayout } = useThemeToken();
const varients = useMemo(() => getVariant(variant), [variant]);
const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]);

return (
<div key={variant} className="overflow-hidden rounded-lg bg-gray-300 p-20">
<div
key={variant}
className="overflow-hidden rounded-lg p-20"
style={{ backgroundColor: colorBgLayout }}
>
{isText ? (
<MotionContainer className="flex h-80 items-center justify-center text-6xl font-bold">
{TEXT.split('').map((letter, index) => (
Expand Down
10 changes: 8 additions & 2 deletions src/pages/components/animate/views/scroll/container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@ import { useMemo } from 'react';

import MotionViewport from '@/components/animate/motion-viewport';
import { getVariant } from '@/components/animate/variants';
import { useThemeToken } from '@/theme/hooks';

type Props = {
variant: string;
};
export default function ContainerView({ variant }: Props) {
const { colorBgLayout } = useThemeToken();
const varients = useMemo(() => getVariant(variant), [variant]);

return (
<div key={variant} className="h-[480px] overflow-scroll rounded-lg bg-gray-300 px-20">
<div
key={variant}
className="h-[480px] overflow-scroll rounded-lg px-20"
style={{ backgroundColor: colorBgLayout }}
>
{[...Array(40)].map((_, index) => (
<MotionViewport key={index} variants={varients} className="mt-4">
<Card>
<Typography>Item {index + 1}</Typography>
<Typography className="text-center">Item {index + 1}</Typography>
</Card>
</MotionViewport>
))}
Expand Down

0 comments on commit 733c8f6

Please sign in to comment.