Animations

Add some animation to your page by bringing in entrance animation to your elements or using scroll effects. On this page, I will go to these three boxes that I have here within columns, select the column, and go to the settings and choose effects. This opens the sidebar on the right with the toolbar at the top to effects. Now you have two options here, entrance and scroll. Entrance animation allows the element that you selected to make an entrance. We I have a few here like bounce, fade, or zoom. And once you do that and you've selected one of them, you will notice that we have a few options here in the bottom to play around with as well. You can choose the direction in which you want that effect to appear, as well as how long it will take the effect to play out and when the effect will start. Put it on zero, which means it will start immediately as the page loads, or give it a little of a delay when you want it to appear after a while. If you've made changes and you cannot see the animation, you want to see how it will look, select your onreplay animation.

If it is an animation that you would like to occur all the time, like something on the tension, you can select infinite animation. This is also responsive. If I go to tablet and I'll select my column here, you will see that I can deselect the entrance animation, which is better for many tablets and mobile devices. Different to the entrance animation is scroll effects. Let's go to settings again, select effects, and then under effects, select scroll. Whereas entrance animations only work on a one by one basis, with scroll, you can actually activate more of these at the same time. Let's go ahead and select rotate. And once I do that, you will see that already there is a rotate effect applied. And this will It will happen as the user is scrolling through the page. You can see I'm scrolling up and down, and that element is rotating. In many cases, this can be very disruptive, so this is very good for design elements and images. Use it sparingly. But there are also settings over here, and that you access by clicking on the actual rotate icon. It will give you all the settings here. The direction currently is rotating left, and you can set it to rotate to right.

It is rotating around the center axis, which is X and Y, center, center. But if you wanted to rotate to any corner, we can set it to the left for the X and to the top. Now it's going to be rotating around the corner here in the top left corner. I'll put it again on right for this one and then bottom for this one. And now it will be rotating here at the bottom right. This is actually a very cool effect, and you can see it comes into play in the middle of the page. Again, Again, this works really well on desktop devices, but once you go to anything like a tablet, I'll highly recommend that you actually do not activate it because on tablets and mobile devices where people are scrolling with their fingers, it actually can get lost. Make sure you go into it and deactivate it. Bring a little bit of excitement onto your page by using the entrance animation or the scroll effects. As mentioned if you want to add more than one, you can do so by actually going a little bit wild and adding a little bit more to the effect that you are trying to achieve.