Анимация компонентов React с помощью GreenSock

В первые дни существования Всемирной паутины все было довольно статично и скучно. Веб-страницы в основном основывались на графическом дизайне и макетах из печатного мира, пока не была введена анимация. Анимация может привлекать и удерживать внимание людей дольше, чем статическая веб-страница, и более четко и эффективно передает идею или концепцию.

Однако, если анимация не сделана правильно, она может затруднить взаимодействие пользователей с вашим продуктом и негативно сказаться на привлекательности. GreenSock Animation Platform AKA (GSAP) — это мощная библиотека JavaScript, которая позволяет фронтенд-разработчикам, аниматорам и дизайнерам создавать эффективные анимации на основе временной шкалы. Это позволяет любителям анимации точно контролировать свои анимационные последовательности, а не ограничивать keyframe и свойства animation , которые предлагает CSS.

В этой статье я познакомлю вас с некоторыми функциями GSAP, такими как scrollTriggers , Timelines , Easing и т. д. В конце мы создадим интуитивно понятный пользовательский интерфейс, анимируя приложение React с помощью этих функций. Проверьте готовый проект на codeandbox.

Эта статья будет вам полезна, если:

• Вы создавали анимацию для веб-приложений с помощью HTML, CSS и JavaScript.
• Вы уже создаете анимированные веб-страницы в приложениях React с такими пакетами, как animate.css, React-motion, Framer-motion и React-Spring, а также хотите проверить альтернативы.
• Вы энтузиаст React и хотели бы создавать сложные анимации для веб-приложений на основе React.

Мы рассмотрим, как создавать различные анимации из существующего веб-проекта. Давайте приступим!

Примечание . В этой статье предполагается, что вы знакомы с HTML, CSS, JavaScript и React.js.

Что такое ГСАП?

GreenSock Animation Platform, также известная как GSAP, представляет собой сверхвысокопроизводительную профессиональную анимацию для современной сети, которая позволяет разработчикам анимировать свои приложения модульным, декларативным и многоразовым способом. Он не зависит от фреймворка и может использоваться в любом проекте на основе JavaScript, имеет очень минимальный размер пакета и не будет раздувать ваше приложение.

GSAP может выполнять анимацию холста, используемую для создания интерфейса WebGL, и создавать динамические анимации SVG, а также обеспечивает отличную поддержку браузера.

Зачем использовать GSAP?

Возможно, вы еще не совсем готовы отказаться от других фреймворков или вас не убедили воспользоваться преимуществами GSAP. Позвольте мне назвать вам несколько причин, по которым вы можете захотеть рассмотреть GSAP.

Вы можете создавать сложные анимации

Библиотека JavaScript GSAP позволяет разработчикам создавать простые и очень сложные анимации на основе физики, как в случае с этими сайтами, она позволяет разработчикам и дизайнерам упорядочивать движения и динамически управлять анимацией. Он имеет множество плагинов, таких как DrawSVGPlugin, MorphSVGPlugin и другие, что делает реальностью создание SVG-анимаций и 2D/3D-анимаций. Помимо интеграции GSAP с элементами DOM, вы можете использовать их в контекстно-ориентированных анимациях WebGL/Canvas/Three.js.

Кроме того, возможности GSAP по смягчению довольно сложны, что позволяет создавать расширенные эффекты с несколькими безье по сравнению с обычной анимацией CSS.

Представление

GSAP имеет впечатляющую высокую производительность в разных браузерах.

По словам команды GSAP на их веб-сайте, «GSAP в 20 раз быстрее , чем jQuery, плюс GSAP — это самый быстрый полнофункциональный скриптовый инструмент анимации на планете. Во многих случаях это даже быстрее, чем анимация и переходы CSS3». Подтвердите сравнение скорости для себя.

Кроме того, анимация GSAP легко воспроизводится как на настольных компьютерах, так и на планшетах и ​​смартфонах. Нет необходимости добавлять длинный список префиксов, обо всем этом позаботится GSAP.

Вы можете ознакомиться с дополнительными преимуществами на GSAP или посмотреть, что Сара Драснер говорит об этом здесь.

Минусы GSAP

Вы говорите, что я всегда должен использовать GSAP для каждого проекта? Конечно, нет! Мне кажется, есть только одна причина, по которой вы можете не захотеть использовать GSAP. Давайте узнаем!

• GSAP — это исключительно библиотека анимации на основе JavaScript, поэтому для эффективного использования ее методов и API требуются некоторые знания JavaScript и манипулирования DOM. Этот недостаток кривой обучения оставляет еще больше возможностей для сложностей для новичка, начинающего с JavaScript.
• GSAP не обслуживает анимацию на основе CSS, поэтому, если вы ищете библиотеку для нее, вы также можете использовать keyframes в анимации CSS.

