ReactAwesome Slider

<AwesomeSlider/>~7KB compressed

React Awesome Slider is a 60fps, extendable, highly customisable, production ready javascript react component that renders an animated set of UI gallery sliders.

Fold Animation

Netflix — Stranger Things

Fold Animation Styles

For this example we're importing the fold-out-animation style modules.

.jsx
import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/fold-out-animation.scss';

const Slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <div data-src="/path/to/image-0.jpg" />
    <div data-src="/path/to/image-1.jpg" />
    <div data-src="/path/to/image-2.jpg" />
    <div data-src="/path/to/image-3.jpg" />
  </AwesomeSlider>
);

Styling the fold animation

The animation exit styling on the fold-animation .scss file is pretty straight forward. We just apply the folding translate + rotation on exit moveLeft and exit moveRight classes. Checkout the full style source here.

.scss
.aws-sld {
  --fold-out-perspective: 2000px;
  --fold-out-angle: 90deg;

  &__container {
    perspective: var(--fold-out-perspective);
  }

  &--exit {
    &.aws-sld--moveLeft,
    &.aws-sld--moveRight {
      transform-style: preserve-3d;
    }
    &.aws-sld--moveLeft {
      transform-origin: 100% 50%;
      animation: foldLeft var(--slider-transition-duration) both
        var(--transition-bezier);
    }
    &.aws-sld--moveRight {
      transform-origin: 0% 50%;
      animation: foldRight var(--slider-transition-duration) both
        var(--transition-bezier);
    }
  }
}

@keyframes foldLeft {
  from {
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
  to {
    transform: translate3d(-100%, 0, 0)
      rotateY(calc(var(--fold-out-angle) * -1));
  }
}

@keyframes foldRight {
  from {
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
  to {
    transform: translate3d(100%, 0, 0) rotateY(var(--fold-out-angle));
  }
}

Customisation

Basic customization through the component's props and CSS custom-properties.

Source

Component's global props

organicArrows
true
bullets
true
fillParent
false

CSS Custom Properties

General

slider-height-percentage
60%
slider-transition-duration
770ms

Arrows

organic-arrow-thickness
4px
organic-arrow-border-radius
0px
organic-arrow-height
40px
organic-arrow-color
#6a6a6a

Controls

control-button-width
10%
control-button-height
25%
control-button-background
transparent
control-bullet-color
#6a6a6a
control-bullet-active-color
#6a6a6a

Loader Bar

loader-bar-color
#851515
loader-bar-height
6px