Hi, I'm Spicr!

Modern content showcase plugin

Spicr is a freemium content showcase component featuring multi-layer slider and carousel, and is powered by KUTE.js for hardware accelerated and super smooth animations.

Download NPM CDN

Solid build and easy to use

The HTML markup required is familiar and straight forward, it alows you to set all your slider animation settings via DATA API. No coding knowledge required, no need for CSS3 transitions.

ES6/ES7 and SCSS Sources

The component was developed on ES6/ES7 JavaScript standard for the modern web and comes packed with solid build tools. The SCSS sources provide the basic layout design for flexible design.

Likes most browsers

Thanks to KUTE.js, Spicr has some built in functions to provide smooth translate, rotate, scale and opacity transitions on modern browsers. Thanks to polyfills and custom builds, Spicr supports most legacy browsers.

High performance

Also thanks to KUTE.js, Spicr delivers at least 60 frames per second animations on modern browsers. All that powered by modern, clean, modular and high performance JavaScript code, developed for scalable and snappy applications.

What's crazy about it?
IT IS FREE!

That's right! Spicr is licensed under MIT License and this means you can use it for both personal and commercial purpose as long as you show proper credits to the original author. Yey!

Spicr Features

Built on ES6/ES7 JavaScript standard

Spicr was developed with native JavaScript and does not depend on JavaScript libraries like jQuery, Zepto or anyother, except KUTE.js.

Smooth transitions

Thanks to our very own KUTE.js, a flexible and powerful animation engine, Spicr can deliver smooth transitions with high frame rate.

Great browser support

Thanks to the flexibility of Spicr, KUTE.js and polyfills available, you can do a lot more to showcase content even with IE9.

Multiple use focus

When using proper classes and the right markup, you can do full width sliders, carousels, newslines, tabs, all with minimal scripting.

Works with popular CSS frameworks

Spicr is a fork of our own Carousel for Bootstrap, inheriting it's basic prototype and required markup, but providing and a wide range of animation options.

Comes with SCSS sources

Spicr comes with SCSS source so you can quick&easy adapt the styling to your project. Also there are a set of variables you can play with, just to get things right.

Powerful DATA API

All animation, easing, control is handled by powerful API system.

Developer friendly license

Spicr is released under MIT License.

Spicr Usage

Install from NPM

Spicr is available via the npm clouds, just type in:

npm install spicr

Load from CDN

Thanks to jsdelivr we have a CDN link, so drop these lines in your site <head> to load the CSS:

<link type="text/css" href="https://cdn.jsdelivr.net/npm/spicr/dist/css/spicr.min.css" rel="stylesheet">

To load the script files, you have several options, for instance you can load the KUTE.js and Spicr before your ending </body> tag. Spicr latest releases come here and for KUTE.js here.

<script src="https://cdn.jsdelivr.net/npm/kute.js/dist/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spicr/dist/js/spicr.min.js"></script>

Alternativelly, you can include the standalone version:

<script src="https://cdn.jsdelivr.net/npm/spicr/dist/js/spicr-standalone.min.js"></script>

For best performance you should link the script(s) in the <body>, but the script should still work fine in the <head> as well.

Working locally

If you host the files on your project folders, download the Spicr package at github, and KUTE.js, unpack them, copy the files from both the dist folder into your application's assets folder.

First, to load the CSS file drop this line in your site <head>:

<link type="text/css" href="../assets/css/spicr.min.css" rel="stylesheet">

Next, to load the JavaScript files, simply drop these lines before your ending </body> tag.

<script src="../assets/js/kute.min.js"></script>
<script src="../assets/js/spicr.min.js"></script>

Or include the standalone version:

<script src="../assets/js/spicr-standalone.min.js"></script>

Legacy Browsers

You can enable IE10+ browsers out of the box, however for IE9+ there are a series of polyfills and CSS fallbacks, not included with the default distribution files, make sure to check out the wiki. Below you have a sample usage of the included polyfill:

<script src="https://cdn.jsdelivr.net/npm/spicr/dist/js/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js/dist/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spicr/dist/js/spicr.min.js"></script>

Below you have several examples of markup you can use to create your spicy content.

Spicr JavaScript API

Public Methods

The Spicr component exposes a seriers of public methods you can call to interact with the initialization instance:

.slideTo(Number) - allows you to jump to the item you want by specifying its index.
.cycle() - jumps to the next item, usually to the item with higher index, or first if the current active item is last.
.getActiveIndex() - returns the current active item index.
.dispose() - resets all animation and removes the Spicr initialization from the target.

