cycjimmy / swiper-animation

Easier way to run animations on swiper.

Swiper Animation

• Easier way to run animations on swiper. (Demo)
• swiper-animation has been renamed to @cycjimmy/swiper-animation for scoped NPM package.

Install

# via npm
$ npm install @cycjimmy/swiper-animation --save

# or via yarn
$ yarn add @cycjimmy/swiper-animation

Usage

Swiper Animation based on Swiper. Add Script of swiper in your project first.

import SwiperAnimation from '@cycjimmy/swiper-animation';

# OR
const SwiperAnimation = require('@cycjimmy/swiper-animation');

// use swiper 3.x
const swiperAnimation = new SwiperAnimation();
const mySwiper3 = new Swiper('.swiper-container', {
  onInit: function(swiper) {
    swiperAnimation.init(swiper).animate();
  },
  onSlideChangeEnd: function(swiper) {
    swiperAnimation.init(swiper).animate();
  }
});

// use swiper 4+
const swiperAnimation = new SwiperAnimation();
const mySwiper4 = new Swiper('.swiper-container', {
  on: {
    init: function () {
      swiperAnimation.init(this).animate();
    },
    slideChange: function () {
      swiperAnimation.init(this).animate();
    }
  }
});

Add attribute on elements you want animated.

<div 
  data-swiper-animation="animate__fadeIn" 
  data-duration=".5s" 
  data-delay="1s" 
  data-swiper-out-animation="animate__fadeOut"
  data-out-duration=".2s"
>Animation</div>

• data-swiper-animation: [Option] Animation class name for entering slide.
• data-swiper-animation-once: [Option] One-time Animation class name for entering slide.
• data-duration: [Option] Set animation-duration. Default: .5s.
• data-delay: [Option] Set animation-delay. Default: .5s.
• data-swiper-out-animation: [Option] Animation class name for leaving slide. Delay for leaving Animation is not supported.
• data-out-duration: [Option] Set animation-duration for leaving slide. The value must be less than .5s. Default: .5s.

Animation Effect

• Recommended Animate.css
• Other Animation lib
• Custom animation

Use in browser

<link href="animate.min.css" rel="stylesheet">
<link href="swiper.min.css" rel="stylesheet">

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn">Slider1</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn" data-duration=".5s">Slider2</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn" data-duration=".5s" data-delay="1s">Slider3</div>
    </div>
  </div>
</div>

<script src="swiper.min.js"></script>
<script src="swiper-animation.min.js"></script>
<script>
  // use swiper 3.x
  var swiperAnimation = new SwiperAnimation();
  var mySwiper3 = new Swiper('.swiper-container', {
    onInit: function(swiper) {
      swiperAnimation.init(swiper).animate();
    },
    onSlideChangeEnd: function(swiper) {
      swiperAnimation.init(swiper).animate();
    }
  });

  // use swiper 4+
  var swiperAnimation = new SwiperAnimation();
  var mySwiper4 = new Swiper('.swiper-container', {
    on: {
      init: function () {
        swiperAnimation.init(this).animate();
      },
      slideChange: function () {
        swiperAnimation.init(this).animate();
      }
    }
  });
</script>

CDN

To use via a CDN include this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/swiper-animation@6/dist/swiper-animation.umd.min.js"></script>

Earlier Version

• v1

swiper-animation's Issues

Uncaught (in promise) TypeError: Cannot read property 'wrapperEl' of null

Firstly, thanks for your good plugin! Init the page, this bug is show, but animations features are working... so , this bug can be ignored? thanks!

trigger the animation just one time

Hi, thank for your script. It works great. But sometimes I use swiper in freemode, and I would like to trigger the animation just one time (the first one). ie. when it leaves the current active slide, the object disappears. And it is wrong for me. So is there a way to do this job with your script ?
Thx a lot

Animate Once Feature

It would be great to have an attribute like this:

data-animate-once: true/false or a custom number of animation must be played.

THX

New version Animate.css

Hi, new Animate.css released. Сan u add support new version of animate.css
Thanks

[Feature Request] multiple animations support?

I want to add the multiple animation to an element, now the swiper-animation only support only one animation when the swipper enter or leave the page

can you please support running multi animations?(first animation ends, the next animation runs)

支持swiper 8.4.6吗？

我使用[email protected]和"@cycjimmy/swiper-animation": "^6.0.2"，报错如下

swiper-animation.esm.js:321 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
at _default2._updateActiveElements (swiper-animation.esm.js:321:118)
at swiper-animation.esm.js:309:36

Promise Is Undefined in Internet Explorer 11

Any idea what would cause the Internet Explorer console to generate this error?

'Promise' is undefined

using Swiper 4.2.2

Let me know if you need anymore information. Thanks!

slideChange doesn't work

Hello! Does not work "on slideChange". On init everything is ok.
I don't see this method in the file src/index.js.

Swiper 4.5.0, Animate.css

index.html.zip
script.js.zip

This will not work when loop is enabled

Hi there! Thanks for this ! However, recently I found out that when using loop, this will not work anymore.

Back animation

Everything works fine, but there is no back animation. So if anyone want to animate an element - it works, but then the slide is changes, the animated element just DISSAPEARING, without "roll back animation function", if you know that i mean.

I've done this with a css:

.ANIMATED-ELEMENT {
  color: #fff;
  transition: all .1s cubic-bezier(0.215, 0.61, 0.355, 1) .1s;
  -webkit-transform: translate3d(-20%, 0, 0);
          transform: translate3d(-20%, 0, 0);
  opacity: 0;
}

.swiper-slide.swiper-slide-active .ANIMATED-ELEMENT {
  transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) .5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}

So, as you can see, there will be a fast back animation, then the slide becomes UNactive and will lose his .swiper-slide-active class. Can you make IN animation and OUT animation?

Support for Swiper's `slidesPerView` property

Is your feature request related to a problem? Please describe.
The library doesn't work work when the value of slidesPerView is bigger than 1, it will display and animate only the first element

Describe the solution you'd like
Ability to animate all slides in the view.

Additional context

Swiper Animation: Cannot read property 'isRecovery' of undefined

Describe the bug
Cannot read property 'isRecovery' of undefined

To Reproduce
It will occurs runtime or change the orientation then reproduce this issue.

Screenshots

animation stop working after going to another route in vuejs project

I'm working on vuejs project so I use vue-awesome-swiper
when I navigate to another route and then go back, the animation stops sorking and I get this error in console on every slide change