Adding animations to your webpage is no longer just a mere embellishment or a decorative element today. It’s considered one of the most important factors of user experience as it’s a way to breathe life into your web page’s static layout. As we are always on the go to help ease up your work, SP Page Builder’s Interaction & Animation feature makes sure to let you accomplish just the right animation that you need for your website with minimal effort!
So in today’s article, we will walk you through some easy steps on how you can transform your simple, unadorned webpage into an interesting one with easy-to-do interaction & animation features of our very own – SP Page Builder tool. Let’s dig into it!
How Animated Website Can Lead to Better Conversions
Let’s have an extra detailed talk on this. It’s needless to say how modern websites are inclining toward having animations and interactions-oriented websites nowadays. It has been proven that animated or interactive websites bring about tons of benefits to both the users and the owners. But a good animation in design means it should have a well-thought-out purpose and should be incorporated at the right time as well as in the right place. If implemented correctly, with the right functionality, adding interactions & animations can significantly bring up the conversion rates to website owners, consequently keeping you ahead of the competition. Plus, it makes your site easier to navigate, and all these add up only to result in a better user experience and ultimately leading to better sales!
SP Page Builder Interaction & Animation is At Your Rescue
As much as interactive websites are making their place at the top of the priority list, it’s not always just a walk in the park. Chances are if you are not a professional developer, you need to hire an animation specialist or generalist with the programming skills and expertise suited for the work you need.
But with SP Page Builder at your rescue, you can have full access to creating your animation-based web page with the Interaction & Animation feature with zero coding knowledge! It has a set of powerful controls that lets you add attractive transitions and beautiful animations to your web page effortlessly.
Let’s have a quick look at what’s in SP Page Builder’s Animation and Interaction feature.
Animations
The Animations feature lets you animate your Addons, Rows (Sections), and Columns. As your website visitor scrolls down the page, the elements appear with an entrance animation. You can choose:
- Animation Type – choose the effect used for animation (fade, flip, rotate, bounce, zoom).
- Animation Duration – set how many milliseconds an animation will take to complete one cycle.
- Animation Delay – set when the animation will start, this value is defined in milliseconds.
Interactions
Let’s see what effects you can create with the interaction controls.
- Move
- Scale
- Rotate
- Skew
- Opacity
- Blur
- 3D Tilt
These controls can be categorized into two sets of settings.
Scrolling Effects: Using scrolling effects you can create animations for when visitors scroll through a web page. A motion effect is created by determining a starting and an ending point.
Mouse Effects: Using the mouse effect you can create transitions for when users hover the mouse on a particular element.
Before we go any further, let’s learn where the interaction can be used. Well, basically everywhere on a webpage. The feature is available in all the SP Page Builder addons. After going to the edit mode, choose an addon and you’ll find the “Interaction” controls right beside the “Advanced” tab.
A Short Tutorial for Better Understanding
We understand how using the Interactions and animations can still be tricky sometimes, especially if you are a beginner. To let you have a more vivid idea about the interaction and animation features here’s an example of how you can implement simple scroll-based interactions through this simple demonstration.
Step 1: Decide on Your Page Layout
First things first, decide on how you want to create your page layout and where you want to implement your animations and interactions.
For this particular demonstration, we will be taking 3 sections where we will add Animations to the first and third sections and use interactions in the 2nd sections. For easy understandability, we will be using Image and Text Block addons.
Step 2: Create a New Page With SP Page Builder
Now go ahead and create a new SP Page Builder page. To do so navigate to the Components from your Joomla dashboard and choose SP Page Builder Pro. Hit Get Started and create a new page.
Add rows to your page. Firstly we choose 12 from the column generation option to add a full horizontal row. Followed by 4+4+4 to generate 3 equal columns and lastly again choose 12 for the full horizontal row.
Step 3: Start Adding Your Addons in Accordance With Your Layout
Let’s quickly add the addons to the rows and columns you just added. For a simple demonstration, we have used Image and Text Block addons.
At this point you can also adjust the look of your section by changing the padding, enabling fluid, adding images to the background, etc.
Click on each added addon to replace the image with your selected ones and add your images. Replace the texts in your text addons. After the changes, this is what our web page looks like:
Step 4: Add Animations to a Row
Now it’s time to add some Animations to our first and last rows for some extra effects.
Select the first section and go to the Row settings from the Row Editor. Enable the Animation option.
Once you enable the Animation option you should be able to see all the built-in animations that you can implement on your rows. There are also some basic options given to personalize the animation as you want.
- Direction: The direction in which you want the animation to take place.
- Duration: The amount of time the animation takes to complete one cycle.
- Delay: The time after which the animation takes place.
For this demonstration, we will add Fade animation to our section. Direction is set to Down, Duration, and Delay fixed to 1200ms.
Similarly, we set the parameters for our last section, choosing the Zoom animation and setting the direction to Zoom. Duration and Delay are both set at 1000ms.
Your animations part is all set to go!
Step 5: Time to Add Interactions to Your Image Addon
Once you have all the addons according to your layout and you are happy about it, it’s time to jump into the fun part! Try adjusting your interaction settings now. To do so, click on each of the addons and go to the general settings to enable the Interaction While Scrolling into View.
Now choose the first image and go to the general settings to enable the interaction option. Once you enable the option, you can see by default Move Scroll Action is added at 0% and 100%. This timeline area represents the viewport of the page that is visible. The bottom of your page indicates 0%, the middle of the page indicates 50% and the top of the page indicates 100%.
Let’s start adding the rest of our Scroll Actions. Click on the ‘+’ sign to choose and add your scroll actions. At 0% we will add two more scroll actions – Scale and Opacity.
Select the Move Action keyframe and set the y-axis to -100. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.
The X and Y axes control your addons’ horizontal and vertical directions respectively. This means for X-axis, the addon moves to the right horizontally in case of positive values and moves to the left horizontally in case of negative values as you scroll down. And for Y-axis, the addon ascends vertically from bottom to top in case of positive values and descends from top to bottom in case of negative values as you scroll down.
There’s also the Z-axis to reposition an element. It controls the z-axis in 3D space which specifies how far inward or outward an element will move. For this particular demonstration, we will keep the Z-axis value to 0.
Next, select the Scale Action keyframe and set the x-axis and y-axis to 0.5. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.
With the Scale effect, you can make an element either larger or smaller in the aspect of its absolute position. A positive value makes an object stretch and a negative value makes an object shrink. Hence setting a positive or negative value for the X-axis increases or decreases the addons’ horizontal scaling. Similarly, setting a positive or negative value for the Y-axis increases or decreases the addons’ vertical scaling.
For the Opacity Action keyframe, set the opacity to 0.3 at 0%. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.
Now shift all the 100% action keyframes to 50%. This means that your created interaction will end when the page scroll comes in the middle of the viewport. To do so click on each of the action keyframes and choose the Timeline from the Interaction settings.
Now repeat the same process for the rest of the images. Click the Save button. Let’s check the final result of our image-based interaction from the preview.
Step 6: Add Interaction to Your Text Block Addon
Now let’s add some interaction to our Text addon. Click on the Text addon and go to the general settings. Choose the Interaction tab and enable the Interaction While Scrolling into View just like you did in the case of your Image addons.
For the default action keyframe Move, set the y-axis value to 40 at 0%. At 100%, set the keyframe y-axis to 0.
In addition to the default Move action keyframe, add another Action Scroll keyframe – Opacity. At 0%, keep the Opacity Value to 0, and at 100% set the Opacity value to 1.
Next, change the Timeline value from 100% to 50% for both the Scroll Action keyframes.
Repeat the same process for the rest of the Text Block addons.
Step 7: Final Result
Give yourself a pat on the back if you could follow so far! Time to check the final result:
Now isn’t that amazing? You have successfully added some awesome interaction & animations to your webpage without implementing a single line of code!
Winding Up
Hope this tutorial could give you an idea about how interaction and animation work. An interactive website not just expands your audience by instilling an everlasting impression but also retains and engages users eventually resulting in higher conversions. And SP Page Builder is there to help you accomplish your work without a single line of code. What do you think? Don’t forget to let us know your experience in the comment section.
Get SP Page Builder Pro
