elementor4fun-logo
Last update: February 24, 2019

Customize the Scroll animation effects

With Oxygen 2.2 we can now animate elements on scroll.
Not only it's a great feature with many options and lots of different types of animation, but we can also customize these animations to make our owns.

I highly recommend to go to read the official AOS page to know more about all the options :
https://github.com/michalsnik/aos/tree/v2

By default, there are 27 animation effects : fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left, flip-up, flip-down, flip-left, flip-right, slide-up, slide-down, slide-left, slide-right, zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right.

As they are CSS animations, we can easily customize them.

Example 1

For the following image, I will just apply the fade-left animation, with a duration of 1 second.
What you need to know is that the default distance for the fade and zoom animations is 100px. Which means that it will move from 100px left or right or top or bottom.

Here is the same image, with a customize fade-left animation (300px instead of 100px) :

To do so, we will use another great new feature of Oxygen 2.2: The visual controls for CSS transforms.

Step 1

Let's add a new selector (Manage > Selectors > Add Selector) called :

#image-7-560[data-aos=fade-left]

Note that as we want to apply the new effect only to one element, we have added his ID.
But if you want to apply the same effect to all the elements that will use the fade-left animation, you could simply add this selector :

[data-aos=fade-left]

We make sure our new selector is selected :

Step 2

Go to Advanced > Effects > Transform and add a new transformation. A translation of 300 px:

Step 3

Add the second selector called :

#image-7-560[data-aos=fade-left].aos-animate

Step 4

Add the same transformation but with a translation of 0.

Note that I put 00 instead of 0. It's due to a bug of Oxygen 2.2, if we put one zero only, it won't have any effect (CSS error).

That's all. We have made our own scroll animation effect.

Actually, we can (almost) do whatever we want. Here is another example.

Example 2

We can use the same animation type (fade-out) or another one. This time we will just make a zoom with a blur effect.

Step 1

Add 2 selectors :

#image-24-560[data-aos=fade-left]

#image-24-560[data-aos=fade-left].aos-animate

Step 2

Apply these effects. A scale of 0.5 and a blur of 100px for the first selector:

A scale of 1 and a blur of 0px for the second selector:

Important

There is an extra step here. The built-in animations only use the opacity and the CSS transforms for their effects.
Which means that they have this CSS:

transition-property: opacity,transform;

In this example, we use a filter (the blur effect). So we must change the transition-property.

Step 3

Select the first Selector and in Advanced > CSS,  simply add:

transition-property: opacity,transform,filter!important;

To make you understand how the animations are made, here is the full CSS list of all the effects:

[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform
}

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0)
}

[data-aos=fade-up] {
    transform: translate3d(0,100px,0)
}

[data-aos=fade-down] {
    transform: translate3d(0,-100px,0)
}

[data-aos=fade-right] {
    transform: translate3d(-100px,0,0)
}

[data-aos=fade-left] {
    transform: translate3d(100px,0,0)
}

[data-aos=fade-up-right] {
    transform: translate3d(-100px,100px,0)
}

[data-aos=fade-up-left] {
    transform: translate3d(100px,100px,0)
}

[data-aos=fade-down-right] {
    transform: translate3d(-100px,-100px,0)
}

[data-aos=fade-down-left] {
    transform: translate3d(100px,-100px,0)
}

[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity,transform
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1;
    transform: translateZ(0) scale(1)
}

[data-aos=zoom-in] {
    transform: scale(.6)
}

[data-aos=zoom-in-up] {
    transform: translate3d(0,100px,0) scale(.6)
}

[data-aos=zoom-in-down] {
    transform: translate3d(0,-100px,0) scale(.6)
}

[data-aos=zoom-in-right] {
    transform: translate3d(-100px,0,0) scale(.6)
}

[data-aos=zoom-in-left] {
    transform: translate3d(100px,0,0) scale(.6)
}

[data-aos=zoom-out] {
    transform: scale(1.2)
}

[data-aos=zoom-out-up] {
    transform: translate3d(0,100px,0) scale(1.2)
}

[data-aos=zoom-out-down] {
    transform: translate3d(0,-100px,0) scale(1.2)
}

[data-aos=zoom-out-right] {
    transform: translate3d(-100px,0,0) scale(1.2)
}

[data-aos=zoom-out-left] {
    transform: translate3d(100px,0,0) scale(1.2)
}

[data-aos^=slide][data-aos^=slide] {
    transition-property: transform
}

[data-aos^=slide][data-aos^=slide].aos-animate {
    transform: translateZ(0)
}

[data-aos=slide-up] {
    transform: translate3d(0,100%,0)
}

[data-aos=slide-down] {
    transform: translate3d(0,-100%,0)
}

[data-aos=slide-right] {
    transform: translate3d(-100%,0,0)
}

[data-aos=slide-left] {
    transform: translate3d(100%,0,0)
}

[data-aos^=flip][data-aos^=flip] {
    backface-visibility: hidden;
    transition-property: transform
}

[data-aos=flip-left] {
    transform: perspective(2500px) rotateY(-100deg)
}

[data-aos=flip-left].aos-animate {
    transform: perspective(2500px) rotateY(0)
}

[data-aos=flip-right] {
    transform: perspective(2500px) rotateY(100deg)
}

[data-aos=flip-right].aos-animate {
    transform: perspective(2500px) rotateY(0)
}

[data-aos=flip-up] {
    transform: perspective(2500px) rotateX(-100deg)
}

[data-aos=flip-up].aos-animate {
    transform: perspective(2500px) rotateX(0)
}

[data-aos=flip-down] {
    transform: perspective(2500px) rotateX(100deg)
}

[data-aos=flip-down].aos-animate {
    transform: perspective(2500px) rotateX(0)
}
closealign-justifychevron-downcaret-up