Всем привет! Делаю экспериментальный проектик. Для анимации использую 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 крайне скудная...)