Pre-alpha warning: Sequence.js v2 is not yet ready for production and is only made available for testing and development. Many features are yet to be implemented and those that have are yet to be tested. If you're looking for a production ready version, checkout Sequence v1.
Sequence allows you to create your own unique animated themes for sliders, presentations, banners, accordions, and other step-based applications.
The key philosophy for Sequence is to aid you in creating your animated 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.
- Basic - A basic slider that moves side to side
- Modern Slide In - A minimalist theme for showcasing products
- Pop Slide - A colourful slider with highlighted pagination
- Cube X - A basic 3D cube that spins on the X axis
- Test Theme - Used for Testing Sequence.js and its API
- Multiple Test Theme - A theme to test multiple instances of Sequence
Sequence is packed full of features:
- 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
- Auto play
- Animate canvas as well as content
- Optimized for 60FPS animations
- next/previous/pause buttons and pagination support
- Preloader
- Touch support
- Hash tag support
- Keyboard navigation
- Automatically reverses animations when navigating backwards (if required)
- API for custom functionality
- Fallback mode for legacy browsers
- Yeoman generator available for quick scaffolding of themes
To get started, head to the documentation.
Sequence.js is nearing version 2 and we need your help to get there. You can contribute in the following ways:
- Create themes using the early versions of Sequence v2 and provide the following types of feedback:
- Report bugs
- Ease of use (Did you find Sequence v2 easy to use? Can it be made easier?)
- Feature suggestions
- Documentation improvements (Did you feel anything in the documentation was unclear or missing?)
- Complete tasks on the Todo list
- Fix bugs (visit the v2 milestone on GitHub for a complete list)
- Master Sequence v2 and consider becoming a Premium Theme Partner
- Consider supporting the future of Sequence v2 financially
Feedback can be provided on the project's GitHub page, to @IanLunn on Twitter or via email.
Where possible, src/sequence.js
contains // TODO
comments showing functionality that has not yet been implemented.
The following is a complete list of the work still needed to be carried out to reach a stable version ready for launch:
- Clear all listed bugs
- Implement reverse animations for the
reverseWhenNavigatingBackwards
option - Remove event for hashChange when using IE
- Implement AMD/Require.js support
- Make
_getAnimationMap.destroyClone()
IE7 compatible - Make
_ui.getElement()
IE7 compatible - Implement
_animation.stepSkipped()
functionality to stop a step from animating when it is skipped - Browser/Device Test - See browser testing so far here
- Improve Yeoman generator for Sequence themes
When Sequence reaches beta, we aim to support current versions of all major desktop browsers, and older versions of Internet Explorer 7 onwards.
See the ever-growing browser support list
When v2 launches, we will be looking for people who we can partner with to sell Sequence themes on the official marketplace. If this is of interest, please get in touch.
We will release further information about the premium theme partnership in the near future.
To support the future development of Sequence.js 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: