Т.е. мне нужно чтобы оверлей появлялся плавно с добавлением display: flex, а не display: block, при этом полоса прокрутки для скрола появлялась обратно при завершении анимации, а сами модальные окна появлялись при открытии перед анимацией внутри оверлея, а про закрытии исчезали после анимации

Т.е. как будет в данном случае правильно управлять порядком действий и можно ли в функцию fade при необходимости передавать несколько функций с параметрами ?

Да можно же, конечно

Определи условие, когда анимация заканчивается

Не очень силен в js, можешь подсказать, как это будет правильно сделать ?

Точнее совсем в процессе изучения )

Т.е. мне не передавать в fade другие функции, а определять, когда она завершает анимацию и уже потом запускать другие функции ?

А зачем ты хотел передавать функции как аргументы в fade?

Ну к примеру, я передаю в fade функцию scrollOff с параметром add или remove, в зависимости от того, добавить ли класс .scroll_off к body или убрать, класс должен добавляться/убираться строго после выполнения анимации, а если я запущу функцию scrollOff после fade при клике на кнопку - они будут срабатывать синхронно, т.е. scrollOff не будет ждать, пока выполнится полностью setTimeout у fade

А если я передаю функции в fade - они срабатывают при завершении условия if (style.opacity > 1), т.е. при завершении анимации

Люди есть кто в расширениях разбирается и в js?

расширениях чего ?

гугла

а где у него расширения ?

я его хорошо знаю, я не видел у него расширений

Ну в какое время анимация заканчивается? В такое время вставляй сеттаймаут с добавлением или чего желаешь. А для плавности используй свойство animation.
А вообще если запутался, изобрази на бумаге график всего чего там написал, может ясность после этого появится.

Т.е. правильным подходом будет везде где будет использоваться функция анимации fade in/out после добавлять setTimeout с задержкой равной анимации и добавление после всех необходимых действий ? Может есть какое-то более грамотное решение для запуска нескольких функций подряд, в некоторых из которых используется setTimeout так, чтобы они запускались одна после другой, дожидаясь завершения setTimeout'а в некоторых функциях ?

Ну это уже от вас зависит как вы построете , тут мои полномочия все как бы заканчиваются 😄

Да я понимаю, ну может есть какие-то минималистичные общепризнанные подходы к решению подобных задач 😊