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 (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • I loved this tip! Was wondering…the page that I’m using it on has a background image in the section. I was intrigued by the “Gradients with an image and blending mode” example for granim.js. However, I lack the javascript skills to convert it to use for Oxygen. both in loading the image and emulating the css “cover” attribute. It just throws an error message. In the meantime, I just took your basic code and changed the “opacity: [1, 1],” in line 5 of the javascript to “opacity: [0.3, 0.3],” Still gives me the background image but with a nice, subtle color shift. I’m pretty happy with that, but still wondering about the other… Anyway, thanks so much for this!

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: