A lot of the init code is repeated and can be reduced quite significantly

Needs to be tested again. Also make sure when hovering on child elements the event bubbles

Currently whilst a frame is animating, Sequence is locked and won't allow for navigating between slides until animations are complete. A future version should include an option to allow for skipping between frames regardless of whether a frame is animating or not.

If this is implemented, it should be best determined how the frame that is currently animating is dealt with. Should elements move to their animate-out position mid animate-in, should they fade out and then immediately go to animate-out etc. These varying methods may become options that are dependencies of the skip option.

The sequence plugin should test for Modernizr presence before including it.

Included version is old and lacks new features I'd like to use together with sequence, but I cant.

When delayDuringOutInTransitions is set to false, the next frame doesn't always animate in correctly in Opera. A workaround was introduced in the beta to make Opera wait 50ms before animateIn() is called to prevent this.

Hi,

All is in the title...

var sequenceOptions = {
    autoPlay: false
    } ;
var $sequence = $('#test').sequence(sequenceOptions);
$sequence.goTo(2) ;

If animateStartingFrameIn is true, IE10 doesn't throw errors and doesn't allow anything to animate

Currently Sequence can only support keyframe animations when sequences are going forward. Browsers don't support keyframe animations going backwards which means the animations simply pop in and cause Sequence to get stuck because 'animationEnd' isn't triggered.

Need to do more testing with this and come up with potential solutions to allow them to be included and fully supported.

Currently the best solution is to add a class of "animate-in" to each child in the frame the developer wishes to have in view when JS is disabled. Would be good to make this automatic though as many developers may not add the class/concern themselves with compatibility.

Add a preloader that prevents Sequence from displaying frames until everything has loaded

• Documentation for theme developers
• Documentation for plugin developers

I have tested the swipe threshold on an iPad, and it appears that it isn't working.

Here is a fix :

if(self.settings.touchEnabled && self.hasTouch){
        var touches = {
            "touchstart": -1,
            "touchmove" : -1, 
            "swipeDirection" : ""
        };
        self.sequence.on("touchstart touchmove touchend", function(e){
            e.preventDefault(); 
            switch(e.originalEvent.type){
            case "touchstart":
            case "touchmove":
                touches[e.originalEvent.type] = e.originalEvent.touches[0].pageX;
                break;
            case 'touchend':
                if(touches["touchmove"] > -1)
                {
                if(touches["touchstart"] < touches["touchmove"])
                {
                    if( (touches["touchmove"] - touches["touchstart"]) > self.settings.calculatedSwipeThreshold)
                    {
                    self.next();
                    }
                }
                else
                {
                    if( (touches["touchstart"] - touches["touchmove"]) > self.settings.calculatedSwipeThreshold)
                    {
                    self.prev();
                    }
                }

                }
                touches = {
                "touchstart": -1,
                "touchmove" : -1
                };
            default:
                break;
            }
        });
        }

Reproduce:

Click slide 3, then left arrow key to slide 2.

In particular, create themes to test the following:

• CSS3 Keyframes
• CSS3 Shorthand

The beta version of touch swiping was implemented quickly and prevented a page from scrolling (because Sequence cancelled the event, anticipating it as a finger swipe). Improve swiping with a better ratio for pixel density.

Add a public variable that returns true/false depending on a browsers support of keyframes

People have reported issues with the the plugin breaking the back button.

preloading graphic doesn't display

.data() isn't needed and can be removed from the theme demos.

This may just be a VMWare issue. Need to test on a PC.

A transition/animation won't trigger as ended if none of an elements CSS properties have changed -- even if you specify a transition duration. A hack is to find a property that doesn't affect the look but causes the element to actually transition/animate (such as z-index).

This needs a better solution.

On both a website being developed and on the Apple Style demo, Safari causes the animation to stop or fail continuing (demo - iPhones disappear, animation locks up at a certain stage). On the mentioned website, the next and previous buttons simply cease to work and no animation is run. After the locking happens, a click on the prev/next buttons do not yield any responses, but debugging has shown that the events are triggered, and never leave the loop where it waits for the animation events to finish).

On the demo, to achieve the lock, it is necessary to tap on the screen randomly and/or scroll. On the mentioned website, the effects above are noticed when the screen is scrolled.

On the website, the behavior was detected on both 0.2 beta and 0.3 beta, but not on 0.1 (where it works nicely).

Currently pagination is possible but needs to be custom built specific to each Sequence. Build in some options that allow people to quickly apply default pagination

