Custom animation on slide (image transitions) apart from slide

[solancer]

I'm trying to add 3 different types of animation for the image slide animation.

In the source I see that your setting a transition style can this be modified to achieve fade, zoom or any other animation transition on image slide?

   this.setState({
      previousIndex: currentIndex,
      currentIndex: nextIndex,
      offsetPercentage: 0,
      style: {
        transition: `transform ${this.props.slideDuration}ms fade-in`
      }
    });

[jordanoverbye]

+1

[xiaolin]

@solancer I've adjusted the transition property to be applied to all transitions in v0.7.15

   this.setState({
      previousIndex: currentIndex,
      currentIndex: nextIndex,
      offsetPercentage: 0,
      style: {
        transition: `all ${this.props.slideDuration}ms ease-out`
      }
    });

This way you can override the css classes and all transitions will take affect.

e.g. overriding the following css will allow you to add the fade affect

.image-gallery-slide {
  opacity: 0;
}
.image-gallery-slide.center {
  opacity: 1;
}

[nishtacular]

@xiaolin @solancer I tried adding the above css however, the image still slides in, i can see the image sliding out fading out. How can I replace the slide with the fade action. Appreciate any pointers.

[xiaolin]

@nishtacular you can adjust the transition to only transition on opacity removing the transform transition.

.image-gallery-slide {
  opacity: 0;
  transition: opacity 450ms ease-out !important;
}

This will remove the slide effect, and give you the fadeIn transition you want.

[solancer]

@xiaolin I've been experimenting with GASP and React and it seems to work flawlessly. By porting react-image-gallery's animation bit to GASP can make things very easy and extensible.

The main issue with the current setup is that css transitions cannot be combined and css keyframes animations are sh**t because it can't be declared and applied to an element on the fly. Even Reactjs -animations & Radium can't help.

The best way to go about is to use GASP TweenMax lib to add support for all kinds of animation.

It's no surprise that many image gallery plugins out there don't have support for more than 2-3 types of animations.

[xiaolin]

GSAP looks pretty cool, I'll take a look into adding more animations to the library when I get a chance. But most should be doable via css unless I'm missing something.

[xiaolin]

@solancer I'm curious what kinda issues you're having with keyframes? I was able to add keyframes using css and got some simple animations going

@keyframes blinker {
  from { opacity: 1; }
  to { opacity: .3; }
}
@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.image-gallery-slide.center {
    animation: spinner-rotate .4s cubic-bezier(.5, 0, 1, 1), blinker .4s cubic-bezier(.5, 0, 1, 1);
}

[solancer]

the project I'm working is a bit more complex, can't have classes or id selectors, only inline styling on refs. The problem with keyframes is that it needs to be applied onto an element class or id to work. GASP is the only thing that helped me do what I had intended.

[xiaolin]

Gotcha, cool. Glad you got it working!

[dmt0]

To get fade animation to work in the current version, CSS had to be slightly different from what's above:

.image-gallery-center {
  opacity: 1 !important;
}
.image-gallery-slide {
  opacity: 0;
  transition: opacity 450ms ease-out !important;
}