State Transitions

Create interactive transitions for any button, icon, or image. This widget animates elements for a seamless conversion throughout all state changes. With customizable options, you have design flexibility and the power to apply the transitions to anything you've made.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial release


  • Drag the widget from the library and drop into your project in Design mode.
  • Since the widget applies transformations to other elements on your site, you may place the widget out of the way, off canvas.
  • Create the element you would like to apply a state transition to. We usually use State Buttons.
  • Apply a graphic style name to the element.
  • Define the graphic style name in the widget option panel. Note that the graphic style name is shown in the widget preview in order to easily see what widget applies to what element when multiples are used.
  • Set Transition Time and Delay Before Transition appropriately for the desired effect.
  • Use the Easing Style to set appropriate easing.

We encourage watching the tutorial video above to see several examples of different state transitions

Use as many instances of the widget as you like. Duplicating the widget is a quick and easy way to create additional instances

Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links