Actions & Animations Simplified Menu
The steps outlined above for animations also apply to actions. However, let’s define the types of actions to choose from. External link is when you want to link to another URL. Once set, in the advanced tab, we can further define how this URL opens. This URL can open in a new browser tab, in place of the current tab, in an iframe on top of your current browser window. Go to page is an action for internal navigation within your project. Examples of when to use this are when creating your own page navigation. Often times footers are utilized to direct readers to click through to the next page, or a table of contents page can be created where click-thrus can take our readers to specific pages in our project. There are also options to have the element take the reader to the next page or previous page in the page list. Next page and previous page carousel will return the reader to the first page if there were at the last page and hit next page in a call-to-action. Social share is a way to have our element share the page to Facebook, Twitter, LinkedIn, Pinterest, Google+, or Email. The details of how the shared information is aggregated is controlled in the SEO settings Set style is an action that either On tap/click, or on hover over, you can have your element's appearance change. First, style how you want your element to look. Save this style in your style templates. More here on how to create style templates. Once your element's style is saved as a style template, give the element the Set Style action. Set the style template you want it to take when the event occurs. Reset style is an action that very often couples with "Set Style". When the event is triggered a second time, you can set it so that the element resets back to its original appearance. Check out our video about more things you can do with the set style and reset style options.
Simplified option for animations
The editor now has a play and reload button that allows you to preview your actions right in the editor, so there is no need to go back and forth between the editor and preview link. The gif below shows how clicking the reload button lets you see how the page will look when a visitor visits your site. The keyboard shortcut for playing and pausing the actions is ALT+P.
Testing your Actions
Animations are great for having your element transition in or transition out on your page. To set an animation 1. Select an element you want to set an animation on. Click the actions menu for that element. The animation tab contains a number of common animations to enhance your page. Mouse over each selection to see how the animation looks on your element. Click on the animation you want to set. 2. “What triggers the animation? This next option is where you’ll decide what interaction will cause the element to animate
- Click (tap on mobile devices) means that clicking on this element will cause it for animate.
- Desktop utilizes the mouse cursor, so for desktop devices we can set a mouse cursor hover over to cause the animation, as well as a mouse cursor hover away to cause the animation.
- Element shown and element hidden means when the element leaves the visible area of the screen, the animation will start. More about On Element Display here.
- Page display means when the page loads, the animation will start. Best practice for page display is to have it on an element that appears in the viewable area of the screen initially, otherwise your animation might not be seen!
- Exit intent is for desktop devices only. When the mouse cursor leaves the area of the webpage, the animation will be triggered. See an example of an exit intent here. Once the page loads, move the mouse cursor to an area outside of the webpage. An overlay will appear.
3. The third step is optional. Here, we can choose to set a different element to be the “trigger” element. This mean clicking, hovering over, when the different element comes on display, etc., that the originally selected element will animate. An example is if we’re looking to create our own popup using a fade-in animation. We would create our box element with some text or images inside of it. The box element is going to be the element that’s going to fade-in, but perhaps we want a different element (a button for example) to be the “trigger” element. In this example, we’d have selected the box element with all our text and images in it, defined the set of animations, but at step 3, choose another element, our call-to-action, to act as the “trigger” that when clicked on, makes our box fade-in. Here’s a live example below!
Simplified options for actions
Open lightbox is a type of pre-made popup. Open lightbox popups will darken the background and display your message in a light box that stands out from the background. It also contains a close button that will close the lightbox popup when clicked/tapped. Lightbox popups are useful for when you want readers to focus on the contents of the lightbox and not the rest of the page. Open tooltip is similar to a lightbox popup, except the background isn't darkened. Use tooltip popups when the content of the tooltip needs to act as something supplementary to the main page.
Advanced options for actions and animations (click here)
I'm a textbox inside of a box element. Below me is an image inside the same box element. The box element is the area that's teal colored. The box element has an action on it that when its trigger element is click on, the box element fades in. The trigger element happens to be that CLICK HERE button you pressed. The X button at the top-right will fade out this same box.
Readz introduces a simplified way to set actions and animations.
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DELIVER BETTER EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES