Permalink
Browse files

Added reverseTimingFunctionWhenNavigatingBackwards option

  • Loading branch information...
1 parent 061e0aa commit df82c31fe733d2de6ce4f0158ad1135071199c85 @IanLunn committed Aug 27, 2015
Showing with 38 additions and 24 deletions.
  1. +4 −0 CHANGELOG.md
  2. +1 −1 bower.json
  3. +1 −1 package.json
  4. +14 −9 scripts/sequence.js
  5. +3 −3 scripts/sequence.min.js
  6. +1 −1 scripts/sequence.min.map
  7. +14 −9 src/sequence.js
View
@@ -1,5 +1,9 @@
# Change Log
+## 2.1.0 (2015/08/27)
+
+- Added [`reverseTimingFunctionWhenNavigatingBackwards`](http://www.sequencejs.com/documentation/#reversetimingfunctionwhennavigatingbackwards) option. `false` by default.
+
## 2.0.0 (2015/08/09)
- Built from ground-up
View
@@ -1,7 +1,7 @@
{
"name": "sequencejs",
"description": "The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.",
- "version": "2.0.0",
+ "version": "2.1.0",
"main": "scripts/sequence.min.js",
"license": "SEE LICENSE IN LICENSE.md",
"homepage": "http://www.sequencejs.com/",
View
@@ -1,7 +1,7 @@
{
"name": "sequencejs",
"description": "The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.",
- "version": "2.0.0",
+ "version": "2.1.0",
"main": "scripts/sequence.min.js",
"license": "SEE LICENSE IN LICENSE.md",
"author": "Ian Lunn",
View
@@ -6,7 +6,7 @@
*
* @link https://github.com/IanLunn/Sequence
* @author IanLunn
- * @version 2.0.0
+ * @version 2.0.1
* @license http://sequencejs.com/licenses/
* @copyright Ian Lunn Design Limited 2015
*/
@@ -58,9 +58,12 @@ function defineSequence(imagesLoaded, Hammer) {
// animating in.
phaseThreshold: true,
- // Should animations be reversed when navigating backwards?
+ // Should transitions be reversed when navigating backwards?
reverseWhenNavigatingBackwards: false,
+ // Should transition-timing-function be reversed when navigating backwards?
+ reverseTimingFunctionWhenNavigatingBackwards: false,
+
// Should the active step be given a higher z-index?
moveActiveStepToTop: true,
@@ -1386,16 +1389,16 @@ function defineSequence(imagesLoaded, Hammer) {
* @returns {Number} maxWatchedTotal - The new total length
* (duration + delay) for watched elements when reversed
*/
- reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold) {
+ reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold, options) {
var animation = this,
phaseElements = phaseProperties.children,
noOfPhaseElements = phaseElements.length,
stepDurations = phaseProperties.timings,
el,
i,
- timingFunction,
- timingFunctionReversed,
+ timingFunction = '',
+ timingFunctionReversed = '',
duration,
delay,
total,
@@ -1437,8 +1440,10 @@ function defineSequence(imagesLoaded, Hammer) {
}
// Get the timing-function and reverse it
- timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
- timingFunctionReversed = animation.reverseTimingFunction(timingFunction);
+ if (options.reverseTimingFunctionWhenNavigatingBackwards === true) {
+ timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
+ timingFunctionReversed = animation.reverseTimingFunction(timingFunction);
+ }
// Apply the reversed transition properties to each element
el.style[Modernizr.prefixed("transition")] = duration + "ms " + delay + "ms " + timingFunctionReversed;
@@ -1556,8 +1561,8 @@ function defineSequence(imagesLoaded, Hammer) {
// Reverse properties for all elements in the current and next step
// and add the reversePhaseDelay as a transition-delay where necessary
- currentPhaseTotal = animation.reverseProperties(currentPhaseProperties, reversePhaseDelay.current, 0, ignorePhaseThreshold);
- nextPhaseTotal = animation.reverseProperties(nextPhaseProperties, reversePhaseDelay.next, phaseThresholdTime, ignorePhaseThreshold);
+ currentPhaseTotal = animation.reverseProperties(currentPhaseProperties, reversePhaseDelay.current, 0, ignorePhaseThreshold, self.options);
+ nextPhaseTotal = animation.reverseProperties(nextPhaseProperties, reversePhaseDelay.next, phaseThresholdTime, ignorePhaseThreshold, self.options);
// Make the current step transition to "animate-start"
animation.startAnimateOut(self.currentStepId, currentStepElement, -1, currentPhaseTotal);
Oops, something went wrong.
Oops, something went wrong.
View
@@ -6,7 +6,7 @@
*
* @link https://github.com/IanLunn/Sequence
* @author IanLunn
- * @version 2.0.0
+ * @version 2.1.0
* @license http://sequencejs.com/licenses/
* @copyright Ian Lunn Design Limited 2015
*/
@@ -58,9 +58,12 @@ function defineSequence(imagesLoaded, Hammer) {
// animating in.
phaseThreshold: true,
- // Should animations be reversed when navigating backwards?
+ // Should transitions be reversed when navigating backwards?
reverseWhenNavigatingBackwards: false,
+ // Should transition-timing-function be reversed when navigating backwards?
+ reverseTimingFunctionWhenNavigatingBackwards: false,
+
// Should the active step be given a higher z-index?
moveActiveStepToTop: true,
@@ -1386,16 +1389,16 @@ function defineSequence(imagesLoaded, Hammer) {
* @returns {Number} maxWatchedTotal - The new total length
* (duration + delay) for watched elements when reversed
*/
- reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold) {
+ reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold, options) {
var animation = this,
phaseElements = phaseProperties.children,
noOfPhaseElements = phaseElements.length,
stepDurations = phaseProperties.timings,
el,
i,
- timingFunction,
- timingFunctionReversed,
+ timingFunction = '',
+ timingFunctionReversed = '',
duration,
delay,
total,
@@ -1437,8 +1440,10 @@ function defineSequence(imagesLoaded, Hammer) {
}
// Get the timing-function and reverse it
- timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
- timingFunctionReversed = animation.reverseTimingFunction(timingFunction);
+ if (options.reverseTimingFunctionWhenNavigatingBackwards === true) {
+ timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
+ timingFunctionReversed = animation.reverseTimingFunction(timingFunction);
+ }
// Apply the reversed transition properties to each element
el.style[Modernizr.prefixed("transition")] = duration + "ms " + delay + "ms " + timingFunctionReversed;
@@ -1556,8 +1561,8 @@ function defineSequence(imagesLoaded, Hammer) {
// Reverse properties for all elements in the current and next step
// and add the reversePhaseDelay as a transition-delay where necessary
- currentPhaseTotal = animation.reverseProperties(currentPhaseProperties, reversePhaseDelay.current, 0, ignorePhaseThreshold);
- nextPhaseTotal = animation.reverseProperties(nextPhaseProperties, reversePhaseDelay.next, phaseThresholdTime, ignorePhaseThreshold);
+ currentPhaseTotal = animation.reverseProperties(currentPhaseProperties, reversePhaseDelay.current, 0, ignorePhaseThreshold, self.options);
+ nextPhaseTotal = animation.reverseProperties(nextPhaseProperties, reversePhaseDelay.next, phaseThresholdTime, ignorePhaseThreshold, self.options);
// Make the current step transition to "animate-start"
animation.startAnimateOut(self.currentStepId, currentStepElement, -1, currentPhaseTotal);

0 comments on commit df82c31

Please sign in to comment.