That animation is already occurring, cancelling repeated ani

Error message

That animation is already occurring, cancelling repeated animation

What it means

The string is defined under error.repeated, but in this version it is never actually emitted. The guard at transition.js:185-187 only calls module.debug('Animation is already occurring...') and returns false — module.error(error.repeated) is never invoked. So the real runtime behavior when allowRepeats is false (default) and the same animation is already running is a silent debug log plus an early return; the error string is dead config.

Source

Thrown at src/definitions/modules/transition.js:1087

    displayType: 'display'
  },

  className   : {
    animating  : 'animating',
    disabled   : 'disabled',
    hidden     : 'hidden',
    inward     : 'in',
    loading    : 'loading',
    looping    : 'looping',
    outward    : 'out',
    transition : 'transition',
    visible    : 'visible'
  },

  // possible errors
  error: {
    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to surpress this warning in production.',
    repeated    : 'That animation is already occurring, cancelling repeated animation',
    method      : 'The method you called is not defined',
    support     : 'This browser does not support CSS animations'
  }

};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

Set allowRepeats:true if you want the second trigger to run anyway.
Set queue:true so the second invocation queues behind the first instead of being dropped.
Debounce/throttle the triggering event (e.g. button click).
Enable debug:true and verbose:true to observe the debug-level message that actually fires.

Example fix

// before
$('#btn').on('click', () => $('#box').transition('fade')); // rapid clicks dropped
// after
$('#box').transition({ animation: 'fade', allowRepeats: true });

Defensive patterns

Strategy: validation

Validate before calling

// Decide up-front whether repeats should queue or run, instead of relying on the drop.
var $box = $('#box');
$('#btn').on('click', function(){
  $box.transition({ animation: 'fade', allowRepeats: true, queue: false });
});
// Debounce to avoid stacking clicks:
$('#btn2').on('click', $.debounce ? $.debounce(150, toggle) : toggle);

Prevention

Note this exact string is never emitted in this version (transition.js:186 logs at debug level) — do not chase it.
Use allowRepeats:true when re-triggering the same animation is intended.
Use queue:true when you want the second invocation to wait rather than be dropped.

When it happens

Trigger: Triggering the same animation twice in rapid succession with allowRepeats:false (default) and queue:false. With debug+verbose on you see the debug log at transition.js:186, not this error.

Common situations: Double-clicking a toggle that transitions, rapid show/hide toggling, button spam.

Related errors

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/ceeef8244401a2f9. Report an issue: GitHub.