Wondering how you can elevate your website experience to be smoother and more intuitive? Well, say hello to micro interactions, the one true solution to all your clunky website woes!
Check out our list of the top 5 micro interactions to craft visually for WordPress sites below!
Crafting Micro Interactions With No Code
Micro interactions are subtle animations that provide visual feedback to users, either triggered by their actions or by some pre-defined conditions being met.
With Kirki, crafting them is a matter of just a few clicks and not a single line of code. So tag along as we walk you through five micro interactions built entirely visually using Kirki!
1. Animated CTA
Animated CTA is one of the most popular and essential micro interactions a website can have. Triggered by a button click, it communicates the success or failure of a user’s action instantly.
Note: In this example, we’ll animate an Add to Cart button to confirm an item has been successfully added to the cart!
Step 1: Design Your Feedback
Start by duplicating your button text element and changing its content to your feedback message.
Select the original button text element, go to the Design tab on the right panel, and set its width to Auto and enable Clip Content by toggling the overflow to Hidden under Sizing.
Then detach the feedback text’s class, set its width to 0, and apply the same Clip Content / Hidden overflow setting.
Note: Make sure your button’s layout is set to Flex with direction set to Row, and both alignment and justification centered, all under the Design tab.
Step 2: Set Trigger
Select the button, then open the Interaction tab on the right panel. Click Add trigger + and select Click (tap).
Step 3: Define Rules
Under 1st Click, click the + to add a response. In the timeline that opens at the bottom of the canvas, select the button text element from the Layers panel as your target.
Add a Size action and set the width to 0 to hide it.
Then select the feedback text element and add another Size action, setting its width to Auto to reveal it.
Finally, select the icon, add a Rotate action, and set the Y value to 180° so it flips on click.
Step 4: Reset to the Original State
Duplicate the response under 1st Click to create a reset. In this duplicate, set the feedback text width back to 0, the button text width back to Auto, and the icon rotation back to 0°.
Set a delay of 3000ms on each action in the timeline so the reset fires after the initial animation.
Then duplicate both responses for 2nd Click so the button behaves consistently on every subsequent click!
2. Page Scroll Progress Bar
Users can easily lose track of their position on long pages. A scroll progress bar that expands and contracts as they scroll solves this instantly!
Step 1: Design Your Progress Bar
Add a Section element to your page and in the Design tab, set its width to 0 and height to 5px. Give it a solid color fill under Style.
Step 2: Set Trigger
Click on your Page in the Layers panel, open the Interaction tab, click Add trigger +, and select While element is scrolling.
Step 3: Define Rules
In the timeline at the bottom, select your progress bar as the target. Add a Size action and set the width to 100%, dragging the action bar so it spans the full start-to-end range on the timeline.
Step 4: Fix Position
Back in the Design tab, set the progress bar’s position to Sticky and pin the origin to the top left corner.
Set its z-index to a high value to ensure it always sits above all other elements on the page.
Your progress bar will now expand and contract as users scroll, keeping them oriented at all times!
3. Content Reveal on Scroll
This micro interaction reveals content as it scrolls into view, naturally guiding the user’s attention down the page.
Step 1: Hide Your Content
Select the element you want to reveal. In the Design tab, scroll down to Opacity under Style and set it to 25%.
Step 2: Set Trigger
With the element still selected, go to the Interaction tab, click Add trigger +, and choose Scroll into view.
Step 3: Define Rules
In the timeline, select the same element as your target. Add a filter/opacity action and set the value to 100%.
Then add a Move action and set the vertical shift to -25px for a smooth upward reveal.
In the timeline, set both actions’ duration to 1000ms and add a delay of 100ms.
Step 4: Reset to the Original State
Duplicate the response and set it to trigger on scroll out of view. Reset the opacity to 0%, the vertical move to 0px, and the delay to 0ms.
Repeat for any other elements on the page!
4. Parallax Effect
A parallax effect keeps the background fixed while foreground content moves on scroll, a simple but striking way to add depth to your pages.
Step 1: Set Up the Parallax Effect
Select your page or section, go to the Design tab, and add an image background under Style. Upload your image via the media manager.
Set the background attachment to Fixed; this single setting is what creates the parallax illusion.
Set the background position to Center and size to Cover.
That’s all it takes! One setting in the Design tab, and your parallax effect is live.
Tip: Make it even more dynamic by going to the Interaction tab and adding scroll-based Move or Rotate actions to foreground elements!
5. Tooltips
Tooltips are small messages that appear on hover, giving users instant contextual feedback right where they need it.
Step 1: Create Your Tooltip Structure
Add a Div element to your canvas and nest another Div inside it. In the Layers panel, rename the parent Tooltip Wrap and the child Tooltip Target. Add a Text element inside Tooltip Target for your message.
Place the Tooltip Wrap where your trigger element lives and move the trigger inside it.
In the Design tab, set the Tooltip Wrap’s layout to Flex, direction to Column, position to Relative, and z-index to 2.
Style the Tooltip Target — add a background fill, border, and border radius under Style. Update the tooltip text content, then set Tooltip Target’s position to Absolute and use the offset controls in the Design tab to position it where you want it to appear.
Step 2: Set Trigger
Select the Tooltip Wrap, go to the Interaction tab, click Add trigger +, and choose Hover.
Step 3: Define Rules
In the timeline, select the Tooltip Target as your target. Add an Opacity action and set it to 100%.
Step 4: Reset to the Original State
Duplicate the response and set it to trigger on hover out. Reset the opacity to 0%.
Finally, set the Tooltip Target’s default opacity to 0% in the Design tab so it’s hidden until hovered.
Wrapping Up
Those were the top 5 micro interactions you can craft visually for WordPress sites with the Kirki WordPress builder. And this is just the beginning.
Get Kirki today and unlock endless design possibilities on WordPress’s first freeform, infinite canvas website builder!