The devil is in the details, as the saying goes, so why not bring your design to the next level with adding just a couple of small finishing touches? The sliding interaction will focus the attention on the given part of the design in a subtle way.
In this example we’ll make reading recommendations slide in order to reveal the full titles.
There are two ways to achieve this effect:
- By using “Move by” interaction
- By creating an advanced animation
Let’s start with the “Move by” interaction.
Step 1 – Prepare your layers
In this case we have:
– 3 book covers in similar sizes
– A background box for the entire element
– 2 text elements – Title and subtitle
We have also named the elements appropriately to ease the process later on.
Step 2 – Group the books
Once you name the layers and assemble your design order, group the elements you want to slide. This way your interaction will work smoothly!
Step 3 – Set up “move by” interaction for the 1st book
So, basically what we want to do is simply move one book by 50px to the right. The easiest way to is add the interaction on hover and action ”move by” to the book group, just like shown here:
Step 4 – Set up “move by” interaction for the 2nd book
Now all that’s left is simply add a corresponding interaction to the same group, but this time, we’ll be moving book 3 by 50 pixels to the left.
Remember to include “-” before the value!
The middle book stays in its place.
You can see the whole process of adding the proper interactions here:
That’s it! You can go and preview the sliding just now or…
You can try setting it up using advanced animations instead.
Step 1 and 2 stay the same, but here’s what we’ll do differently.
Select your books group and move to the interactions section. There select Hover as your trigger and action as “Advanced.” This will open the advanced animation editor where you’ll be able to move your elements.
Just remember to double-click on the group to activate its edit mode before you start changing their position.
That’s all – you’ve just built the sliding animation and learned more about our interactions and advanced animations! You can also experiment with different interaction effects.
Click here to see how it works.
You can now use what you’ve learned here to create more complex designs! YAY!