ProjectSoft

в левой колонке же стрелочка. Раскройте пункт , там подуровень

Анимация = анимации рознь.

Конкретный ответ со списком вы тут не увидите, это будет большая статья, со множественными "а вот тут", "но здесь" просто потому что многое зависит от контекста, задач, планирование.
Главные рекомендации это не делать на js то, что отлично реализуется с помощью css. Этим к сожалению часто болеют многие фронтендеры, особенно из тех кто принципиально не любит вёрстку. Банальные примеры некоторые виды трансформаций объектов при булевых сменах какого параметра(условно навел/убрал наведения, вкл-выкл и тп).

Но нужно иметь ввиду, что там где у вас выходит сложная логика, разные усложнённые сценарии, динамические параметры запуска и тп и тд. Без js естественно никуда.

Поэтому просто зная возможности css, имея здравый смысл, вы будете видеть и знать где что использовать.
К счастью css тоже в последнее время активно развивается давай нам всё больше возможностей.
Поэтому - простая штука, что-то типа одноразовых анимации, простого повторения, туда сюда - подумать про css.
Если к этому добавляются всякие реакции на сложные тайминги, старт-пауза перемотать остановить на промежутке и тп - js.
Ну и безусловно разные сложные, многоходовки с завязкой друг на друга - однозначно js.

В целом информации на эту тему достаточно в интернете, мудрить здесь особо не стоит. Поэтому повторюсь: просто здравый смысл и держать в уме знание css и не брезговать его использовать. Нередко кстати сами верстальщики уже готовят эти анимации, но это уже отдельный разговор организации команд и внутрипроектной кухни. Я сторонник того что фронтэндер, пусть и не обязан прям верстать верстать, но знать вёрстку/css должен на очень хорошем уровне.

Можно использовать следующий скрипт

function exportSheetToPDF() {
  // Получаем активный Spreadsheet (гугл таблицу)
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  // Получаем лист по его имени
  var sheet = ss.getSheetByName('Имя листа');
  
  // Экспортируем лист в PDF
  var url = ss.getUrl();
  url = url.replace(/edit$/,'');
  var sheetId = sheet.getSheetId();
  var pdfName = sheet.getName() + ".pdf";
  var pdfUrl = url + 'export?exportFormat=pdf&format=pdf' +
      '&size=letter' +
      '&portrait=true' +
      '&fitw=true' +
      '&sheetnames=false&printtitle=false' +
      '&pagenumbers=false&gridlines=false' +
      '&fzr=false' +
      '&gid=' + sheetId;
  var options = {
    headers: {
      'Authorization': 'Bearer ' +  ScriptApp.getOAuthToken(),
    }
  }
  var response = UrlFetchApp.fetch(pdfUrl, options);
  var blob = response.getBlob().setName(pdfName);
  
  // Сохраняем PDF в Google Drive
  var folder = DriveApp.getFolderById('ID папки');
  folder.createFile(blob);
}

Я конкретной проблемы в вашем случаи не знаю, сталкивался с похожим, при других обстоятельствах, суть в том что для родителя с overflow: hidden можно применять scrollLeft, я на вашем сайте посмотрел, и таки да, вам мешает scrollLeft, я не знаю кто его добавляет, но я бы просто после вывода ошибки применял:

document.querySelector(".mainslider_slider").scrollLeft = 0;

да это костыль, но лезть в дебри не нужно, не та задача.

но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

.box:nth-child(3n) {
 grid-column: span 2
}

У вас повтор идет через пять блоков. Значит должно стоять 5n – каждый пятый
Но применяться должно к 4-му блоку в этой пятерке. Значит нужно добавить смещение + 4
Итог:

.box:nth-child(5n + 4) {
    grid-column: span 2;
}

Только у меня не прогружается фрейм в котором смотреть код нужно?
Ответ:

<ul>
<div id="foo">
  <li>You have cat to be kitten me right meow</li>
  <li>Eat plants, meow, and throw up</li>
  <li>my owner today cough furball into food bowl</li>
  <li>I shredded your linens for you</li>
 </div>
  <li>Play time carefully drink from water glass</li>
  <li>jump on human and sleep on her all night long</li>
  <li>purr in the morning and then give a bite to every human around</li>
  <li>waking up request food, purr loud scratch the walls</li>
</ul>

Время получения 40000+ записей из таблицы offers = 0.2s

Вот такой код отрабатывается за 4s

то есть в цикле делается 40тыс запросов к таблице clients каждый из который выполняется за 0.0001 sec

вам точно надо прочитать про JOIN'ы чтобы одним запросом получить все нужные данные
https://www.w3schools.com/sql/sql_join.asp

getElementsByClassName() возвращает не ваш input, а живую HTML-коллекцию с единственным элементом. У коллекции нет свойства value.

- let input = document.getElementsByClassName('form-control');
+ const input = document.querySelector('input.form-control');

Разметку сохранять не надо, только данные. Разметка должна генерироваться из этих данных. А можно вообще хранить в корзине только id'шники, а с сервера запрашивать по ним информацию.