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.