This looks great, but it really annoys me when Javascript/CSS plugins don't explicitly state their browser support.
'Gracefully degrades in older browsers' means different things to different people, and without a quick chart I'm much less likely to invest the time in trying it out.
I plan to add an option in the future to allow frames to be skippable regardless of whether they're animating or not. Just need to come up with a good way of doing it without elements flying all over the place.
On that note, two things.
First, when you actually start the animation, make sure that the images are loaded first. If I hit one the demo sites with a cleared cache, the images pop in pretty bad. Use document.onload instead of $(document).ready
Second, mobile performance is dreadful. From what I understand, you have it using CSS3 animation and simply add animations into divs. My suggestion would be to default to javascript on mobile. Most mobiles don't have css animations optimized as heavily as javascript animations.
I suspect any performance issues on mobile devices are down to the plugin having to do a lot of work in the DOM, rather than the CSS3 transitions themselves being slow.
Also, it'd be interesting to know what mobile browser your seeing performance issues in. Note that Opera is unfortunately buggy when it comes to CSS3 transitions and I had to write a horrible workaround to get it working. Expect Opera to have performance issues until they fix the bug.
From the site: "Unique transition styles created using CSS3"
Couldn't these "Unique transitions" be applied to most existing slideshow plugins, since they are done with CSS3 and not the plugin itself?
Say, if I was using http://slidesjs.com/, I could do `addClass('animate-in')` using the `animationStart()` event.
I say this as I'd like more people to contribute to a solid, widely used and tested slideshow plugin, instead of adding another choice--of course this assumes that there's no need for another choice.
This is a good (and fair) question. Sequence doesn't appear to do a ton of stuff the box, without applying a theme from the site or one of your own design.
That is, however, why I love this idea. It looks like this provides a good foundation for creating a slider; a nice interface, well documented options and callbacks, and nothing more.
I feel like I can actually build something of my own with this instead of clobbering an existing slider plugin with my own code until it does what I want. This is a much sharper tool than a widget pre-bundled with style defaults.
Well said. And, I agree. I didn't even think of enhancing an existing basic JS slider with additional animations using CSS3.
I'm still not sure if I'll switch from SlidesJS to Sequence, just because I am quite familiar with the SlidesJS source. But, definitely good work by ianlunn--I'm going to attempt a similar effect with SlidesJS sometime soon.
I'm not familiar with slidesjs.com so I can't compare the two but the way in which Sequence is built is very much different to other sliders that I have come across. Sequence basically just controls the attribution of class names (animate-in and animate-out), allowing a sliders transitions to be completely written in CSS.
Serious question - why aren't there more efforts to do things like this but using canvas? I'm just starting to work on a new comic web app, was planning on using canvas for the page viewer, am I missing something or is the same <div> exchange from 2k6 still the way to go?
I would like to turn this into a WordPress plugin in the future although as I've only just released the beta, I'd like to spend my spare time improving that first.
'Gracefully degrades in older browsers' means different things to different people, and without a quick chart I'm much less likely to invest the time in trying it out.