Если у вас есть другая причина, не стесняйтесь поделиться ею в разделе комментариев.

Хорошо, теперь, когда ваши сомнения рассеялись, давайте перейдем к мельчайшим подробностям в GSAP.

Основы ГСАП

Прежде чем мы создадим нашу анимацию с помощью React, давайте познакомимся с некоторыми методами и строительными блоками GSAP.

Если вы уже знакомы с основами GSAP, вы можете пропустить этот раздел и сразу перейти к разделу проекта, где мы создадим наклон целевой страницы при прокрутке.

Твин

Анимация — это одно движение в анимации. В GSAP анимация имеет следующий синтаксис:

 TweenMax.method(element, duration, vars)

Давайте посмотрим, что представляет собой этот синтаксис;

1. method относится к методу GSAP, который вы хотите использовать для анимации.
2. element — это элемент, который вы хотите анимировать. Если вы хотите создать анимацию для нескольких элементов одновременно, вы можете передать массив элементов в element .
3. duration — это продолжительность вашего твина. Это целое число в секундах (без суффикса s !).
4. vars — это объект свойств, которые вы хотите анимировать. Подробнее об этом позже.

Методы GSAP

GSAP предоставляет множество методов для создания анимации. В этой статье мы упомянем лишь некоторые из них, такие как gsap.to , gsap.from , gsap.fromTo . Вы можете проверить другие классные методы в их документации. Методы, обсуждаемые в этом разделе, будут использоваться при создании нашего проекта позже в этом руководстве.

• gsap.to() — значения, до которых должен быть анимирован объект, т. е. конечные значения свойства анимированного объекта — как показано ниже:
  

   gsap.to('.ball', {x:250, duration: 5})

Чтобы продемонстрировать метод to , приведенная ниже демонстрация codepen показывает, что элемент с классом ball 250px будет перемещаться по x-axis за пять секунд, когда компоненты монтируются. Если продолжительность не указана, будет использоваться значение по умолчанию 500 миллисекунд.

Примечание : оси x и y-axis представляют горизонтальную и вертикальную оси соответственно, а также в свойствах преобразования CSS, таких как translateX и translateY , они представлены как x и y для преобразований pixel-measured пикселями, и xPercent и yPercent для процентных преобразований.

Чтобы просмотреть полный фрагмент кода, проверьте игровую площадку codepen.

• gsap.from() — определяет значения, из которых должен быть анимирован объект, т. е. начальные значения анимации:
  

   gsap.from('.square', {duration:3, scale: 4})

Демонстрация codepen показывает, как размер элемента с классом square изменяется с масштаба 4 за 3 3seconds когда компоненты монтируются. Проверьте полный фрагмент кода на этом codepen.

• gsap.fromTo() — позволяет определить начальное и конечное значения анимации. Это комбинация методов from() и to() .

Вот как это выглядит;

 gsap.fromTo('.ball',{opacity:0 }, {opacity: 1 , x: 200 , duration: 3 }); gsap.fromTo('.square', {opacity:0, x:200}, { opacity:1, x: 1 , duration: 3 });

Этот код анимирует элемент с классом ball от непрозрачности от 0 до непрозрачности 1 по x-axis за 3 seconds , а square класс анимируется от непрозрачности от 0 до 1 за 3 seconds по оси x-axis . x-axis только при монтировании компонента. Чтобы увидеть, как работает метод fromTo , а также полный фрагмент кода, посмотрите демонстрацию на CodePen ниже.

Примечание . Всякий раз, когда мы анимируем позиционные свойства, такие как left и top , мы должны гарантировать, что соответствующие элементы должны иметь свойство CSS position либо relative , absolute , либо fixed .

Ослабление

Официальная документация GSAP определяет смягчение как основной способ изменить время ваших подростков. Он определяет, как объект меняет положение в разных точках. Ease управляет скоростью изменения анимации в GSAP и используется для установки стиля анимации объекта.

GSAP предоставляет различные типы замедлений и опций, чтобы дать вам больше контроля над тем, как должна вести себя ваша анимация. Он также предоставляет визуализатор замедления, который поможет вам выбрать предпочтительные параметры замедления.

Есть три типа облегчения, и они различаются по своему действию.

1. in() — Движение начинается медленно, затем ускоряется к концу анимации.
2. out() — анимация начинается быстро, а затем замедляется в конце анимации.
3. inOut() — анимация начинается медленно, набирает скорость на полпути и медленно заканчивается.

