Как применить анимацию для активного слайда в Swiper.js с помощью Textillate.js?

Question

Доброго времени суток.

Задача состоит в том, чтобы при смене слайда активному слайду применялась анимация появления текста. После того как слайд смениться и появится новый активный слайд, на нем также должна отработать та же анимация.

Как я пытался сделать: Повесить на событие swiper'а slideChange/transitionStart срабатываение анимации, но увы, такой подход не подошел, так как после того как анимация отработает, она перестает повторяться. Более того , выполняется только при переходе на второй слайд и только для второго слайда, дальше все слайды статичные.

Для анимации текста использовал Textillate.js , нашел нужный класс и повесил на него анимацию:

mySwiper.on('slideChange', function() { 

$(function () {
  $('.tlt').textillate({
    in: {
      effect: 'fadeInUp'
    },
    loop: false,
  });
});

Результат хочу получить примерно как на данном примере слайдера

Answer 1

Решил проблему следующим образом:

Отключил автостарт у анимации.
Когда происходит событие transitionStart (slideChange тоже подойдет) запускаю textillate('start') для необходимого блока
В результате получаю вызов анимации при смене слайда.

var $tlt = $(".tlt").textillate({ autoStart: false, in: { effect: "fadeInUp" },});

Данное объявление позволяет нам в дальнейшем обращаться к нужному блоку и запускать на нем анимацию

$(".tlt").textillate({


 in: {
    effect: "fadeInUp",
  },
    autoStart: true,
    loop: false,
});

Тут мы автоматически запускаем анимацию для первого слайда при загрузке страницы.

mySwiper.on("transitionStart", function () {
  $tlt.textillate("start");
  $(function () {
    $(".tlt").textillate({
      in: {
        effect: "fadeInUp",
      },
      autoStart: false,
      loop: false,
      initialDelay: 300,
    });
  });
});

Благодаря событию Swiper'a вызываем анимацию для каждого нового слайда.

БЛОГ НА HUSL

Как применить анимацию для активного слайда в Swiper.js с помощью Textillate.js?

Ответы (1 шт):