M
M
MonarchInc2020-06-12 22:15:01
Animation
MonarchInc, 2020-06-12 22:15:01

How to apply animation to active slide in Swiper.js using Textillate.js?

Good day.

The goal is to make the active slide animate the appearance of the text when changing the slide. After the slide changes and a new active slide appears, the same animation should also work on it.

How I tried to do it:
Hang the animation on the swiper's slideChange / transitionStart event, but alas, this approach did not work, because after the animation has completed, it stops repeating.

To animate the text, I used Textillate.js , found the required class and attached the animation to it:

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


I want to get the result approximately like in this slider example

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question