В этом примере замедления мы связали анимацию движения, которая отображала три типа bounce.in , bounce.out и bounce.inOut , и установили задержку в количестве секунд, которое требуется для завершения анимации перед запуском следующего, только когда компонент монтирует. Этот шаблон повторяется, в следующем разделе мы увидим, как мы можем использовать временную шкалу, чтобы сделать это лучше.

Хронология

Временная шкала действует как контейнер для нескольких твинов. Он анимирует анимацию в последовательном порядке и не зависит от продолжительности предыдущей анимации. Временная шкала упрощает управление подростками в целом и точное управление их синхронизацией.

Временные шкалы можно записать, создав экземпляр временной шкалы следующим образом:

 gsap.timeline();

Вы также можете привязать несколько анимаций к временной шкале двумя разными способами в приведенном ниже коде:

 ##Method 1 const tl = gsap.timeline(); // create an instance and assign it a variable tl.add(); // add tween to timeline tl.to('element', {}); tl.from('element', {}); ##Method 2 gsap.timeline() .add() // add tween to timeline .to('element', {}) .from('element', {})

Давайте воссоздадим предыдущий пример с временной шкалой:

 const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app')); const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app'));

Внутри хука useEffect мы создали переменную (tl) , содержащую экземпляр временной шкалы, затем мы использовали переменную tl для последовательной анимации нашей анимации движения, не завися от предыдущей анимации движения, передавая те же свойства, что и в предыдущий пример. Для получения полного фрагмента кода этой демонстрации проверьте игровую площадку codepen ниже.

