Запуск анимации Лотти при наведении курсора на родительский контейнер Avada

#javascript #wordpress #lottie

#javascript #wordpress #лотти

Вопрос:

Последняя версия Avada имеет возможность интегрировать анимацию Лотти. Один из триггеров, который вы можете использовать, — это навести курсор на изображение, и оно будет анимироваться. Это здорово, но в идеале было бы лучше навести курсор на контейнер, внутри которого находится анимация. Есть ли класс, который я могу добавить в контейнер? Пока это происходит, я заметил, что анимация останавливается при отпускании мыши, есть ли какой-нибудь способ заставить ее завершить цикл? На веб-сайте Avadas есть образец:

https://avada.theme-fusion.com/design-elements/lottie-animation-element/

Ответ №1:

Если кому-то еще это нужно, я просто растянул внешний элемент svg до полного размера моего контейнера.

 .container .fusion-lottie-animation {
    display: inline-block;
    position: absolute;
    height: 85%;
    width: 100%;
    margin: -20px;
    padding: 20px;
}


.cards-home .fusion-lottie-animation svg {
    width: 150px!important;
    height: 100px!important;
}