Необходимо создать анимацию основанную на скролле. Анимация будет пошаговая. Когда пользователь скроллит страницу, то анимация должна проигрываться пошагово (см. видео). В конце – помочь с имплементированием кода на страницу в Webflow.
Мобильная версия
Десктопная версия
Сложность заключается в том, что скроллинг будет кастомным на мобильной версии. Анимация и контент не будут умещаться на большинстве устройствах. Поэтому, когда пользователь будет скроллить страницу вниз, то анимация должна проигрывать следующий шаг только после того, как пользователь прочитает текст (при достижении view) показывать следующий шаг анимации и скроллить страницу до верхней точки анимации.
https://www.figma.com/file/WLP0ZLQ11WOCBJaAfeIJyI/Fibersort-Interactive-For-developers?node-id=0%3A1
На десктопе с этой анимацией будет все легче – если пользователь пролистнул страницу, то анимация должна воспроизводить следующий шаг. После того, как все шаги анимации проиграются – скролл становится обычным.
При скролле обратно вверх – анимации должны проигрываться в обратном направлении.
20200221 - FS value chain Desktop - 1368x475px.svg
20200221 - FS value chain Mobile - 786x1366px.svg
Итоговая иллюстрация немного отличается от того, что в видео. Видео – это не прямое указание того, что надо сделать, а лишь демонстрация сути того, как это надо сделать.
