Какой выбрать фреймворк для сложных веб-анимаций (с примером)?
Варианта 2 почти всегда:
1) Greensock (GSAP). Самая крутая либа для анимаций, умеет наверное все, кроме разве что канваса/webgl (для этого обычно уже юзают threejs или ручками что-то пишут).
2) Bodymovin. На второй гифке например последовательная анимация, не требующая интеракций от юзера, но содержащая при этом множество деталей и микродвижений. Пилить такое руками - ОЧЕНЬ много часов (разница между похожим прототипом и прототипом на 90% схожим с гифком - колоссальная). В то время как с bodymovin вы просто экспортируете всю анимацию из after effects и запустите ее на клиенте. Есть конечно же свои плохие стороны, отсутствие гибкости и весьма немалое количество кода, экспортируемого из AE, но обычно в таких ситуациях других способов не бывает.
Прочитайте эти 2 статьи:более новая более старая
С момента их написания еще активно начали говорить про anime.js, но она ни в какое сравнение с возможностями и гибкостью GSAP не идет.
Первую анимацию, из тех которые вы показали, лучше делать на canvas. Мелкие частицы аж никак на вектор не тянут. Хотя может и можно как-то заморочиться с svg фильтрами или просто 50—150 точек запульнуть в сцену.
Вторую анимацию можно сделать руками на GSAP, но это будет довольно таки мучительно.