Semantic-Org/Semantic-UI · error

This module requires ui transitions <https://github.com/Sema

Error message

This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>

What it means

Popup animates show/hide through the Semantic UI transition module. In show()/hide() it guards on settings.transition && $.fn.transition !== undefined && $module.transition('is supported') (popup.js:~425 and ~452); when transition support is missing it falls into the else branch and logs error.noTransition (popup.js:442 and ~469). The popup cannot animate without the transition module.

Source

Thrown at src/definitions/modules/popup.js:1457

  transition     : 'scale',

  // distance away from activating element in px
  distanceAway   : 0,

  // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding)
  jitter         : 2,

  // offset on aligning axis from calculated position
  offset         : 0,

  // maximum times to look for a position before failing (9 positions total)
  maxSearchDepth : 15,

  error: {
    invalidPosition : 'The position you specified is not a valid position',
    cannotPlace     : 'Popup does not fit within the boundaries of the viewport',
    method          : 'The method you called is not defined.',
    noTransition    : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>',
    notFound        : 'The target or popup you specified does not exist on the page'
  },

  metadata: {
    activator : 'activator',
    content   : 'content',
    html      : 'html',
    offset    : 'offset',
    position  : 'position',
    title     : 'title',
    variation : 'variation'
  },

  className   : {
    active       : 'active',
    basic        : 'basic',
    animating    : 'animating',
    dropdown     : 'dropdown',

View on GitHub (pinned to 597843ab84)

Solutions

1. Include semantic-ui-transition.js (the transition module) before/alongside popup.
2. Set transition: '' (empty) to skip animation if you intentionally drop the transition module, avoiding the guard.
3. Verify typeof $.fn.transition !== 'undefined' at runtime before initializing popup with a transition.

Example fix

// before: popup.js loaded without transition.js
$('.btn').popup(); // -> [93]

// after (option A): include transition module
<script src='semantic-ui-transition.js'></script>
<script src='semantic-ui-popup.js'></script>
// after (option B): disable animation
$('.btn').popup({ transition: '' });

if (cfg.transition !== '' && typeof $.fn.transition === 'undefined') {
  throw new Error('Popup transition module (semantic-ui-transition) is required for animations.');
}
$('.btn').popup(cfg);

function transitionAvailable(){ return typeof $.fn.transition !== 'undefined'; }

When it happens

Trigger: settings.transition is set (non-empty, the default 'scale up'/etc.) but semantic-ui-transition.js is not loaded, so $.fn.transition is undefined; OR the browser reports transitions as unsupported. The guard fails and the error logs.

Common situations: Loading popup.js without transition.js; bundlers that tree-shake transition away; custom builds that omit the transition module; upgrading and losing the transition dependency.

Related errors

• The position you specified is not a valid position
• Popup does not fit within the boundaries of the viewport
• The target or popup you specified does not exist on the page
• jquery-serialize-object is required to add form data to an e
• History requires Asual's Address library <https://github.com

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