Wordpress x GSAP

Sign in to follow this   Followers 15

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.

 

Enqueue Scripts in wordpress

 

Animate using a GUI with motion.page

 

Oxygen builder and scripts organiser