Instance Options

The Spicr component allows you to set various options via JavaScript, some are exclusive to the JavaScript API, others are common with the DATA API. Once you've set your Element class, it will expect specific options and the entire execution is dictated by the combination of the following options:

interval | Number or false - allows you to enable / disable automatic transition by setting a delay value in miliseconds. This option can be set via DATA API with the data-interval attribute. The default value is 5000.
touch | boolean - allows you to enable / disable next / previous navigation with touch events on mobile devices. This option can be set via DATA API with the data-touch attribute. The default value is true.
pause | string or false - option to pause automatic transition. This option can be set via DATA API with the data-pause attribute. The default value is hover which will pause the automatic transition on mouse hover.
duration | Number - allows you to set transition duration in miliseconds for .spicr-carousel instances. This option can be set via DATA API with the data-duration attribute. The default value is 500.
delay | Number - allows you to set transition delay in miliseconds for .spicr-carousel instances. This option can be set via DATA API with the data-delay attribute. The default value is 150 and usually this applies in a stagger effect. For instance, with the default value, on .spicr-carousel items with multiple .spicr-layer Elements, the delay value for each layer goes like this 0, 150, 300, 450, etc.
easing | string - allows you to set the transition timing function for .spicr-carousel instances. This option can be set via DATA API with the data-easing attribute. The default value is easingCubicOut.

Keep in mind that JavaScript set options have higher priority over DATA API set options.

Spicr DATA API

While for .spicr-carousel you can set all animation settings on the target Element itself, for .spicr-slider you can set all animation settings to the spicr-layer Elements individually. Some of these animation settings are exclusively for DATA API.

Component Options API

data-function attribute exposes the .spicr Element to the Spicr component initialization.
data-touch attribute enables/disables the navigation via the touch swipe events for the target Element only on mobile devices. The default value is true.
data-interval attribute enables the automatic transition when a Number is provided or disables it when set to false. The default value is 5000 miliseconds.
data-pause attribute enables the hover / touchstart event handlers to pause the initialization on triggering these events. When paused the initialized Element also has the paused class. To disable this functionality, the attribute can be set to false. The default value is hover and also apply to mobile devices.

Supported Properties

data-translate attribute allows you to set the translation for .spicr-layer on all X, Y and Z axes for all layers of a .spicr-carousel Element or each layer of a .spicr-slider Element. Example: data-translate="x:50%,y:200,z:150".
data-rotate attribute allows you to set the rotation for .spicr-layer on all X, Y and Z axes for all layers of a .spicr-carousel Element or each layer of a .spicr-slider Element. Example: data-rotate="x:90,y:360,z:180". The legacy builds will only work with the Z axis on IE9.
data-scale attribute allows you to set the scale for .spicr-layer for all layers of a .spicr-carousel Element or each layer of a .spicr-slider Element. Example: data-scale="2.5". While the transformMatrix component technically supports scale3d, Spicr will only provide one scale value for all axes and we never found any need to implement an independed all three axes support for scale so far.
data-opacity attribute allows you to remove opacity animation for all layers of a .spicr-carousel Element or each layer of a .spicr-slider Element. The default value is true which means that the layer (or all .spicr-carousel layers) always animate the opacity property; Example: data-opacity="false" will disable opacity animation for that specific layer or .spicr-carousel instance.
data-transform-origin attribute allows you to set a transformOrigin for all layers of a .spicr-carousel Element or each layer of a .spicr-slider Element. This functionality is unique as it allows you to set percentage based values for all axes, and Spicr will then calculate the pixel values based on the .spicr-layer Element, something that cannot be done with CSS3 or other similar scripts. In addition, you can specify on which axis to compute the Z value of the transform-origin. Example: data-transform-origin="z:50% will use the default value of 50% for X and Y axes, and for Z will compute 50% of the width of the layer; setting data-transform-origin="z:50%v will compute the Z axis based on the height of the layer (v for vertical).

Animation Settings

