Limit transition duration to <= frame duration

Author: rreusser

src/plot_api/plot_api.js

@@ -2541,11 +2541,18 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
                     computedFrame = frameList[i].frame;
                 }
 
+                var frameOpts = getFrameOpts(i);
+                var transitionOpts = getTransitionOpts(i);
+
+                // It doesn't make much sense for the transition duration to be greater than
+                // the frame duration, so limit it:
+                transitionOpts.duration = Math.min(transitionOpts.duration, frameOpts.duration);
+
                 var nextFrame = {
                     frame: computedFrame,
                     name: frameList[i].name,
-                    frameOpts: getFrameOpts(i),
-                    transitionOpts: getTransitionOpts(i)
+                    frameOpts: frameOpts,
+                    transitionOpts: transitionOpts,
                 };
 
                 if(i === frameList.length - 1) {

test/jasmine/tests/animate_test.js

@@ -9,6 +9,48 @@ var delay = require('../assets/delay');
 
 var mock = require('@mocks/animation');
 
+describe('Plots.supplyAnimationDefaults', function() {
+    'use strict';
+
+    it('supplies transition defaults', function() {
+        expect(Plots.supplyAnimationDefaults({})).toEqual({
+            mode: 'afterall',
+            transition: {
+                duration: 500,
+                easing: 'cubic-in-out'
+            },
+            frame: {
+                duration: 500,
+                redraw: true
+            }
+        });
+    });
+
+    it('uses provided values', function() {
+        expect(Plots.supplyAnimationDefaults({
+            mode: 'next',
+            transition: {
+                duration: 600,
+                easing: 'elastic-in-out'
+            },
+            frame: {
+                duration: 700,
+                redraw: false
+            }
+        })).toEqual({
+            mode: 'next',
+            transition: {
+                duration: 600,
+                easing: 'elastic-in-out'
+            },
+            frame: {
+                duration: 700,
+                redraw: false
+            }
+        });
+    });
+});
+
 describe('Test animate API', function() {
     'use strict';
 
@@ -351,4 +393,36 @@ describe('Test animate API', function() {
             }).catch(fail).then(done);
         });
     });
+
+    describe('frame vs. transition timing', function() {
+        it('limits the transition duration to <= frame duration', function(done) {
+            Plotly.animate(gd, ['frame0'], {
+                transition: {duration: 100000},
+                frame: {duration: 50}
+            }).then(function() {
+                // Frame timing:
+                expect(Plots.transition.calls.argsFor(0)[4].duration).toEqual(50);
+
+                // Transition timing:
+                expect(Plots.transition.calls.argsFor(0)[5].duration).toEqual(50);
+
+            }).catch(fail).then(done);
+        });
+
+        it('limits the transition duration to <= frame duration (matching per-config)', function(done) {
+            Plotly.animate(gd, ['frame0', 'frame1'], {
+                transition: [{duration: 100000}, {duration: 123456}],
+                frame: [{duration: 50}, {duration: 40}]
+            }).then(function() {
+                // Frame timing:
+                expect(Plots.transition.calls.argsFor(0)[4].duration).toEqual(50);
+                expect(Plots.transition.calls.argsFor(1)[4].duration).toEqual(40);
+
+                // Transition timing:
+                expect(Plots.transition.calls.argsFor(0)[5].duration).toEqual(50);
+                expect(Plots.transition.calls.argsFor(1)[5].duration).toEqual(40);
+
+            }).catch(fail).then(done);
+        });
+    });
 });

test/jasmine/tests/transition_test.js

@@ -8,49 +8,6 @@ var fail = require('../assets/fail_test');
 var delay = require('../assets/delay');
 var mock = require('@mocks/animation');
 
-
-describe('Plots.supplyAnimationTransitionDefaults', function() {
-    'use strict';
-
-    it('supplies transition defaults', function() {
-        expect(Plots.supplyAnimationDefaults({})).toEqual({
-            mode: 'afterall',
-            transition: {
-                duration: 500,
-                easing: 'cubic-in-out'
-            },
-            frame: {
-                duration: 500,
-                redraw: true
-            }
-        });
-    });
-
-    it('uses provided values', function() {
-        expect(Plots.supplyAnimationDefaults({
-            mode: 'next',
-            transition: {
-                duration: 600,
-                easing: 'elastic-in-out'
-            },
-            frame: {
-                duration: 700,
-                redraw: false
-            }
-        })).toEqual({
-            mode: 'next',
-            transition: {
-                duration: 600,
-                easing: 'elastic-in-out'
-            },
-            frame: {
-                duration: 700,
-                redraw: false
-            }
-        });
-    });
-});
-
 function runTests(transitionDuration) {
     describe('Plots.transition (duration = ' + transitionDuration + ')', function() {
         'use strict';