Transitions

Transitions and Animations

Transitions

Vegas uses CSS3 transitions, older browsers will display a simple fade transition.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transition: 'fade'
});
  • fade
  • fade2
  • slideLeft
  • slideLeft2
  • slideRight
  • slideRight2
  • slideUp
  • slideUp2
  • slideDown
  • slideDown2
  • zoomIn
  • zoomIn2
  • zoomOut
  • zoomOut2
  • swirlLeft
  • swirlLeft2
  • swirlRight
  • swirlRight2
  • burn
  • burn2
  • blur
  • blur2
  • flash
  • flash2

Two versions are available for each transition. The subtle nuance is a transition is also applied to the disapearing slide too. The transition duration is set in milliseconds by the transitionDuration option.

Random transitions

Transition can be set to random for a randomly picked transition. You can define a list of specific transitions with an array.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transition: [ 'fade', 'zoomOut', 'swirlLeft' ]
});

Custom transitions

You can create your own transitions. A transition has 3 classes. They must be prefixed by .vegas-transition to be recognized..vegas-transition-{name} is the initial state applied when the slide is created..vegas-transition-{name}-in is applied when the slide appears..vegas-transition-{name}-out is applied when the slide disappears.

It's a good practice to provide 2 versions. Below the default fade transition.

.vegas-transition-fade,
.vegas-transition-fade2 {
    opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
    opacity: 1;
}

.vegas-transition-fade2-out {
    opacity: 0;
}

In order to be available in the random mode, new transitions must be added to the transitions list.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transitionRegister: [ 'myTransition1', 'myTransition2' ]
});

Animations

Vegas uses CSS3 animations, older browsers will ignore them.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animation: 'kenburns'
});
  • kenburns
  • kenburnsUp
  • kenburnsDown
  • kenburnsRight
  • kenburnsLeft
  • kenburnsUpLeft
  • kenburnsUpRight
  • kenburnsDownLeft
  • kenburnsDownRight
  • random

The animation duration is set in milliseconds by the animationDuration option.

Random animations

Animation can be set to random for a randomly picked animation. You can define a list of specific animations with an array.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]
});

Custom animations

You can create your own animations. They must be named as .vegas-animation-{name} to be recognized. Below the default kenburns animation (no vendor prefixes).

.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

In order to be available in the random mode, new animations must be added to the animations list.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animationRegister: [ 'myAnimation1', 'myAnimation2' ]
});

Zip file

Download the last version (2.1.x).

Download

Source code

Fork the project and contribute.

Source

Need support?

Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving your problem.