Кастомная анимация появления

Masonry — это библиотека для создания сеток с динамическим расположением элементов, которая автоматически выстраивает элементы по вертикали, минимизируя пустое пространство. Стандартное поведение Masonry обеспечивает базовую анимацию перестройки элементов при добавлении, удалении или изменении размеров. Однако для создания уникального визуального опыта часто требуется кастомная анимация появления элементов.

Для этого используется сочетание CSS-анимаций, JavaScript-событий и методов Masonry, таких как layout, appended и prepended. Важно понимать, что Masonry управляет позицией элементов через inline-стили transform и top/left, поэтому кастомные анимации должны корректно взаимодействовать с этими изменениями.

Подготовка элементов для анимации

Для начала необходимо задать элементам исходное состояние, с которого будет выполняться анимация. Чаще всего используется комбинация прозрачности и смещения:

.grid-item {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.grid-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Ключевые моменты:

  • opacity: 0 и transform: translateY(30px) создают эффект появления снизу.
  • Переход transition задаёт продолжительность и плавность анимации.
  • Класс .is-visible применяется динамически через JavaScript после размещения элементов Masonry.

Использование методов Masonry для кастомной анимации

После добавления элементов в контейнер Masonry важно корректно их визуализировать. Для этого применяется метод appended:

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

// Добавление новых элементов
const newItems = document.createElement('div');
newItems.classList.add('grid-item');
newItems.innerHTML = 'Новый элемент';
grid.appendChild(newItems);

// Сообщаем Masonry о новых элементах
msnry.appended(newItems);

// Запускаем кастомную анимацию после layout
requestAnimationFrame(() => {
  newItems.classList.add('is-visible');
});

Примечания:

  • requestAnimationFrame гарантирует, что анимация запускается после того, как браузер применил новые позиции Masonry.
  • Метод appended не только добавляет элементы в сетку, но и пересчитывает их позиции.

Анимация нескольких элементов одновременно

Если необходимо анимировать группу элементов, удобнее использовать перебор с задержкой для создания эффекта последовательного появления:

const items = document.querySelectorAll('.grid-item:not(.is-visible)');
items.forEach((item, index) => {
  setTimeout(() => {
    item.classList.add('is-visible');
  }, index * 100); // задержка 100ms между элементами
});

Эффект:

  • Элементы появляются один за другим, создавая динамичное ощущение «волны».
  • Можно легко изменять интервал для ускорения или замедления анимации.

Реакция на изменение размера окна

При изменении размеров контейнера Masonry пересчитывает позиции элементов. Для сохранения корректной анимации стоит использовать событие layoutComplete:

msnry.on('layoutComplete', function(items) {
  items.forEach(item => {
    if (!item.element.classList.contains('is-visible')) {
      item.element.classList.add('is-visible');
    }
  });
});

Пояснение:

  • layoutComplete срабатывает после каждого пересчёта Masonry.
  • Можно отслеживать только новые элементы, чтобы не нарушить уже видимые.

Использование CSS-анимаций с ключевыми кадрами

Для более сложных эффектов появления применяются CSS keyframes. Например, эффект «всплытия с поворотом»:

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.grid-item.is-visible {
  animation: popIn 0.6s ease forwards;
}

Особенности:

  • forwards сохраняет конечное состояние после анимации.
  • Комбинация scale и rotate создаёт эффект объёмного появления.

Синхронизация анимаций с Masonry

Важно помнить, что Masonry управляет transform для позиционирования элементов. Чтобы кастомные анимации не конфликтовали с позиционированием:

  1. Использовать дополнительные вложенные элементы для анимации:
<div class="grid-item">
  <div class="grid-item-content">Содержимое</div>
</div>
.grid-item-content {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.grid-item-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}
  • Masonry будет управлять .grid-item, а .grid-item-content анимируется отдельно.
  • Это предотвращает конфликт с inline-стилями Masonry.
  1. Анимации можно комбинировать с событиями appended, prepended и layoutComplete для полного контроля.

Интерактивные эффекты при появлении

Для продвинутых сценариев кастомной анимации можно добавлять:

  • Случайные задержки для «органического» эффекта.
  • Разные направления появления (translateX, translateY, rotate).
  • Изменение скорости анимации в зависимости от позиции элемента в сетке.

Пример с рандомной задержкой:

items.forEach(item => {
  const delay = Math.random() * 300;
  setTimeout(() => item.classList.add('is-visible'), delay);
});
  • Элементы появляются хаотично, создавая эффект естественного распределения.

Эти методы позволяют полностью контролировать процесс появления элементов в Masonry, сочетая плавное позиционирование с разнообразными визуальными эффектами. Такой подход делает сетку более живой и адаптивной, подходящей для сложных интерфейсов и интерактивных галерей.

Оглавление