data-duration attribute allows you to set the duration for all the .spicr-layer animation of a .spicr-carousel Element or each layer of a .spicr-slider Element. If not set, the defaultDuration of 500ms is used.
data-delay attribute allows you to set the delay for all the .spicr-layer animation of a .spicr-carousel Element or each layer of a .spicr-slider Element. If not set, the defaultDelay of 250ms is used. When the layer is a child of a .spicr-slider Element, this delay value is ignored when animating layers of the current active item out of view. When set on a .spicr-carousel Element, this value is used to create a stagger effect for all the .spicr-layer elements depending on the slide direction: if sliding left, delays are 0, 150, 300, etc, or when sliding right, the values are 300, 150, 0.
data-easing attribute allows you to set the easing for all the .spicr-layer animation of a .spicr-carousel Element or each layer of a .spicr-slider Element. If not set, the defaultEasing of easingCubicOut is used. When animating in, the layer will use the "Out" version of the function and "In" when animating out of view, but the "InOut" is never modified.

Spicr SCSS

The Spicr Main Style

The Spicr component provides SCSS sources for its basic layout and its most essential styling in the src/scss/spicr.scss file.

@import 'functions', 'variables';

@import 'spicr-base';
@import 'spicr-slider';
@import 'spicr-carousel';

spicr-base provides the absolute basic layout of the component;
spicr-slider provides the .spicr-slider styling;
spicr-carousel provides the .spicr-carousel styling.

SCSS Variables

The basic styling is really basic, it only needs a couple of variables.

// component own variables
$slider-height: 600px !default;
$slider-color: rgba(255,255,255,0.75) !default;
$slider-heading-color: #fff !default;
$arrow-width: 30px !default;

$slider-height sets the .spicr-slider height; You can use units like vh on modern browsers or px based values for legacy browsers;
$slider-color sets the .spicr-slider text color;
$slider-heading-color sets the .spicr-slider heading colors;
$arrow-width sets the size for icons used by the navigation.

Content Styling

The Spicr component only provides the styling for its basic layout and for the purpose of this demo, we've used some stuff from Bootstrap:

reboot a nice style reset for modern browsers;
flex provides the flexbox styling; for our demo here, we've created some display: table fallbacks for IE9;
container wraps all content in a nice padded column;
grid provides the rows and column styling;
other styling for spacing, dimensions, alignment, 3D perspective, etc.

Spicr Code Examples

ES5 Example

Once you've loaded the component's script file into your document, it's ready to play:

// initialize 
let mySpicrInit = new Spicr('target',options)

ES6/ES7 Example

Spicr requires KUTE.js, so there might be more files to import:

// import the default Spicr distribution
// this requires the KUTE.js loaded before the execution of this script 
import Spicr from 'spicr'

// initialize 
let mySpicrInit = new Spicr('.slider-target',{
  interval: 7000,
  pause: false,
  // other animation options are set via DATA API on each spicr-layer Element
}})

In other cases you can also use one of the standalone versions which already include a specific KUTE.js build:

// import the standalone Spicr distribution
import Spicr from 'spicr/src/standalone.js'

// or the legacy standalone, designed for legacy browsers IE9+
import Spicr from 'spicr/src/standalone-legacy.js'

// or the matrix standalone, designed for IE10+, Firefox and all Webkit browsers
import Spicr from 'spicr/src/standalone-matrix.js'

// initialize with options
let mySpicrInit = new Spicr('.carousel-target',{
  duration: 700,
  interval: 7000,
  pause: false,
  easing: 'easingCircularOut'
  // other animation options are set via DATA API
}})

Using Instance Methods

As mentioned before, the Spicr initialization object is attached to the target element, giving you instant access to its public methods:

// get one of the initialization targets
let mySpicr = document.getElementById('mySpicr');

// access the initialization
let mySpicrInit = mySpicr.Spicr;

// get the current active index
let currentActiveIndex = mySpicrInit.getActiveIndex();

// jump to a specific item
mySpicrInit.slideTo(2);

// animate to the next item
mySpicrInit.cycle();

Dynamic Content

For dynamic content, Spicr exports a special callback initComponent(container) you can use with various events like turbolinks:load or other events to initialize new targets appended to a container or the entire document.

// get the main container
let mainContainer = document.getElementsByTagName('main');

// attach event
document.addEventListener('turbolinks:load',function(){
  Spicr.initComponent(mainContainer)
});

Spicr Slider

The slider functionality is designed to showcase more media content rather than text content, and its functionality is geared towards wide screens, with animation control for any and all content items. You can use what ever markup structure you want, make use of any content classes you see fit, the component's layout design has no limitation, except it must always have the same height for its items.

As previously stated, the animation settings are set to the .spicr-layer Elements individually, and they apply to the animation when coming into view, however, on coming out of view, they use the settings of the next .item-bg Element to create a seamless transition. If the next background is not found, or it doesn't have the .spicr-layer class, the layers animating out of view will use their own animation settings.

