In this article I'll help you utilize box animations to create smoother transitions (by thinking out of the ... box?) 😎
Anyway... Enjoy!
Nico, CX Specialist | Zuuvi
Follow the step-by-step guide in the video below to learn how to do it yourself in Zuuvi Studio.
Figured It Out?
You should end up with something like this if you followed the steps in the video.
These box-designs can look super sleek and will help keep your audience's attention.
Prefer Reading the Guide?
Below you'll find the guide from the video written out step-by-step.
Just to be clear... A box is just a rectangle. You can make it just the size you want. It's up to you 🤓
First Things Before Adding Animation:
-
Add your elements (text, rectangles, and images) and place the layers in the right order.
-
If you want some elements to animate the same way, you can add them to a group.
Let's move the boxes around with the "Move" animation.
When using the move animation you need to add a value to the X (left/right-movement) - or Y (up/down) value. You find the animation editing menu to the right. You also can edit Start, Duration, and much more in the menu.
See the settings for the move animations of our example below.
Pink box (background)
-
Direction: "End with"
-
Y Value: 720 pixels
-
Easing: Power 3,
-
Easing Type: In Out
Let's Resize with the animation Resize X (Resize Width).
You can show an element behind a box with this animation.
Animation settings:
-
Direction: "End with"
-
X Value: 0
-
Easing: Power 3
- Easing type: In Out
That's it!
Go nuts with your new learned skills and most importantly - think out of the box!