← All posts

GSAP Animations in Oxygen Builder with Scripts Organizer

scripts organizer

Adding a GSAP animation to an Oxygen Builder page usually means pasting JavaScript into a code block, and then watching the animation fire every time the editor reloads. In this short video we use Scripts Organizer to animate an Oxygen headline, keep the animation out of the builder, and load the script only on the page that uses it.

Animate an Oxygen element with GSAP

To animate an element you need a selector you can rely on. Oxygen gives every element an ID, so we take it from the browser dev tools. In the video the headline is <h2 id="headline-7-231">.

  1. Open the page on the front end, inspect the headline and copy its ID.
  2. In Scripts Organizer → Code Blocks, open your code block (ours is named Animation).
  3. On the Footer tab, set the language to Javascript and check Create file.
  4. Paste the ID into the gsap.from() call and click Update.
function init(){
    gsap.from("#headline-7-231", {
        duration: 2,
        y: 100,
        autoAlpha: 0,
    });
}

window.addEventListener("load", init)

Reload the page and the headline slides up and fades in.

Keep the animation out of the Oxygen editor

An animation that plays inside the builder gets in the way while you edit. Turn on Exclude page builders under Enable Code Block. The script still runs for visitors on the front end, but it no longer runs inside the Oxygen editor.

Load the script from an Oxygen Code Block

Sometimes you want the script loaded only on pages where you place it, not by a global condition.

  1. In the Oxygen editor, open Structure and add a Code Block.
  2. Deactivate or trash the Scripts Organizer code block you no longer need. In the video, none of the scripts in the Code Blocks list are active at this point.
  3. Go to Scripts Organizer → Scripts Manager, open the PHP option and copy the snippet it gives you.
  4. Paste that snippet into the PHP part of the Oxygen Code Block and Save.

The GSAP script now loads from that Oxygen element, and the animation works on the front end. Scripts Organizer holds the code in one place, and Oxygen decides which page gets it.

Get Scripts Organizer → dplugins.com

Related posts