← All posts

Reuse a Registered GSAP Script in Scripts Organizer

scripts organizer

Once you have animations on more than one page, the easy mistake is to paste the GSAP library into every snippet. The library then loads more than once and gives you more places to update. In Scripts Organizer you can register a script once and reuse it. Every code block that needs it calls the registered script, and each block keeps its own page conditions and settings.

The starting point: one animation on the home page

The first code block, Animation, already runs a GSAP animation on the home page only. Its settings:

  • Trigger location: Conditions
  • Script Location: Footer
  • Template: Page, Post, with Home chosen under Select Page/Post

The footer code animates the page title:

function init(){
    gsap.from(".entry-title", {
        duration: 2,
        y: 100,
        autoAlpha: 0,
    });
}

window.addEventListener("load", init)

Add a second block for the checkout page

Now the checkout page needs its own animation, with different settings. It shouldn't load GSAP a second time.

  1. Create a new code block. Set its conditions to the checkout page and put the code in the Footer tab.
  2. Paste the animation and change the values. In this example the duration is 10 seconds and the title moves along x instead of y:
function init(){
    gsap.from(".entry-title", {
        duration: 10,
        x: 100,
        autoAlpha: 0,
    });
}

window.addEventListener("load", init)
  1. Under Scripts Manager, click Show.
  2. Click the Enqueue Scripts field and choose your registered library. In the video it is GSAP Code.
  3. Click Publish.

Result

The home page and the checkout page each run their own animation, and both use the same registered GSAP library. If you need to change the library, you change it in one place, and every block that enqueues it gets the change.

Get Scripts Organizer → dplugins.com

Related posts