All Collections
Element Tutorials
Animating your Shogun Content
Animating your Shogun Content

Introducing Content Animations! Use our new point-and-click controls to add beautiful interactive animations to your page elements.

Updated over a week ago

How to animate your Shogun content

Adding Animations

When an element on the canvas is selected, click the Styles Tab to reveal new animation options.

Animations are currently available for the following elements:

  • Button

  • Columns

  • Container

  • Heading

  • Image

  • Text

  • More coming soon!

Scroll In View vs Mouse Over

There are two different animation triggers:

  • Scroll In View animations will trigger when the corresponding element enters the user's viewport.

  • Mouse Over animations will trigger when the user's cursor is over the corresponding element.

Use Advanced Settings To Customize Your Animation

Once you've selected an animation, Advanced Settings are made available if you want further customization.

  • Delay

    • This determines the amount of time that the animation will trigger after either coming into view, or being hovered over with the mouse

  • Duration

    • This determines the amount of time the animation takes from start to end.

  • Iteration Count

    • This determines how many times the animation should occur each time it is triggered.

  • Trigger Once

    • This determines whether the animation should trigger every time the element is either scrolled into view or moused over, or if it should only happen once per page load.

Viewing and previewing animations

To preview an animation before adding it to an element, hover over the animation name in the list of animations.

Animations will trigger when Previewing a Page and when Viewing Live Pages.

Did this answer your question?