We were silent for a long time. But what follows after a long painful silence? That's right, a huge update. So it's time to add more fluidity to your sites and make them even more attractive. Ladies and gentlemen, meet an Animation on Scroll, Lottie Animations, Unsurpassed Gradients, and a new awesome theme for Joomla website builder Gridbox! This is just a small part of what awaits you today. Buckle your seat belts, and let's get started!
Tired of static design? Do you want to add more uniqueness and modern experience to your sites? Animation on scroll is exactly what you are missing. Gridbox Animation on Scroll is a type of animation that is triggered by scrolling when an element is scrolled into view. At the same time, the elements move at different speeds relative to each other.
Vertical scrolling is the most common parallax effect. Vertical scrolling moves the element with the speed you set. At the same time, the speed of moving the element differs from the speed of scrolling the page. It looks interesting. However, take a look for yourself!
Horizontal scrolling is a web animation effect in which an element moves horizontally as site visitors scroll through a page. In addition to Animation Speed, there are 4 types of Scroll Direction at your disposal. Just take a look at how horizontal scrolling can refresh your page.
Scale is an effect that increases or decreases an element through animation. You can move the element in or out using the Direction option — Scale In and Scale Out. Scale animation will bring a new dimension to your content with fluidity and new interactivity.
Turn an ordinary standard page into something memorable with the Rotate animation. To do this, just set the twist direction in the element settings. Just experiment with it!
The element disappears when the page is scrolled. Actually, no, it seems to dissolve like sugar in a glass of water. It sounds pretty interesting and exciting, right? This is how Transparency animation works in Gridbox. Look at the screenshot below, and you will see what an unusual effect you can get using the Transparency animation.
Have you ever been in a situation where, after a frost, you go into a warm room, and your glasses start to slowly fog up? You will see the same thing if you start scrolling the page with the Blur effect animation. Take a look at the screenshot below, there are some similarities. Don't you think?
In the settings, you can adjust the degree of the so-called fogging and its direction. You can set options where the element will initially be blurry and become clearer after scrolling. Well, or vice versa.
Scroll animation settings are very simple and intuitive. Animation on Scroll can be applied to elements such as sections, columns, rows, and plugins. To add Animation on Scroll, go to the element settings and switch on the Enable Animation option.
You also have several options at your disposal. Let's take a look at what each of them provides.
Such simple and uncomplicated settings allow you to create an impressive user experience. Experiment and you can easily make flat site elements come to life.
Create dynamic and colorful sites with the new Gridbox plugin Lottie Animations which allows you to easily add JSON files to your pages from the LottieFiles site. Lottie is a vector graphics animation file that provides the easiest way to create dynamic animations. The important feature of this animation type is the ability to scale up or down the animation object without pixelation. Let's quickly jump into the settings and see how Lottie's animations work in Gridbox.
Joomla website builder Gridbox provides two ways to add Lottie Animations which are External URL and Source File. To choose one of the methods, in the Lottie Animations plugin settings, select Source. Add any animation by copy-pasting the Lottie animation URL from LottieFiles.
For the second method of adding Lottie animation, you need to download the Lottie JSON file. Of course, for the best performance of the site, we recommend choosing the second method of downloading the Source File to avoid additional third-party connections.
Easily customize Lottie animations. You have the option to adjust the width and centering of the elements. But this is not the most important part of the settings. Let's talk about more interesting options that will help make the animation more interesting. Namely, Triggers that start the animation. There are 4 types of triggers available for you to start Lottie animation in Gridbox.
Autoplay. The animation starts automatically.
Viewport. The animation runs only within the visible part of the screen.
On Scroll. The animation starts when the page is scrolled.
On Hover. The animation starts when you hover the mouse over an element.
Is the animation so amazing that you want to repeat it over and over again? Use the Loop option that allows you to repeat the animation indefinitely. And don't forget to set the Animation Speed for the best effect.
Perhaps you've noticed, that already in version 2.13.0.2, changes in the animation settings became available to you. Even then, we started working on a big animation update for Gridbox. We have completely redesigned the animation selection window. Now all animation in Gridbox is done in the same style.
A new Repeat Animation option has also been added. This option plays the animation again after you've already scrolled through its workspace.
In addition, in version 2.14.0, animation settings are available for more than just grid items (sections, rows, and columns). You can also customize animations for each plugin.
Gradients are back in trend. They continue to be used by the sites of large companies. But every website developer wants to be in trend. We are sure your clients want a modern design with exciting and eye-catching effects, not a bland website with only dry information. So keep up with modern web design!
Attract the attention of visitors with an unusual and colourful title with gradients. We have added the ability to add a gradient for the Headline and Text plugins.
In Gridbox 2.14.0, most of the plugins got the ability to customize gradient backgrounds. Please note that the gradient background can be customized if the Hover option is disabled.
Headlining today's update is the new Joomla template for Gridbox. Music App is a one-page Gridbox theme for creating app landing pages. We specifically created this theme to show you all the features of today's update — awesome animations, stunning gradients, and much more.
Feel dizzy from so many features, isn't it?! Today you got a ton of new features to transform static content into attractive and engaging experiences. Have fun with Lottie animations, experiment with Animation on Scroll, add gradients, and so on. Just use the new features to make the flat elements of your site come to life. Easily create a sense of depth and dimensionality on your Gridbox websites.
v.2.14.0 - 19/01/2023