Add on-click interactivity to elements

Add on-click interactivity to elements

Applying CSS transitions when using Toggle modifier

You can apply CSS transitions to an element so it animates smoothly from its default appearance to its appearance when a modifier is applied.

To ensure the transition only applies when the modifier is applied and not in other situations, for example when the browser is resized or the page first loads, Site Studio includes a specific transition class coh-transition. This class is added when a modifier is applied at the start of a transition and then removed at the end of a transition.

To ensure a consistent transition works consistently when modifiers are applied:

1. Add a modifier class .coh-transition to the element that is going to be transitioned
2. Click on the modifier to add CSS properties to it
3. Click on the Properties > Transform and transition > Transitions
4. Add your transitions to the form. These will be applied to the .coh-transition modifier
5. Click Apply.

Toggle a jQuery animation on an element

You can use jQuery animations on Buttons, Links and Containers to animate an element on-click.

1. To use Toggle modifier, open the settings of a Button element
2. In the Type drop-down, select Modifier and/or jQuery animation
3. A section called Toggle jQuery animation is displayed below in the form
4. Within this section, in the jQuery animation dropdown there are multiple animation options. Each option has specific settings
5. Using the Fade option as an example, additional fields are displayed in the form
   1. Scope to - Used to limit the animation to elements within the specified scope
   2. Target - The target selector which the animation will be applied to
   3. Easing - Used to set an animation curve
   4. Duration - The length of the animation in milliseconds 

Applying CSS transitions when using Toggle modifier

You can apply CSS transitions to an element so it animates smoothly from its default appearance to its appearance when a modifier is applied.

To ensure the transition only applies when the modifier is applied and not in other situations, for example when the browser is resized or the page first loads, Site Studio includes a specific transition class coh-transition. This class is added when a modifier is applied at the start of a transition and then removed at the end of a transition.

To ensure a consistent transition works consistently when modifiers are applied:

1. Add a modifier class .coh-transition to the element that is going to be transitioned
2. Click on the modifier to add CSS properties to it
3. Click on the Properties > Transform and transition > Transitions
4. Add your transitions to the form. These will be applied to the .coh-transition modifier
5. Click Apply.

Toggle a jQuery animation on an element

You can use jQuery animations on Buttons, Links and Containers to animate an element on-click.

1. To use Toggle modifier, open the settings of a Button element
2. In the Type drop-down, select Modifier and/or jQuery animation
3. A section called Toggle jQuery animation is displayed below in the form
4. Within this section, in the jQuery animation dropdown there are multiple animation options. Each option has specific settings
5. Using the Fade option as an example, additional fields are displayed in the form
   1. Scope to - Used to limit the animation to elements within the specified scope
   2. Target - The target selector which the animation will be applied to
   3. Easing - Used to set an animation curve
   4. Duration - The length of the animation in milliseconds