How To Use Motion Effects For Columns
There’s a whole raft of tools in Avada when it comes to animation and transitions. There are individual Element Animations filter type options on both columns and containers, and transform options on columns. We can now add motion effects for columns to this list, so let’s take a look at the range of motion effects that can be applied to columns in Avada.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one, and if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. Okay, let’s begin.
I’m on the Avada hosting pre-built site here, and to demonstrate and explain these motion effects, I have imported a recent page template from Avada Studio. There are a couple of Avada Studio templates that demonstrate these column effects, and no doubt more of these effects will start showing up in other Studio content, but for now, this one’s called Hosting Template 3974. There’s another one called Cannabis Template 3992.
I’m in the Live Builder here, but we don’t get to see the motion effects here as that would break the interface. So let’s just have the Builder and the front end open in their own tabs, and we can go back and forth between them, but let’s start in the Builder.
The first motion effect here has been applied to this column with the server graphic, so I will edit that and head to the Extras tab. Down towards the bottom, you will find motion effects, and as you can see, there is an effect already applied to this column.
Above This is the Add Motion Effects button. To add a motion effect to the column, you just click that, and an emotion effect is applied. The way this is set up, you can add multiple effects to the same column if you wish. So if I add a new one, it comes in under the existing one.
If we edit this motion effect and click on the arrow, we can see there are three main types of effects we can apply: scroll effects, mouse effects, and this one called infinite animation. Let’s just delete that effect and have a look at the existing one. This is a mouse effect.
When you select an effect type, there are further options. With the mouse effect, there are two effect types: tracking in 3D, tilt. This one is using tracking, and below that, we can see it’s tracking in the same direction as the mouse at a speed of 1.5.
Okay, so let’s go and look at that on the front end. Here’s the column, and as you can see, as I move the mouse, the column and its contents move with me. Okay, that’s the first effect on this page. Let’s look at the next container.
As I slowly scroll, I can see this globe icon here is changing size and moving to the right, and when I hover over it, it moves up a bit. Lots going on here. Let’s go back to the Builder to see how that was achieved.
So I’ll edit this column the globe is in and head to the Extras tab. Let’s scroll right down, and here we can see two scrolling effects. We can also see below this the apply motion scroll effects on option and that the designer has chosen that these specific effects not be applied to small screens.
Okay, so let’s edit the effects. The first one is a scale effect, and we can see that it’s the scale up type.
The initial scale value is 4, and the N value is 2, which is causing it to halve in size as we scroll. So here, the designer has inverted the numbers in the option, and it’s actually scaling down. Under this are the “when” conditions. Here we can see this effect starts when the bottom of the element hits the bottom of the viewport and ends when the middle of the element hits the middle of the viewport.
With these start and end controls, you can precisely control when the effect starts and ends. You can choose from the top, middle, or bottom of the element and the same for the viewport.
Okay, let’s have a look at the second effect here. It’s also a scroll effect, but this time it’s a transition effect, and the transition here has it moving to the right at a speed of two, with the same start and stop values as the other effect. Combined with these two motion effects is another effect, but this time it’s a transform effect. If I scroll back up a bit to the transform options, we can see that the “Translate Y” option, which gets something to move up and down, is set to 30 on the normal state and 20 on Hover. So that’s how the globe was moving on Hover.
As you can see, you can combine effects in multiple ways. Okay, let’s go back to the front end and look at the next effect. As I scroll slowly down, we can see these four columns fade in, so that points to another scrolling effect. Let’s check that in the Builder. I’ll just edit one of these columns and go to the motion effects, and yes, it’s a scroll effect here, and if we edit that, we can see it’s a fade effect type, and it’s a fade-in effect.
You can obviously have fade-out as well. Here, it’s starting when the bottom of the element hits the bottom of the viewport, like before, but this time it’s ending when the bottom of the viewport hits the middle of the element, rather than the middle of the element. Again, these effects have not been applied to small screens. This is a simple yet very effective example of these column effects.
All the other columns here have the same effect applied, of course, so let’s move to the next one.
That’s this first column in the next container. If I just edit that one, we can see it’s another tracking Mouse effect, only this time it’s tracking in the opposite direction. Let’s go back to the front end and look at that. I’ll just scroll down to that section. We can see the graphic is slowly moving in the opposite direction. There’s also a rollover effect, I can see. Nice!
That would be coming from the actual image element filter effects. If we just come back and edit that element and head to the extras tab, there, we can see the brightness of the image is decreased upon rollover. Clever! As an example of how you can add multiple effects, I might just add another one. So I’ll head back to the column and the extras tab and scroll down and add a motion effect.
This time I will add a scroll effect. “Transition” is selected, and that’s the one I want. I also want the direction to be up. In the speed, I’ll set it to 4. Okay, now for the “when.” I want it to start when the top of the element reaches the bottom of the viewport, so that’s good. But I want it to end when the top of the element reaches the middle of the viewport.
And now, I want to offset this graphic, so I’ll go to the Design tab, and here I’ll set some negative bottom margin, let’s say 400 pixels. Okay, so now it’s going to start low and come back into places as I scroll.
Let’s just save these changes and come back to the front end and refresh. And now let’s scroll down slowly, and here our container comes into view, and the graphic comes up from the bottom, playing catch up. And if I move the mouse around or hover over it, we can see the other two effects are still active. So it might take a little bit of tweaking to get exactly the effect you’re chasing, but the ability to combine all these effects is what makes it so powerful.
Okay, let’s move further down the page. Okay, we have a similar thing as the globe going on here with this icon, both shrinking and rotating as I scroll, that’s interesting. If I come back and edit that column, we can see two effects. The first one is the scale effect as we saw before, and the second one is another scroll effect, but this time it’s using the rotate type.
If we just look at the type here, we can see there are five scroll effect types in all – transition, fade, scale, rotate, and blur. The only one we haven’t seen yet is blur.
Okay, if we come back to the front end and start scrolling again, the graphic transitions to the right, the column with the text moves up, and the plan columns move as well. The second and third move a lot, but I’m not sure what’s happening with the first as all the other movement is making it hard for me to spot.
Okay, some very cool effects there. So going back, we can see the graphic is in its container, and if I edit the column and go to the Effects, we can see there are actually two scroll effects here. The first one is the transition effect, and it’s moving to the right with quite a high speed, and under that is another scroll effect, and it’s actually a fade-in effect I missed before.
If I look at the start and end conditions, we can see that it starts immediately as the top of the element comes into view, but it also ends very quickly as the bottom of the element comes into view. So that perhaps explains why I missed it; the effect was over very quickly.
Again, a very effective use of these column effects. Let’s look at the next ones. The container below this has a 30-pixel negative margin, and the column with the title and text in it has another scroll effect, this time it’s transitioning in an upward direction at a medium speed of three, yeah, that makes sense.
Now, with the pricing columns, the first one I’m not sure about, with the second and the third, I’m thinking they both have the same up transition effect, just with different speeds, but I’ll start with the first one. Ah, okay, this one does actually have a scroll effect on it, and it’s transitioning up at a speed of 1.5. The movement of the other columns made that hard for me to see, but I’m sure if we turned it off, it would be obvious.
So, let’s look at columns two and three, and as expected, the second one has the same transition effect, just at a faster speed of three, and the third one will no doubt have the same one, with yet an even faster transition, yes, this time it’s at a speed of 4.5.
Okay, two more containers to go, let’s go back to the front end. If I scroll down to the map and move the mouse around, this looks like the 3D tilt effect we saw was an option before. Yeah, that would be it for that one.
And the column in the last container clearly has a blur effect applied to it. Nice! Let’s just go back and check.
Okay, the map column is first, and if we make our way to the extras column and scroll down, we can see that it is indeed a mouse effect and that it is the 3D tilt effect, and it’s moving in the opposite direction to the mouse at a speed of 2.5.
Now for the last column here, I’ll just head to that, and yes, it’s a scroll effect with the blur type. Cool! The initial blur is only minor and it ends very quickly. That’s the key with these effects, subtlety. That’s where a good designer will make all the difference.
I think the only effect we haven’t seen on this page is the infinite animation, so let’s just change that motion effect to that one.
I’ll choose pulse and set the speed to 1. Okay, let’s save that and now go back and refresh. Okay, and there’s our infinite pulsing animation. Cool!
The effects to use are always going to depend on the content you’re working with and the effect you’re going for, but in the right hands, these are powerful tools indeed. And in conjunction with element animation and the filter types, transform effects, and other column options, there is a rich palette of effects you can apply to your columns in Avada. Go for it! Just remember, less is more.
Okay, this concludes our video on how to use motion effects for columns. Make sure you subscribe to our YouTube channel to keep up with all the latest videos, and if you have any questions or need assistance, please create a support ticket, and our team will gladly assist you.
As always, we want to thank you for choosing Avada.