12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Oct 2, 2018

Gradients Animation in Oxygen

Sridhar Katakam

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.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.