Задать вопрос
@artr_lr

React-GSAP возможно ли отделить логику общей анимации и анимируемых компонентов?

Всем привет! Делаю экспериментальный проектик. Для анимации использую react-gsap.

Структура следующая:
src
- components
- pages
- store
- styles
- tweens

Псевдокод типичного компонента
import React from 'react';

// подключаю нужные стилевые элементы
import {Button} from '../styles/Button'
import {Blob, Blobs} from '../styles/Blobs'

// подключаю нужные мне анимации
import BlobsAnimated from '../tweens/Blobs'

// если надо, инъекчу стор, но тут я это опущу
//... render 
<Button>
  {children}
  <Blobs>
    <BlobsAnimated
      duration={1}
      delay={0.1}
    >
      <Blob />
      <Blob />
      <Blob />
      <Blob />
    </BlobsAnimated>
  </Blobs>
</Button>


Типичная анимация, например всё та же BlobsAnimated
import React from 'react';
import { Tween } from 'react-gsap';

export default ({ children, duration, delay }) => (
<Tween
  staggerFrom={{
     //...
  }}
  duration={duration}
  stagger={delay}
  >
    {children}
</Tween>
);


Теперь сама суть вопроса! Всё хорошо пока не вспоминаем про Timeline. И очень хотелось бы иметь анимационный корневой компонент с общим таймлайном для всех анимаций на странице! Что-то примерно следующее как я себе представляю:

// src/tweens.index.js

import React from 'react';
import {Timeline} from 'react-gsap';
//... импорт всех твинов

export default class extends React.Component {
  render () {
    return (
      <Timeline
        add={LogoAnimated}
        add={NavAnimated}
        add={BlobAnimated}
        // etc
      />
      // or
      <Timeline>
        <LogoAnimated />
        <NavAnimated />
        <BlobAnimated />
      </Timeline>
    );
  }
}


И в верхнем компоненте App.js в рендере отправить этот таймлайн. С одной стороны плохо что твин компоненты нужны будут в двух местах - на общем таймлайне и в компонентах страницы. С другой стороны на таймлайне я задаю химию между самими твинами, а в компонентах страницы указываю, что именно анимировать в самом компоненте, в твине говорю как анимировать. Получается что, как и когда (в каком порядке).

Бред? Если да, то какова альтернатива? Если нет, то как реализовать?) Документация по react-gsap крайне скудная...)
  • Вопрос задан
  • 135 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы