Як додати власну анімацію в інтеракції

Крок 1: Додайте нову опцію за допомогою хука esl/setup/control_options

Документація до хуків: https://academy.eslengine.io/article/filter-esl-setup-control_options/

add_filter( 'esl/setup/control_options', function( $options ) {// Додайте власну анімацію в animationTypes// Зверніть увагу, що ключ дуже важливий, він повинен бути унікальним$options['animationTypes']['myAnim1'] = esc_html__( 'Моя анімація 1', 'esl' );return $options;}, 10 );

Власну анімацію додано до випадаючого списку “Анімація” інтеракції

Крок 2: Додайте CSS для анімації

Коли інтеракцію встановлено, Esl призначить клас елементу, використовуючи ваш ключ анімації (myAnim1 в нашому прикладі), і він буде з префіксом eslcms-animate-.

Все, що вам потрібно зробити, це створити CSS клас, який задає ім’я анімації для вашого елемента, разом із відповідними ключовими кадрами для вашої анімації. Ви можете розмістити цей CSS у Esl > Налаштування > Користувацький код > Користувацький CSS.

.eslcms-animate-myAnim1 {animation-name: my-anim-1;}@keyframes my-anim-1 {0% {animation-timing-function: ease-in;opacity: 0;transform: translateY(-250px);}38% {animation-timing-function: ease-out;opacity: 1;transform: translateY(0);}55% {animation-timing-function: ease-in;transform: translateY(-65px);}72% {animation-timing-function: ease-out;transform: translateY(0);}81% {animation-timing-function: ease-in;transform: translateY(-28px);}90% {animation-timing-function: ease-out;transform: translateY(0);}95% {animation-timing-function: ease-in;transform: translateY(-8px);}100% {animation-timing-function: ease-out;transform: translateY(0);}}

Тепер ви можете використовувати цю нову анімацію на будь-якому елементі з панелі “Інтеракції”.