bespoke-fxSlide 1

bespoke-fxSlide 2

Use defaults

bespoke.horizontal.from('article', {
  fx: true
});

bespoke-fxSlide 3

Custom global options

bespoke.horizontal.from('article', {
  fx: {
      direction: "horizontal",
      transition: "move",
      reverse: false
    }
});

bespoke-fxSlide 4

Set per slide options

<section>Slide 4</section>

bespoke-fxSlide 5

Direction: horizontal or vertical

<section data-bespoke-fx-direction="vertical">Slide 5</section>

bespoke-fxSlide 6

Run transition in reverse

<section data-bespoke-fx-reverse="true">Slide 6</section>

bespoke-fxSlide 7

Different transitions: move [default]

<section data-bespoke-fx-transition="move">Slide 7</section>

bespoke-fxSlide 8

Different transitions: move-fade

<section data-bespoke-fx-transition="move-fade">Slide 8</section>

bespoke-fxSlide 9

Different transitions: move-both-fade

<section data-bespoke-fx-transition="move-both-fade">Slide 9</section>

bespoke-fxSlide 10

Different transitions: move-different-easing

<section data-bespoke-fx-transition="move-different-easing">Slide 10</section>

bespoke-fxSlide 11

Different transitions: scale-down-out-move-in

<section data-bespoke-fx-transition="scale-down-out-move-in">Slide 11</section>

bespoke-fxSlide 12

Different transitions: move-out-scale-up

<section data-bespoke-fx-transition="move-out-scale-up">Slide 12</section>

bespoke-fxSlide 13

Different transitions: scale-up-up

<section data-bespoke-fx-transition="scale-up-up">Slide 13</section>

bespoke-fxSlide 14

Different transitions: scale-down-up

<section data-bespoke-fx-transition="scale-down-up">Slide 14</section>

bespoke-fxSlide 15

Different transitions: glue

<section data-bespoke-fx-transition="glue">Slide 15</section>

bespoke-fxSlide 16

Different transitions: flip

<section data-bespoke-fx-transition="flip">Slide 16</section>

bespoke-fxSlide 17

Different transitions: fall

<section data-bespoke-fx-transition="fall">Slide 17</section>

bespoke-fxSlide 18

Different transitions: newspaper

<section data-bespoke-fx-transition="newspaper">Slide 18</section>

bespoke-fxSlide 19

Different transitions: push

<section data-bespoke-fx-transition="push">Slide 19</section>

bespoke-fxSlide 20

Different transitions: pull

<section data-bespoke-fx-transition="pull">Slide 20</section>

bespoke-fxSlide 21

Different transitions: fold

<section data-bespoke-fx-transition="fold">Slide 21</section>

bespoke-fxSlide 22

Different transitions: unfold

<section data-bespoke-fx-transition="unfold">Slide 22</section>

bespoke-fxSlide 23

Different transitions: room

<section data-bespoke-fx-transition="room">Slide 23</section>

bespoke-fxSlide 24

Different transitions: cube

<section data-bespoke-fx-transition="cube">Slide 24</section>

bespoke-fxSlide 25

Different transitions: carousel

<section data-bespoke-fx-transition="carousel">Slide 25</section>

bespoke-fxSlide 26

Different transitions: sides

<section data-bespoke-fx-transition="sides">Slide 26</section>

bespoke-fxSlide 27

Different transitions: slide

<section data-bespoke-fx-transition="slide">Slide 27</section>

bespoke-fxSlide 28

Credits

Original concept & code from Codrops CSS Page Transitions article
Bespoke.js DIY Presentation Micro-Framework by Mark Dalgleish
Bespoke-fx by Tim Churchward