In this guide we’ll briefly look at OxyPowerPack’s Interactivity Engine. What it does, how to use it & what types of everyday things it can be useful for.
It’s something we’ll be using in future tutorials for creating different types of user interactions in Oxygen. So, to prevent repeating the same information later, this post can lay the groundwork for some basic understanding & show some simple use cases with the settings needed to implement them.
OxyPowerPack is an Oxygen add-on, adding some new dynamic components to Oxygen and bringing some new functionality for us to use on existing elements.
We won’t go over the full functionality of the plugin. In short, there are parallax effects, adding attributes, lazy loading, adding tooltips, countdown timers, maintenance mode etc. Details are found on the OxyPowerPack website with documentation being added.
The OxyPowerPack interactivity engine is found inside the drawer that appears at the bottom of the screen after clicking the small OxyPowerPack symbol inside the builder.
After clicking on any element and selecting ‘Interactivity’ from the tabs at the top, we can see the available options. (It’s recommended to ‘dock’ the drawer to prevent it from closing while working with the Interactivity Engine. There is a button on the top right of the drawer for this).
Taking a closer look, we have a list of ‘Events’ to choose from on the left side and then a list of ‘Event Actions’, which we can tie to those events, on the right side.
The events come in two types, global events and events that are specific to the selected element;
We have global events such as..
And we have element specific events such as..
Once we have chosen an event, we can then choose which action(s) we want that event to trigger.
Here are some examples of the actions;
Multiple actions can be triggered by a single event and the order of the actions can be changed by just dragging and dropping the action into the correct order in the list.
We can also add little comments to each action so we don’t lose track of what everything is for.
Just looking at the list of available events and actions probably already brings up some ideas of what we can create.
Being able to match any event with any action means we could obviously do some absurd things such as scrolling the user to the bottom of the page every time they hover over an element. Or redirect the user to another page every time they first start scrolling a page.
But in terms of actually creating useful experiences for users, here are some simple use cases with the settings needed to implement them..
Event: Contact Form 7 submitted
Action: Set Text
Action Settings: We need to choose the selector of the text element or heading which we intend to change the text of. Then type in the new text in the ‘text’ field. For now, be careful not to use apostrophes in the text.
Event: Countdown Timer Finished
Event Settings: We can choose a selector for a specific countdown timer, or it can be left blank if there is only one countdown timer on the page.
1st Action: Alert
Settings: We add the text that needs to be inside the alert
2nd Action: Redirect
Action Settings: The URL of the next page to redirect them to.
This requires the comment section to be initially hidden with display: none; and a button or div to be added to act as the trigger.
Action Settings: We can choose if we want a fade effect when the comments are revealed. Then we add the class or ID of the element we want to be as the trigger, our button.
There are also more examples on the OPP site, showing the functionality, found on the interactivity engine page.
In upcoming tutorials, we’ll be looking at creating more complicated user interactions, especially making use of the action ‘toggle class’ and how we can use with Oxygen’s built in style settings and with custom CSS.
The action ‘toggle class’ can be very useful as a way to have more control over how elements are revealed/transformed using CSS only. We can make an element do pretty much anything we want by just adding a class to it and then removing that class dynamically. This is often how off-canvas elements are built, or more fancy effects that happen when a user clicks on an element. The limitation is then only in the styles that we apply to that toggled class.