Slider Basic Markup

The very first example on this page is a .spicr-slider instance, showcasing some of the component capability. The basic slider markup is designed to be simple, effective and allow for maximum content flexibility:

<!-- spicr-slider basic markup -->
<div data-function="spicr" class="spicr spicr-slider" data-interval="false" data-touch="false">
  <div class="spicr-inner">
    <div class="item active">
      <!-- item content -->
    </div>
    <div class="item">
      <!-- item content -->
    </div>
  </div>
  <!-- pages navigation -->
  <ol class="spicr-pages">
    <li data-slide-to="0" class="active"></li>
    <li data-slide-to="1"></li>
  </ol>
  <a class="left spicr-control" data-slide="prev"></a>
  <a class="right spicr-control" data-slide="next"></a>  
</div>

Markup breakdown and attribute specifications:

The data-function="spicr" attribute enables the Spicr automatic initialization for your Element.
The .spicr-slider class dictates how the layer animation works. This means that the animation DATA API is expected from all .spicr-layer Elements. If no .spicr-layer element is found, the component will still go to the next item.
The first <div class="item"> must always be active, which means having the active class or else Spicr will animate its layers and make it active on initialization.
The slider instance expects to use a fixed height for its items and a flexbox container for their contents, but you can override anything with classes from other HTML frameworks like Bootstrap or Foundation, as the Spicr component itself doesn't include this kind of styling in its default CSS files.
Generally the .spicr-slider instance knows it must animate first a background .item-bg.spicr-layer Element if found, then other content items with .spicr-layer class.
The first element of the <div class="spicr-pages"> must be active, means having the active class.
The data-interval is either false or an integer number, the default value is 5000ms.
The data-touch is either true or false, the default value is true.
The .spicr-pages Element or .spicr-control Elements provide navigation to your initialization, first allows users to jump to a certain item and the second allows the user to slide items back and forth. At least one of the two is recommended to be used so that users can have a way to interact and read the desired content. This is where you can get very creative.

Slider Item Markup

The following markup is a sample slider .item:

<div class="item active">
  <!-- this is the background layer -->
  <div class="item-bg spicr-layer" style="background-image: url(..);"
       data-scale="1.5" 
       data-duration="700" data-easing="easingCubicOut"></div>
  <!-- you can use any container -->
  <div class="container">
    <!-- you can also use a flexbox container -->
    <div class="d-flex align-items-center h-100 perspective">
      <!-- this is the the content spicr-layer, with some sample settings -->
      <div class="spicr-layer" 
           data-translate="y:250" data-rotate="z:15" 
           data-duration="800" data-delay="200" data-easing="easingBackOut">
        <!-- valid HTML goes here -->									  
      </div>
    </div>
  </div>
</div>

Markup breakdown and attribute specification:

The .item-bg is for background for your item, it can also become an animation layer by adding the spicr-layer class and automatically works with animation options set via DATA API. The background layer is not animating out, for performance reasons.
As shown in the above sample code, you can use any container for your content and layers, while for the first parent of each layer you can also set a perspective class, in case your layer needs to animate 3D transform functions.
As suggested by the above sample code, the item markup is not constrained by any rule, you can use any container, flexbox, alignment, etc. Anything you need to create a nice visual experience.
The .spicr-layer contained can use any and all the above DATA API options to set animation.

Slider Example

Based on the above sample codes, let's have a quick demo:

Translation

This item can do translations.

Rotation

This item can do rotations.

No animation set

This item has no settings, it will only fade.

Disabled all animations

This item has layers but all use the data-opacity="false" attribute.

No layer

This item has no layer.

No background

This item has no background.

« »

For this demo we've bypassed the default $slider-height:600px; by using a h-100 class for the <div class="item"> and other wrappers and set a fixed height of 33vh to the target <div class="spicr-slider"> Element. The demo also showcases how the .spicr-slider instance handles various cases of incomplete settings or incorrect markup without crashing or any error.

If you inspect the markup demo you will also discover other gems like flexbox, alignments, spacing and other goodies.

Spicr Carousel

The carousel functionality is different in many ways, first of all, it was designed to deal with text-content, text blocks and handles the layer animation the same for all layer, except when a delay is set, it will produce a stagger effect. The Usage Section of this page is a carousel instance.

