??

???? ??? ???? ?? ?? ????, ???? ??? ??? ?? ??? ???? ??? ? ?? ???? ???? ???? ???? ????? ???? ????? ??? ???? ????? ???. Framer Motion? ?? ??? ???? ???? ???? ????? ????? ???? ???? ?? ? ????.

??? ???? ?????? ???? ??? ??? ???????. ??? ?????? ??? ???? ?? ?????. ??? ????? ???? ??? ?????? ??? ? ??? ??? ???? ? ????.

Framer Motion? ???? Next.js?? ?????? ??? ?????. ?? ?????? ?????? ????? ?? ?? ?????? ?????? ??? ? ????.

?? ? ?? ???? ?? ???????.

??? ?????? ??

??? ??????? ? ?? ??? ????.

1. ???-??? ?????: ???? ??? ?? ????? ???? ?????, ???? ? ??? ?? ???????.

2. ???-??? ?????: ??? ???? ????? ?? ? ?? ?????? ??????.

Framer ??? ???? ? ?? ??? ?? ? ????. ? ??? ??? ??? ???.

??? ?? ?????

??? ?? ?????? ?????? ???? ???? ???? ???? ??? ?? ???? ????????. ??? ??? ???????? ???? ????? ?? ??? ?? ?????.

?, ??? ?? 1? ??? ?????? ??? ???? ?? ?? 1? ?? ??? ?????. ???, ???? ?? 2? ???? ?? ? ???? ?????? ?????.

?? ??

• ?????? ??? ??? ??????.
• ????? ?? ???? ?? ?? ?????? ????? ???????.
• ??? ??????? ????? Framer Motion?? useScroll ? useTransform ??(??? ??? ??? ??)? ???? ??? ??? ??, ?? ??, ?? ?? ???? ??? ??? ? ????.

??? ??? ?????

??? ??? ?????? ???? ? ??? ?? ???? ????? ?? ? ?????. ?? ???? ???? ?? ???? ???? ?? ?????? ????? ?????.

??? ?? ?? 1? ?? ?? 3? ??? ??? ?????? ????? ? ?????? ?? 3?? ?????. ?, ?? ???? ??? ?? ?????? ?????(? ?? ??? 3)

??? ????? ? ??? ??????. ???? ??? ??? ???? ???? ??? ??? ???? ?? ??? ????? ???? ? ? ????.

?? ??

• ??? ??? ?? ????: ??? ?? ??????? ???? ????? ????? ?? ?? ??? ??? ???? ?????? ??????. ?? ????? whileInView ?? onEnter? ?? ??? ???? ?????.

• ?? ?????: ??? ?? ?????? ?? ??? ??? ?????? ??? ????? ?? ?? ?? ?? ??? ?????. ???. ???? ???? ?? ??? ???? ? ? ? ???? ??? ?, ???? ? ?? ?? ?? ??? ??? ? ????.

• ??? ?? ?? ??? ?????: ??? ??? ?????? ??? ?? ?? ? ? ?? ????? ????? ??? ??? ??? ??? ? ????. ?? ??? ?? ??? ???? ?? ?????.
  

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

??? ??????

?? ? ?? ??? ??? ?????? ???? ?????, ??? ?????? ??? ? ???? ??? ??? ?????. ?? ?? ?? ????? ??? ?????? ??? ? ????.

?? ?? ????? ???? ?? ????? ??? ? ? ?? ??? ?????? ?? ????????.

???? ??

??? ?? ???? ???? Next.js ????? ???? ??? ???????. ? ??????? StalkBlitz? ??? ????? VSCode? ??? ? ????. ?? ??? VSCode ???? ????? ??? ??? ? ????.

1. TypeScript? ???? ? Next.js ????? ????.
   

   npx create-next-app@latest
   

   ?? ? ?? ???? ?????.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. ???? ?? ??
   

     npm install framer-motion
   

3. ?? ??? ?????.
   app/page.tsx?? ?? ??? ?????. ??? ?????? ???? ?? ???? ???????. ??? ??? ??? ???.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. ???? ??
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

??? ????? ???

?? ????? ??????? ? ?? ??? ??? ?????? ??? ?? ? ????. app/page.tsx ???? ?? ?? ??? ????? ??? ?? ??? ??? ?? app/page.tsx ??? ??? ? ????.

??? ?? ????? ???

??? ?? ?????? ? ?? ?? ??? ????.

• ??? ??? ???: ???? ???? ??? ????? ???? ?? ?? ?? ??? ??????.

• ?? ???: ?? ??? ?? ??? ??? ?? ?? ??? ???? ???? ? ?? ??? ??????.

• ???? ??: ???? ????? ???? ??? ????.

• ?? ??: ??? ?? ??? ?? ??? ??? ?? ????? ?????. ?

?????? ??? ?????. ??? ?? ?????? ??? ?? ??? ??? ???? ??? ??? ?? ???? ???.

1. ??? ??? ??(useScroll): ???? ??? ??? ???? ????? ??? ??? ???? ???? 0?? 1 ??? ?? ?????.
   

   npx create-next-app@latest
   

2. ??? ??? ??(useTransform): ??? ??? ????, ?? ?? ??? ?? ?? ????? ??? ?????. ????? ?? ???, ??, ??, ?? ?? ?? ?? ??? ?? ?????? ????? ? ?????.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. ?? ??? ??? ?????: ?? ??? Motion.div(?? ?? ?? ?? ??)? ???? ?????? ??? ?? ??? ?????.
   

     npm install framer-motion
   

