Собственно сама идея для анимации:
При скроллинге по мере прокрутки итем 1 уезжает влево за пределы экрана, итем 3 – вверх за пределы экрана, итем 2- доходит до красного блока и фиксируется. При дальнейшем скроллинге никаких действий с этим итемом 2 не происходит. При обратном скроллинге анимация должна отработать в обратном порядке
Вы ждете реализации этого? Ваш вопрос из разряда "как сделать сайт". Максимум чего Вы дождетесь "с помощью js". Задавайте конкретные вопросы на которые может быть ответ. Svg тут вообще каким боком? Просто случайные теги вставили?
Исправьте вопрос так, чтобы он описывал конкретную проблему с достаточной детализацией для определения адекватного ответа. В текущем виде он выглядит как задание.
Простой