When the current active and the next active item have different heights, the carousel instance will make a nice transition from the current height to the height of the next active item. For this reason, the default overflow of the .spicr-carousel is hidden, but you can override that too, as we will see in a later example.

Carousel Markup

The required markup to create a carousel is similar but the animation DATA API apply to the target Element itself, so let's have a look:

<!-- spicr-carousel basic markup -->
<div class="spicr spicr-carousel" data-function="spicr" data-interval="false" data-touch="false"
     data-duration="700" data-delay="200" data-easing="easingCircularInOut" 
     data-translate="x:100%" data-rotate="x:90">
  <div class="spicr-inner">
    <div class="item active">
      <!-- item content -->
    </div>
    <div class="item">
      <!-- item content -->
    </div>
  </div>
  <!-- pages navigation -->
  <ol class="spicr-pages top-right">
    <a data-slide="prev"></a>
    <a data-slide="next"></a>
  </ol>
</div>

Markup breakdown and attribute specifications:

The data-function="spicr" attribute enables the Spicr automatic initialization for your Element.
The .spicr-carousel class dictates how the layer animation works. This means that the animation DATA API is expected from the target .spicr-carousel Element and apply to all child .spicr-layer Elements. If no .spicr-layer element is found, the component will still go to the next item.
The .spicr-carousel Element uses all DATA API attributes, but the coordinates for translation and transform-origin are based on each individual layer.
The first <div class="item"> must always be active, which means having the active class or else Spicr will animate its layers and make it active on initialization.
The data-interval is either false or an integer Number, the default value is 5000ms.
The data-touch is either true or false. For .spicr-carousel instances this option can be disabled to avoid confusing the user. The default value is true.
The <div class="spicr-pages"> can use either elements with data-slide-to="Number" attribute or the data-slide="next/prev" attribute or both types as we will see in an example soon. In addition, the component provides positional classes like bottom-left or top-right to be used for your carousel instance navigation.

Carousel Item Markup

Remember that carousel expects to animate more text content rather than media, in the examples below we're going to try and showcase the best use cases. OK now it's time to take a look at a sample carousel item markup.

<div class="item active">
  <!-- you can use any container -->
  <div class="container perspective">
    <!-- this is the the content spicr-layer, with some sample settings -->
    <div class="spicr-layer">
      <!-- valid HTML goes here -->
    </div>
  </div>
</div>

Markup breakdown and attribute specifications:

The .spicr-layer doesn't have any DATA API attributes, but will inherit them all from the parent .spicr-carousel Element.
You can again use any type of markup structure you want, flexbox or not, but remember it's main functionality.

Carousel Demos

No animation set

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

No layer found

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Not even opacity

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Example breakdown:

As the title of the first item suggests, this example uses no animation setting, and even disables the opacity transition via the data-opacity="false" attribute. This is to verify the component's reliability in various scenarios, when no transition is set, no layer is found and most importantly no error in the console.
In this demo we've used the top-right position class for the <div class="spicr-pages"> Element.
The component provides basic styling for icons to be used for the <div class="spicr-pages"> elements, the .spicr-icon class.

This is a basic slide

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

This is a basic slide

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

This is a basic slide

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Example breakdown:

This example showcases a basic, classic horizontal slide animation via the data-translate="x:100%" attribute.
For this demo we've also removed the opacity transition via the data-opacity="false" attribute.
This is a case where you want to keep the overflow: hidden for your .spicr-carousel Element.

This is cube animation

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Nullam id dolor id nibh ultricies vehicula ut id elit.

This is cube animation

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

This is cube animation

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec id elit non mi porta gravida at eget metus.

This is cube animation

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Nullam id dolor id nibh ultricies vehicula ut id elit.

This is cube animation

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

This is cube animation

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec id elit non mi porta gravida at eget metus.

Example breakdown:

For these two demos we've set a different overflow via the overflow-visible class, for better visual presentation.
This first example showcases a cube animation with the data-rotate="y:90" and data-transform-origin="z:-50%" attributes, the animations looks like the items form a cube in front of the viewer.
This second example showcases a cube animation with the data-rotate="x:90" and data-transform-origin="z:50%v" attributes, the animation looks like the items form a cube around the viewer.
For this kind of setup you might want to use a fixed height, a vw based line-height for your .spicr-carousel items or a combination of both, to make sure they always have the same size to produces a consistent animation.

Multi layer carousel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Doing stagger animation

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

With Content Elements

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

The simplest example