См. демонстрацию Pen [React GSAP (Easing with Timeline)] (https://codepen.io/smashingmag/pen/zYqaEmE) от Blessing Krofegha.

Теперь, когда мы познакомились с некоторыми основными строительными блоками GSAP, давайте посмотрим, как мы можем создать полную анимацию в типичном приложении React в следующем разделе. Начнем полет!

Создание анимированной целевой страницы с помощью React и GSAP

Давайте приступим к анимации приложения React. Убедитесь, что вы клонировали репозиторий , прежде чем начать, и запустите npm install , чтобы установить зависимости.

Что мы строим?

В настоящее время наша целевая страница содержит несколько текстов на белом фоне, меню, которое не раскрывается, без анимации. Вот что мы добавим на целевую страницу;

• Анимируйте текст и логотип на главной странице, чтобы они уменьшались при монтировании компонента.
• Анимируйте меню, чтобы оно выпадало при нажатии на меню.
• Сделайте так, чтобы изображения на странице галереи 20deg на 20 градусов при прокрутке страницы.

Посмотрите демо на codeandbox.

Мы разобьем процесс нашей целевой страницы на компоненты, чтобы его было легко понять. Вот процесс;

• Определите методы анимации,
• Анимированный текст и логотип,
• Переключить меню,
• Сделайте изображения 20deg на 20 градусов при прокрутке страницы.

компоненты

• Animate.js — определены все методы анимации,
• Image.js — импорт изображений гранок,
• Menu.js — содержит функциональность переключения меню,
• Header.js — содержит навигационные ссылки.

Определение методов анимации

Создайте папку component внутри каталога src и создайте файл animate.js . Скопируйте и вставьте в него следующий код.

 import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger"; //Animate text export const textIntro = elem => { gsap.from(elem, { xPercent: -20, opacity: 0, stagger: 0.2, duration: 2, scale: -1, ease: "back", }); };

Здесь мы импортировали gsap . Мы написали экспортированную стрелочную функцию, которая анимирует текст на целевой странице. Помните, что gsap.from() определяет значения, из которых должен анимироваться объект. Функция имеет параметр elem , представляющий класс, который нужно анимировать. Он принимает несколько свойств и присваивает значения, такие как xPercent: -20 (преобразует объект на -20%), придает объекту отсутствие непрозрачности, заставляет объект scale на -1 , возвращает объект в ease состояние за 2 2sec .

Чтобы проверить, работает ли это, перейдите на App.js и включите следующий код.

 ... //import textIntro import {textIntro} from "./components/Animate" ... //using useRef hook to access the textIntro DOM let intro = useRef(null) useEffect(() => { textIntro(intro) }, []) function Home() { return ( <div className='container'> <div className='wrapper'> <h5 className="intro" ref={(el) => (intro = el)}></h5> The <b>SHOPPER</b>, is a worldclass, innovative, global online ecommerce platform, that meets your everyday daily needs. </h5> </div> </div> ); }

Здесь мы импортируем метод textIntro из компонента Aminate . Для доступа к DOM мы использовали useRef Hook. Мы создали переменную intro , значение которой равно null . Затем внутри хука useEffect мы вызвали метод textIntro и переменную intro . Внутри нашего домашнего компонента в теге h5 мы определили реквизит ref и передали переменную intro .

Далее у нас есть меню, но оно не выпадает при нажатии. Давайте заставим это работать! Внутри компонента Header.js добавьте приведенный ниже код.

 import React, { useState, useEffect, useRef } from "react"; import { withRouter, Link, useHistory } from "react-router-dom"; import Menu from "./Menu"; const Header = () => { const history = useHistory() let logo = useRef(null); //State of our Menu const [state, setState] = useState({ initial: false, clicked: null, menuName: "Menu", }); // State of our button const [disabled, setDisabled] = useState(false); //When the component mounts useEffect(() => { textIntro(logo); //Listening for page changes. history.listen(() => { setState({ clicked: false, menuName: "Menu" }); }); }, [history]); //toggle menu const toggleMenu = () => { disableMenu(); if (state.initial === false) { setState({ initial: null, clicked: true, menuName: "Close", }); } else if (state.clicked === true) { setState({ clicked: !state.clicked, menuName: "Menu", }); } else if (state.clicked === false) { setState({ clicked: !state.clicked, menuName: "Close", }); } }; // check if out button is disabled const disableMenu = () => { setDisabled(!disabled); setTimeout(() => { setDisabled(false); }, 1200); }; return ( <header> <div className="container"> <div className="wrapper"> <div className="inner-header"> <div className="logo" ref={(el) => (logo = el)}> <Link to="/">SHOPPER.</Link> </div> <div className="menu"> <button disabled={disabled} onClick={toggleMenu}> {state.menuName} </button> </div> </div> </div> </div> <Menu state={state} /> </header> ); }; export default withRouter(Header);

В этом компоненте мы определили наше меню и состояние кнопки, внутри хука useEffect мы прослушивали изменения страницы с помощью хука useHistory , если страница изменяется, мы устанавливаем значения состояния clicked и menuName в false и Menu соответственно.

Чтобы обработать наше меню, мы проверили, является ли значение нашего начального состояния ложным, если оно истинно, мы меняем значение initial , clicked и menuName на null , true и Close . В противном случае мы проверяем, нажата ли кнопка, если это правда, мы изменим menuName на Menu . Далее у нас есть функция disabledMenu , которая отключает нашу кнопку на 1sec при нажатии.

Наконец, в нашей button мы присвоили disabled значение disabled , которое является логическим значением, которое отключит кнопку, когда ее значение равно true . А обработчик кнопки onClick привязан к функции toggleMenu . Все, что мы сделали здесь, это переключили текст нашего menu и передали состояние компоненту Menu , который мы создадим в ближайшее время. Давайте напишем методы, которые сделают наше меню раскрывающимся перед созданием фактического компонента Menu . Перейдите к Animate.js и вставьте в него этот код.

 .... //Open menu export const menuShow = (elem1, elem2) => { gsap.from([elem1, elem2], { duration: 0.7, height: 0, transformOrigin: "right top", skewY: 2, ease: "power4.inOut", stagger: { amount: 0.2, }, }); }; //Close menu export const menuHide = (elem1, elem2) => { gsap.to([elem1, elem2], { duration: 0.8, height: 0, ease: "power4.inOut", stagger: { amount: 0.07, }, }); };

Здесь у нас есть функция с именем menuShow , которая наклоняет меню по горизонтали на 2degrees , облегчает меню, смещает анимацию с помощью свойства stagger и трансформирует меню right to top за 0,7 секунды. 0.7sec же свойства относятся к функции menuHide . Чтобы использовать эти функции, создайте файл Menu.js внутри components и вставьте в него этот код.

 import React, {useEffect, useRef} from 'react' import { gsap } from "gsap" import { Link } from "react-router-dom" import { menuShow, menuHide, textIntro, } from './Animate' const Menu = ({ state }) => { //create refs for our DOM elements let menuWrapper = useRef(null) let show1 = useRef(null) let show2 = useRef(null) let info = useRef(null) useEffect(() => { // If the menu is open and we click the menu button to close it. if (state.clicked === false) { // If menu is closed and we want to open it. menuHide(show2, show1); // Set menu to display none gsap.to(menuWrapper, { duration: 1, css: { display: "none" } }); } else if ( state.clicked === true || (state.clicked === true && state.initial === null) ) { // Set menu to display block gsap.to(menuWrapper, { duration: 0, css: { display: "block" } }); //Allow menu to have height of 100% gsap.to([show1, show2], { duration: 0, opacity: 1, height: "100%" }); menuShow(show1, show2); textIntro(info); } }, [state]) return ( <div ref={(el) => (menuWrapper = el)} className="hamburger-menu"> <div ref={(el) => (show1 = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (show2 = el)} className="menu-layer"> <div className="container"> <div className="wrapper"> <div className="menu-links"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/about-us" > About </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/gallery" > Gallery </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact-us" > Contact us </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Our Vision</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.... </p> </div> </div> </div> </div> </div> </div> ); } export default Menu

В компоненте Menu мы импортировали анимированные функции, а именно menuShow , menuHide и textIntro . Затем мы назначили переменные для каждой созданной refs для наших элементов DOM , используя хук useRef , и передали null в качестве их значений. Внутри хука useEffect мы проверяем состояние menu , если clicked равно false , мы вызываем функцию menuHide , в противном случае, если clicked состояние истинно, мы вызываем функцию menuShow . Наконец, мы удостоверились, что соответствующим элементам DOM передаются их конкретные ссылки, show2 как refs , menuWrapper , show1 . Благодаря этому у нас появилось анимированное меню.

Давайте посмотрим, как это выглядит.

Последняя анимация, которую мы хотели бы реализовать, — это заставить наши изображения в нашей галерее skew при прокрутке. Давайте теперь посмотрим, в каком состоянии наша галерея.

Чтобы реализовать анимацию перекоса в нашей галерее, давайте перейдем к Animate.js и добавим в нее несколько кодов.

 .... //Skew gallery Images export const skewGallery = elem1 => { //register ScrollTrigger gsap.registerPlugin(ScrollTrigger); // make the right edge "stick" to the scroll bar. force3D: true improves performance gsap.set(elem1, { transformOrigin: "right center", force3D: true }); let clamp = gsap.utils.clamp(-20, 20) // don't let the skew go beyond 20 degrees. ScrollTrigger.create({ trigger: elem1, onUpdate: (self) => { const velocity = clamp(Math.round(self.getVelocity() / 300)); gsap.to(elem1, { skew: 0, skewY: velocity, ease: "power3", duration: 0.8, }); }, }); }

Мы создали функцию skewGallery , передали elem1 в качестве параметра и зарегистрировали ScrollTrigger .

ScrollTrigger — это плагин в GSAP, который позволяет нам запускать анимацию на основе прокрутки, как в этом случае с перекосом изображений во время прокрутки страницы.

Чтобы привязать правый край к полосе прокрутки, мы передали значение right center в свойство transformOrigin , мы также установили для свойства force3D значение true в другом, чтобы повысить производительность.

Мы объявили переменную clamp , которая вычисляет наш перекос и гарантирует, что он не превышает 20degs . Внутри объекта ScrollTrigger мы присвоили свойство trigger параметру elem1 , который будет элементом, который должен запускаться при вызове этой функции. У нас есть функция обратного вызова onUpdate , внутри нее находится переменная velocity , которая вычисляет текущую скорость и делит ее на 300 .

Наконец, мы анимируем элемент из его текущих значений, устанавливая другие значения. Сначала мы устанавливаем skew равным 0 , а skewY — переменной velocity , равной 0.8 .

Далее нам нужно вызвать эту функцию в нашем файле App.js

 .... import { skewGallery } from "./components/Animate" function Gallery() { let skewImage = useRef(null); useEffect(() => { skewGallery(skewImage) }, []); return ( <div ref={(el) => (skewImage = el)}> <Image/> </div> ) } ....

Здесь мы импортировали skewGalley из ./components/Animate , создали skewImage , нацеленную на элемент изображения. Внутри хука useEffect мы вызвали функцию skewGallery и передали skewImage в качестве параметра. Наконец, мы передали skewImage ref to.

Вы согласитесь со мной, что до сих пор это было довольно крутое путешествие. Вот превью на CodeSanbox

Вспомогательный репозиторий для этой статьи доступен на Github.

Заключение

Мы исследовали потенциал GSAP в проекте React, в этой статье мы только коснулись поверхности, нет предела тому, что вы можете делать с GSAP, когда речь идет об анимации. Официальный сайт GSAP предлагает дополнительные советы, которые помогут вам получить полное представление о методах и плагинах. Есть много демонстраций, которые поразят вас тем, что люди сделали с GSAP. Я хотел бы услышать ваш опыт работы с GSAP в разделе комментариев.

Ресурсы

1. Документация GSAP, GreenSock
2. «Руководство для начинающих по платформе анимации GreenSock», Николас Крамер, freeCodeCamp
3. «Введение в анимацию с помощью Greensock Animation API (GSAP)», Zell Liew