GGR/1 #gatsbyjs, gsap, React — сложные анимации и вёрстка

В этом туториале мы рассмотрим, как создать сложные анимации и вёрстку на сайте, используя технологии GatsbyJS, gsap и React. Мы также будем использовать новый компонент StaticImage из Gatsby для оптимизации загрузки изображений. В конце мы создадим шаблон сайта с меню и красивыми анимациями.

1. Установка GatsbyJS и создание проекта:
   Для начала установите Gatsby CLI, если его у вас еще нет:

   npm install -g gatsby-cli

   Затем создайте новый проект с помощью команды:

   gatsby new my-gatsby-project

   Перейдите в папку проекта:

   cd my-gatsby-project

2. Создание компонента для анимации:
   Создайте новый компонент с помощью команды:

   gatsby new component AnimationComponent

   Откройте файл AnimationComponent.js и добавьте следующий код:

   
   import React, { useEffect, useRef } from 'react';
   import { gsap } from 'gsap';

const AnimationComponent = () => {
const elementRef = useRef(null);

useEffect(() => {
gsap.from(elementRef.current, { duration: 1, x: 100, opacity: 0 });
}, []);

return

;
};

export default AnimationComponent;

3. Использование компонента StaticImage:
Gatsby 3.0 ввел новый компонент StaticImage для оптимизации загрузки изображений:
```jsx
import { StaticImage } from 'gatsby-plugin-image';

const Header = () => (
  <header>
    <StaticImage
      src="../images/header.jpg"
      alt="Header"
    />
  </header>
);

1. Создание шаблона сайта:
   Создайте компонент Layout.js для размещения всех страниц сайта:

   const Layout = ({ children }) => (
   <>
   <header>
     Меню
   </header>
   {children}
   <footer>
     © 2022 My Company
   </footer>
   </>
   );

2. Использование компонентов:
   Импортируйте компоненты в файл index.js и используйте их:

   
   import Layout from './Layout';
   import AnimationComponent from './AnimationComponent';

const IndexPage = () => (

Добро пожаловать!

);

export default IndexPage;

6. Запуск проекта:
Запустите проект с помощью команды:
```bash
gatsby develop

Откройте браузер и перейдите на http://localhost:8000/, чтобы увидеть результат.

Теперь у вас есть сайт с красивыми анимациями и оптимизированными изображениями, созданный с использованием GatsbyJS, gsap и React. Вы можете дальше расширить функционал сайта и добавить новые компоненты и анимации.