CSS slide transitions for bespoke.js

Download the production version or the development version, or use a package manager.

View the demo at the official Bespoke-fx project page.

First, include both bespoke.js and bespoke-fx.js in your page.

Second, include the styles main.css and animations.css.

For example

<link rel="stylesheet" href="path/to/main.css">
<link rel="stylesheet" href="path/to/animations.css">

<article>
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>

<script src="bespoke.min.js"></script>
<script src="bespoke-fx.min.js"></script>
<script src="path/to/my/script.js"></script>

Then, simply include the plugin when instantiating your presentation.

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

You can set custom options during instatiating

bespoke.vertical.from('article', {
  fx: {
    direction: "vertical",
    transition: "cube",
    reverse: true
  }
});

note: italics indicate default.

Use data-bespoke-transition, data-bespoke-direction, and/or data-bespoke-reverse on a slide to override the global options.

This is useful when you want to transition a single slide in a different way to other slides.

eg.

<section data-bespoke-fx-transition="cube" data-bespoke-fx-direction="vertical" data-bespoke-fx-reverse="true">Slide</section>

$ bower install bespoke-fx

$ npm install bespoke-fx

The bespoke-fx npm package is designed for use with browserify, e.g.

require('bespoke');
require('bespoke-fx');

This plugin was built with generator-bespokeplugin. Inspired by a Codrops article (see demo)

MIT License