Jump to content
GreenSock

Wordpress x GSAP


| Cassie
13136

WordPress powers most of the sites on the web, so it's no surprise that we get a lot of questions about integration over in the GSAP forums. We've collected together some tips, links and resources to get you up and running in no time.

Quick Start

First up we need to load the GSAP files by enqueueing the scripts in our functions.php file. If you're using a GSAP plugin like ScrollTrigger you'll add it in here too. Plugins and the file you're writing your own animation code in should both be passed gsap-js as a dependency.

< ? php
// The proper way to enqueue GSAP script in WordPress

// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script(){
  // The core GSAP library
  wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true );
  // ScrollTrigger - with gsap.js passed as a dependency
  wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true );
    // Your animation code file - with gsap.js passed as a dependency
  wp_enqueue_script( 'gsap-js2', get_template_directory_uri() . 'js/app.js', array('gsap-js'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

Note that if you're using a premium theme or something off the shelf, like Divi or one of the core themes, then editing the `functions.php` file directly isn't advisable: themes like this are updated regularly, and any edits you make - including enqueuing GSAP - will get overwritten.

Creating a child theme is out of the scope of this article, but the WordPress Developer Resources for Child Themes have plenty of information.

------

In order to animate elements we need access to them. This script below uses an event listener to check that the DOM content is all loaded before running the animation code! If you're having issues - make sure to check your console to make sure the logs are firing.

App.js

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event){
  
  console.log("DOM loaded");
  
  //wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e){
  
    //custom GSAP code goes here
    // This tween will rotate an element with a class of .my-element
    gsap.to('.my-element', {
      rotation: 360,
      duration: 2,
      ease: 'bounce.out'
    })
  
    console.log("window loaded");
  }, false);
  
});

YouTube Tutorials

These tutorials cover the most common ways to use GSAP in wordpress, a more in depth look at Enqueuing, a more visual approach using a GUI with motion.page and through a scripts organizer plugin.

  • Like 1

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock



User Feedback

Recommended Comments

Has anyone managed to get this method to work.  My first GSAP animation worked when I placed everything on the actual page (see image), but this method doesn't seem to work for other animations. If I try the above method nothing seems to happen and the animations don't work. Have tried most of the methods on Youtube so assume it must be only me!

 

 image.thumb.png.0d794c7f95ba57d61793fa6de603a690.png

Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×