Двойная пошаговая анимация

В этой статье я хочу разобрать одну механику, которая позволит объединить несколько видов пошаговых анимаций в одной системе.

Мы рассмотрим способ, с помощью которого можно объединить два типа анимаций: фиксированную, при которой контент смещается по мере прокрутки страницы, и зацикленную — активирующуюся во время определённого действия.

<script>
$('.card-inside-1').appendTo('.card-wrapper-1 .tn-atom');
$('.card-inside-2').appendTo('.card-wrapper-2 .tn-atom');
$('.card-inside-3').appendTo('.card-wrapper-3 .tn-atom');
$('.card-inside-4').appendTo('.card-wrapper-4 .tn-atom');
$('.card-inside-5').appendTo('.card-wrapper-5 .tn-atom');
</script>

<style>
.card-inside-1, .card-inside-2, .card-inside-3, .card-inside-4, .card-inside-5 {
zoom: 1 !important;
}
</style>

Ну а для тех, кто хочет больше анимаций — предлагаю вашему вниманию Animation GSAP Edition.

Это пак из 15 готовых эффектов: от текстовых до 3D-анимаций, созданных с использованием библиотеки GSAP и пошаговой анимации.

Код, который используется в видео

id страницы шаблона: 70739665

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