Skip to content

The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

License

Notifications You must be signed in to change notification settings

IanLunn/Sequence

Repository files navigation

Sequence v2 (Pre-alpha) Flattr this git repo

The CSS Animation Framework

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.

Philosophy

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.

Demo Themes

  • 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

Features

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.

How to Contribute

Sequence.js is nearing version 2 and we need your help to get there. You can contribute in the following ways:

Feedback can be provided on the project's GitHub page, to @IanLunn on Twitter or via email.

Todo List

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:

  1. 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

Browser Support

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

Premium Theme Partnership

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.

Support Sequence Development

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.

Flatter

Flattr this git repo

Bitcoin

Bitcoin contributions may be sent to the following address:

1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd

About

The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Resources

License

Stars

Watchers

Forks

Packages

No packages published