4. ??: ???? ??? ???? ?????? ???? ????? ????.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. ?? ? ?? ??: ??, ????? ?? ??? ??? ???? ??? ??? ??? ???? ???? useTransform ?? scrollYProgress? ??? ??????? ?? ??? ?????.
   

       npm run dev
   

??? ??? ???

??? ??? ???? ??? ??? ???????. ??? ??? ??? ???? ?? ? ????? ?? ?? ? ?? ?? ??? ?????.

   const { scrollYProgress } = useScroll();

???? ??? ??????.

• useScroll: ??? ??? 0? 1 ??? ???? ??? ?????.

• useTransform: ?? ?? ? ?? ???? ????? ?? ???? ???? ??? ?? ??? ??? ?? ? ??? ?????.

• ?? ????: Framer Motion? Motion.circle? ???? ???? ???? ????? ???? ??? ?????? ?????.

?? ?? ?? ??? ?????

? ???? Framer Motion? ???? ??? ??? ??? ?? ?? ?? ?? ??? ?????.

1. ??? ??? ??: ??? ???? ???? useScroll()? ???? ???? ?? ??? ???? ?????. scrollYProgress ?? ??? ??? 0?? ??? ???? 1?????.
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

2. ??? ?? ?? ??? ??: useTransform()? ???? ??? ?? ??? ???? ???? ? ???? ???? ?? ??? ?????. ? ???? scrollYProgress? [0, 0.5, 1]?? ?? ? [1, 2, 1]? ?????. ?, ???? ?? ???? ??? ??? ???? ??? ? ?? ??? ?? ?????. ??? ???? ?? ?????.
   

   npx create-next-app@latest
   

3. ??? ?? ?????: Motion.h1 ?? ?? ??? ??? ??? scaleValue? ???? ??? ??? ?? ??? ?? ?? ??? ???? ?????????. ???? ????? ???? "???" ? "?????".
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. ?? ??? ??: ??? ??? ??? ?? ?? ?????? ?? ?? ?? ??? ??? ???? ?????. ??? ????? ???? ???? ?????? ??? ???? ???? ?? ???? ???.
   

     npm install framer-motion
   

??? ??:

• useScroll: ? ??? ?? ???? ?????? ??? ??? ?? ???? ??? ?? ??? ?????.

• useTransform: ????? ??? ?? ??? ?? ?? ???? ??? ??? ?? ???? ???? ???? ????? ???.

• ?? ?? ??: ?? ?? ??? Motion.h1? ??? ?? ???? ?? ??? ???? ???? ????? ????????.

? ?? ??? ??????. useScroll useTransform ? ??. ?? ????? ?????. ?? ??? ??? ?????

? ??? ?????.

??? ??? ????? ???

??? ??? ?????? ? ?? ??? ???? ????. ??? ?????? ???? ?? ?? ??? ??? ? ????. ?? ?? ? ?? ??? ?? ???? ??? div? ?? ?? ???? ????. ?? ????? ?????? ??? ???? ?? ? ????? ?????? ???? ????.

?? ?? ??? ??? ?????? ?????. ?? ?? ??? ??? ??? ?????? ?? ???? ??? ? ?????. ?? ? ??? Framer Motion ??? ??? ?????.

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

1. framer-motion?? ??? ?????

2. ?? ?? ??? ?? ??? ???? ??? ? ?? ?? ???? ????.

3. ? ?? ?? div???. ???? ?? ??(?? ? ??)? ?????. ??? ??? ?????? ???? ?? ??? ? whileInView? ?????.

   initial={{ opacity: 0, y: 50 }}: ???? ??? ??? ??(opacity: 0) 50?? ??(y: 50)? ?????.
   whileInView={{ ????: 1, y: 0 }}: ???? ??? ????? ??? ????(????: 1) ?? ??(y: 0)? ?????.
   ??={{ ?? ??: 0.8, ??: 'easeOut' }}: ???? 0.8?? ??? ???? ?????.

   ?? ???? Tailwind ???? ???? ???? ??, 90% ????? ??, ???, ?? ??? ? ?? ??? ?????.

4. ? ???? ? ?? ?? div(??? ??? ????? ???)? ????. ? ?? ???? ??? ???? ?? ???? ?????? ?????.

   initial={{ y: -100, opacity: 0 }}: ???? ?? ???? 100?? ??? ???? ??? ????.
   whileInView={{ y: 0, opacity: 1 }}: ??? ???? ?? ??? ???? ??? ????.
   Transition={{ Delay: 0.5, Duration: 0.8 }}: ?????? ???? ?? 0.5?? ??? ?? ??? ?? ??? ???.

?? ??? ??? ????.

??

??? ???? ???????. useScroll useTransition whileInView ?? ? ?? ?? ?? ?? ?????? ???? ?? ???? ? ?? ???? 2?? ??? ?????? ????.

? ?? ????? ??? ??? ?? ??? StalkBliz ????? ??????. ???? ???? ??? ??? ? ?? ?? ??? ?????? ? ? ????. ? ?? ??, ?? ? ??? ?????? ?? ????? ???? Framer Motion? ??? ??? ?????.

? ???? ????? ?????. ?? ?? ????? ???? ???? ??? ??? ????? ??? ???. ?? JavaScript, TypeScript, ?? ?? ? ?? ? ?? ?? ??? ?? ???? ???? ???? ?????. ? ?? ????? ?? ??????. ?? ??? ?????. ????? :)

• ???
• ????
• ???

? ??? Framer Motion? ???? ???? ??? ????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!