The responsive CSS animation framework

For creating sliders, presentations, banners, and other step-based applications

  • 1 .seq-in .content { transform: translateY(0); transition: .2s; }
    An opening code bracket

    Step 1

    A closing code bracket

    Easily add CSS transitions to step-based applications using "in" and "out" CSS classes

    Step 1 is currently in its in1 position. Watch what happens when you go to the next step →

  • 2 .seq-out .content { transform: translateY(-100%); transition: .2s; }
    3 .content { transform: translateY(100%); }
    4 .seq-in .content { transform: translateY(0); transition: .25s; }
    An opening code bracket

    Step 2

    A closing code bracket

    Sequence.js takes care of the functionality so you can concentrate on presenting your content in style

    By going to the next step, you caused step 1 to transition from in1 to out2 and step 2 to transition from start3 to in4. All with just several of lines of CSS.

    When navigating backwards Sequence.js can automatically reverse these transitions.

  • .seq-in .rotate { animation-name: rotate; animation-duration: 1s; }
    .seq-in .fade { animation-name: fade; animation-duration: 1s; }
    .seq-in .threed { animation-name: threed; animation-duration: 1s; }
    An opening code bracket

    Step 3

    A closing code bracket

    Create unique animated applications using any CSS properties you wish

    Sequence.js doesn't limit you to specific HTML/CSS. Use the properties, attributes, workflow, conventions, and libraries you're familiar with.

    • A blue square


    • A blue square


    • A blue square


    • A blue square


    • A blue square


    • & more

  • .seq-in .touch { animation-name: rotate; animation: .35s 1.8s; }
    .seq-in .touch-title-1 { animation-name: fade-out; animation: .3s 1.5s; }
    .seq-in .touch-title-2 p { animation-name: slide-in; animation: .3s 2.35s; }

    Build for a multi-device, modern web...

    Fully responsive with touch support

    A hand holding an illustrated generic mobile phone A closed hand with the index finger extended swiping over a mobile phone
  • 5 .seq-in .content { transform: translateZ(0); will-change: transform; }
    6 .seq-next { /* Makes an element a functioning next button */ }
    7 .seq-touch { /* Styles for touch devices */ }

    All of the features you need for animated applications

    Fully documented, along with 30+ options, and an easy-to-use API.

    • Responsive Support
    • Hardware Accelerated Animation5
    • Touch Support
    • Easy-to-add UI6
    • Auto Play/Cycle
    • State Classes for Easy Styling7
    • Preloader
    • & More
  • .browser-icon { transform: scale(0); transition: .2s; transition-timing-function: cubic-bezier(.55,1.58,.63,.99); }
    .seq-in .browser-icon { transform: scale(1); }
    8 .seq-fallback { /* Fallback specific styles */ }

    Supported in modern browsers

    • Mozilla Firefox browser logo


    • Opera browser logo


    • Apple Safari browser logo


    • Google Chrome browser logo


    • Microsoft Edge browser logo


    With a fallback theme for legacy browsers

    A traditional side-to-side slider is automatically shown when a browser doesn't support CSS transitions and transforms. Use the .seq-fallback class to style Sequence.js in older browsers8.

    • Microsoft Internet Explorer 9 browser logo


    • Microsoft Internet Explorer 8 browser logo


  • /* Install via NPM */ npm install sequencejs
    /* Install via Bower */ bower install sequencejs

    This presentation was powered by...

    Make your animated step-based application today...

    View Example Themes Download Now

Example Themes

View some of the themes we've created and made available in the Theme Store

Theme Store

Get Started

Getting started is easy with our in-depth documentation and ready-made themes

Documentation Download

Install via Bower:

bower install sequencejs

Install via NPM:

npm install sequencejs
Visit Full Site