Gradients Animation in Oxygen

This members-only tutorial provides the steps to set up a gradient animation as background for a section in Oxygen using Granim.js.

Note: The actual animation will be smoother unlike what got captured in the above screencast. See the examples page for a realistic idea.

Step 1

Add a Section in the Oxygen editor.

Since you will most likely be having white color text in the Section, you might want to set the starting color in the gradient pair as a Background Color. In this example, let's set it to #aa076b.

Set Text Color to #ffffff.

To ensure that the gradient animation is seen, let's bump up the height of the Section by increasing the top and bottom padding from the default 75px to say, 100px each.