Chapter 411: Wordpress

Core Idea

1. First up we need to load the GSAP files by enqueueing the scripts in our functions.php file.

Code Examples

<?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://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js', array(), false, true );
       // ScrollTrigger - with gsap.js passed as a dependency
       wp_enqueue_script( 'gsap-st', 'https://cdn.jsdelivr.net/npm/gsap@3.15/dist/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' );
   ?>

• What it demonstrates: typical usage of Wordpress in a GSAP animation.

Key Takeaways

1. 1. First up we need to load the GSAP files by enqueueing the scripts in our functions.php file.

Connects To

• ScrollTrigger: related GSAP concept