Cras justo odio, dapibus ac facilisis in, egestas id elit non mi porta gravida at eget metus.

The simplest example

Donec id elit non mi porta gravida at eget dolor id nibh ultricies vehicula ut id elit.

The simplest example

Cras justo odio, dapibus ac facilisis in, donec id elit non mi porta gravida at eget metus.

Example breakdown:

This demo showcases how the component works with the data-delay attribute on a multi-layer .spicr-carousel Element. It creates a stagger effect back and forth depending on the slide direction.
The data-rotate="y:90" and data-transform-origin="z:-50%" attributes set on the target Element are determined based on each .spicr-layer individually.
This demo should also highlight the height transition as items of the .spicr-carousel Element don't have equal height.

Spicr Quirks

The Spicr default distribution file spicr.min.js is compatible with the default KUTE.js distribution file kute.min.js which includes the transformFunctions component, one of the many combinations for modern browsers.
Spicr comes with a special custom build which incudes a custom-built KUTE.js, the spicr-standalone.min.js file, one of the default distribution files also geared towards modern browsers.
On initialization, Spicr will check the target Element class, contents and attributes of the target and child elements and animate first <div class="item"> if it doesn't have the active class.
Spicr will not update transform-origin on window resize, but will recalculate it on the next cycle.
Depending on the attributes specific for its DATA API, Spicr will process all your attributes' values and feed KUTE.js with pre-processed values for immediate tween initialization.
The Spicr component will attach the initialization object to the target into the element.Spicr object, giving you access to the initialization object even for DATA API initialized targets.
There are a set of standalone versions that include custom KUTE.js builds (also tons of build options) just in case you want to use KUTE.js exclusively with Spicr or other animations, but you can go either way.
For various builds and compatibility requirements, Spicr comes with a series of value processing specific to each KUTE.js build (included or not) to make sure the values are exactly what your chosen KUTE.js components expect.
Reinitializing the Spicr for a specific target just to change options should work fine, but will disrupt any and all active animations.
Another standalone build is designed to support IE9+ browsers and uses the new and improved KUTE.js transformLegacy component and is called spicr-standalone-legacy.js.
When building a legacy custom build, you also have the polyfill that covers support for IE9+ browsers, a build file called polyfill-legacy.js.
This very demo page works on IE9+ and uses the spicr-standalone-legacy.js mentioned above and some special fallbacks have been developed for various content items, mainly grid and flexbox.
The component doesn't support nested Spicr initializations.

Powered by KUTE.js

KUTE.js is a modern animation engine, which combined with Spicr, can deliver awesome user experiences on a wide range of browsers.

Developer Wiki

For more information on custom builds, legacy support and other developer information, don't forget to check the wiki.

Spicr Wiki »

Other Resources

Navbar.js - the navigation of this demo;
DLL.js - lazy-loading images on this demo;
minifill - the polyfill for IE9+ browsers;
picsum.photos & placehold.id - images.

Hi, I'm Spicr!

Solid build and easy to use

ES6/ES7 and SCSS Sources

Likes most browsers

High performance

What's crazy about it?IT IS FREE!

Spicr Features

Built on ES6/ES7 JavaScript standard

Smooth transitions

Great browser support

Multiple use focus

Works with popular CSS frameworks

Comes with SCSS sources

Powerful DATA API

Developer friendly license

Spicr Usage

Install from NPM

Load from CDN

Working locally

Legacy Browsers

Spicr JavaScript API

Public Methods

Instance Options

Spicr DATA API

Component Options API

Supported Properties

Animation Settings

Spicr SCSS

The Spicr Main Style

SCSS Variables

Content Styling

Spicr Code Examples

ES5 Example

ES6/ES7 Example

Using Instance Methods

Dynamic Content

Spicr Slider

Slider Basic Markup

Slider Item Markup

Slider Example

Translation

Rotation

No animation set

Disabled all animations

No layer

No background

Spicr Carousel

Carousel Markup

Carousel Item Markup

Carousel Demos

No animation set

No layer found

Not even opacity

This is a basic slide

This is a basic slide

This is a basic slide

This is cube animation

This is cube animation

This is cube animation

This is cube animation

This is cube animation

This is cube animation

Multi layer carousel

Doing stagger animation

With Content Elements

The simplest example

The simplest example

The simplest example

Spicr Quirks

Powered by KUTE.js

Developer Wiki

Other Resources

What's crazy about it?
IT IS FREE!