CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications.
See the introduction and pre-made themes.
- Create animated themes using CSS transitions
- Fully supports responsive design
- Supported on mobile, tablet and desktop devices
- No limitations on CSS or HTML you can use
- Animate canvas and content
- Support for 60FPS animations
- Auto play
- next/previous/pause buttons and pagination support
- Touch support via Hammer.js
- Preloader via ImagesLoaded
- Hash tag support
- Keyboard navigation
- API for custom functionality
- Top quality documentation
- Supports all major browsers with a fallback mode for legacy browsers (detailed browser support)
- Yeoman generator available for quick scaffolding of themes
The key philosophy for Sequence is to aid you in creating your animated step-based application without getting in the way of how you or a web browser work. Create content and then animate it using the HTML and CSS you're used to. There's no special syntax to learn, no limitations on the elements you can use, and no heavy JavaScript implementations recreating what the browser is already capable of.
The following themes are packaged with the Sequence download package:
- Intro - The theme used to introduce Sequence
- Modern Slide In - A minimalist theme for showcasing products
- Pop Slide - A colourful slider with highlighted pagination
- Cube - A basic 3D cube that spins on the Y axis
- Basic - A basic slider that moves side to side
- Test Theme - Used for Testing Sequence.js and its API
- Multiple Test Theme - A theme to test multiple instances of Sequence
Additional themes are made available on the Sequence Theme Store
Head to the showcase to see themes others have created.
To get started download Sequence and then head to the documentation. If you'd like to contribute to Sequence's development, please see the contributing guidelines.
Sequence can also be installed using the Bower command:
bower install sequencejs
or NPM:
npm install sequencejs
Ian Lunn and contributors.
Follow @IanLunn on Twitter for updates on Sequence as well as news and opinions on front-end web development.
Sequence v1 was first conceived in 2011 by Ian Lunn whilst he was recreating an animated effect used on the Apple iPhone 4 website. In creating the demo he realised the limited script had far more potential if its animations could be written via CSS instead of JavaScript. This would allow developers to easily create their own animations that were completely separate from the logic of the script itself.
CSS animations were still quite new at the time so after a lot of battling with browser support, Ian released the first version of Sequence in February 2012 under an open-source MIT License.
Sequence grew in popularity and was updated with bug fixes and minor features for the next 18 months.
In early 2014, Ian began working on Sequence 2.0.0. This addressed version 1's biggest limitations and issues; the requirement of having to animate all top-level elements, improved touch support, and so on.
Sequence 2.0.0 was released in July 2014.
For a complete list of changes, see the CHANGELOG.
Sometimes when choosing a library, its better to know what it doesn't do to enable you to make the decision to use it in a project. Although we've made Sequence as good as it can possibly be, we've tried to keep its scope tight, as such, there are some limitations:
If you're planning on using AJAX in your project, know that Sequence can be initiated and destroyed whenever necessary, meaning it can be loaded on a page via AJAX after the page load event. However, at present Sequence doesn't allow for loading additional steps via AJAX.
At present, some browsers don't fully support CSS 3D transforms.
Internet Explorer 10 and 11 don't support preserve-3d and as such, are forced into fallback mode when the use of CSS 3D transforms are detected.
Sequence is made available under a MIT License.
Sequence themes included in the download are made available under a MIT License unless otherwise stated. Themes available on SequenceJS.com have their own licenses, please respect them accordingly.
SequenceJS.com, Sequence, and its dependencies are © 2014 Ian Lunn unless otherwise stated.
To support the future development of Sequence and other open source projects created by Ian Lunn, please consider making a contribution.
Your contribution is not-for-profit (or beer!), and will allow Ian to spend a little less time on client projects and more time supporting and creating open source software.
Thank you.
Bitcoin contributions may be sent to the following address:
1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd