Hi, Iโm Ian. I create successful websites that are fast, easy to use, and built with best practices.
Some of my popular GitHub repos:
You can also check out my portfolio here:
I'm open to job opportunities and freelance work. Get in touch
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
Home Page: http://sequencejs.com
License: Other
Hi, Iโm Ian. I create successful websites that are fast, easy to use, and built with best practices.
Some of my popular GitHub repos:
You can also check out my portfolio here:
I'm open to job opportunities and freelance work. Get in touch
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.
Add the before/after callbacks for when the fallback is used in browsers that don't support CSS3 transitions
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.
Add a public variable that returns true/false depending on a browsers support of keyframes
preloading graphic doesn't display
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.
If animateStartingFrameIn is true, IE10 doesn't throw errors and doesn't allow anything to animate
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.
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?
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.
In particular, create themes to test the following:
Add repeated code into functions
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.
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.
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.
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;
}
});
}
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.
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.
Reproduce:
Click slide 3, then left arrow key to slide 2.
When using a pauseIcon, the following error occurs:
Object false has no method 'charAt'
Needs to be tested again. Also make sure when hovering on child elements the event bubbles
Determine whether the slideshow starts again once it's reached the end. (True/False)
A lot of the init code is repeated and can be reduced quite significantly
Hi,
All is in the title...
var sequenceOptions = {
autoPlay: false
} ;
var $sequence = $('#test').sequence(sequenceOptions);
$sequence.goTo(2) ;
Package each theme with readme's, documentation, default css and images etc
People have reported issues with the the plugin breaking the back button.
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.
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.
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
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.
Add a preloader that prevents Sequence from displaying frames until everything has loaded
.data() isn't needed and can be removed from the theme demos.
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.
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.
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.
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.
When delayDuringOutInTransitions is true, there seems to be a 1 second lag between being about to change frames
This may just be a VMWare issue. Need to test on a PC.
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.
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:
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).
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");
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.