• nextFrameID: A public variable that returns the nextFrameID based on the direct the user has chosen

Add repeated code into functions

A stylesheet with some default styles applied would allow developers to quickly set up a basic theme. This would also be beneficial to people with lesser capabilities trying to better understand the plugin.

Styles such as:

• Animate left/right
• Animate up/down
• Rotate x degrees

When Sequence is initiated but the HTML element does not exist, catch the error to make sure it does not break other scripts on the page.

Often, when using modifyElements on particular elements, those elements also have their classes changed at the same time, like so:

frameChildren.removeClass("animate-out");
self.modifyElements(frameChildren, cssValue);
frameChildren.addClass("animate-in");

In some cases, classes are changed and sometimes not, meaning they can't be written into the modifyElements function. It'd be a good idea to make modifyElements a chainable function, so the above code would look like this:

frameChildren.removeClass("animate-out").modifyElements(cssValue).addClass("animate-in");

Currently when creating themes, it's necessary to write out browser specific properties for each individual vendor. It'd be beneficial to have the plugin auto prefix to allow theme developers to only have to write properties for the browser they're testing in.

Need to look into how easily this can be achieved.

When using a pauseIcon, the following error occurs:

Object false has no method 'charAt'

In themes such as "Image Stack", the "animate-out" class has to be given a redundant property to make Sequence believe the frame has reached it's animate-out position, when in fact the theme doesn't differ between the "animate-in" and "animate-out" phases.

It may be worth while to include an option that allows for the "animate-out" phases to be disabled.

When binding transitionEnd to an element, sometimes a transitionEnd is triggered more than once for a specific element. This means that on some frames, Sequence thinks the frame has ended animating sooner than it has and the next frame can be initiated.

Allow developers to override the default class names used for Sequence's elements and transitional phases. .animate-in, .sequence-next etc can be renamed to whatever the developer likes.

Currently, when hitting the previous button/swiping backwards etc, Sequence causes frames to animate in reverse, from "animateOut" to "animateIn". In themes such as Sliding Horizontal Parallax this means the frame with the aeroplane looks unrealistic because the plane flies backwards.

Add a developer options that allows the choice between animating forwards and reverse when the previous frame is initiated.

Determine whether the slideshow starts again once it's reached the end. (True/False)

Determine which callbacks are needed. At the moment there's quite a few that could possibly be made redundant.

Example: is it necessary to have afterLastFrameAnimatesIn() when afterFrameAnimatesIn() can be used along with a frameID query?

Add the before/after callbacks for when the fallback is used in browsers that don't support CSS3 transitions

In the Apple Style theme, the third slide contains 7 elements, waitForAnimationToComplete seems to count to 7 before the last animation has completed though. This allows a user to skip ahead to the next frame before the current one has completed animating.

Package each theme with readme's, documentation, default css and images etc

When animating backwards in IE10, elements don't reset to their correct starting position. Consider adding in some bumf code to slow down the change of CSS so IE can keep up.

When delayDuringOutInTransitions is true, there seems to be a 1 second lag between being about to change frames

Opera requires a workaround because at present, when retrieving a CSS value with a browser prefix, it returns an empty value. The workaround retrieves CSS properties from the stylesheet rather than the DOM. This needs to be tested further and optimised.

In the following example, the .iphone element should rotate from -40deg to 0 when animating in (in reverse):

.iphone{
    left: -450px;
    opacity: 1;
    position: absolute;
    top: -550px;
    -webkit-transform: rotate(-40deg);
    -webkit-transition-duration: 1.5s;
}

.iphone.animate-in{
    left: 600px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 50px;
    -webkit-transform: rotate(0deg);
    -webkit-transition-duration: 1.5s;
}

.iphone.animate-out{
    left: 1100px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    top: -400px;
    -webkit-transform: rotate(-40deg);
    -webkit-transition-duration: 1s;
}

Due to the rotate property of .animate-out being different to .animate-in, the frame doesn't animate and instead just snaps to its new position.

By changing the rotate value of .animate-out to 0deg (the same as .animate-in), the animation works as expected.

One should be able to enable/disable infinite navigation in the options at init time. If infinite navigation is turned off, when reaching the last frame, one cannot continue to the first frame. Same thing applies for the first frame (cannot go back to last frame).

I disabled the navigation buttons, but using the keyboard to navigate makes it infinite.

• Stop inactive sequence items/items outside of the container from triggering pause on hover