Wordpress Gsap Integration

dileepkp123 · March 7, 2020

Hi everyone,

I`m completely new to GreenSock and I`d like to learn how to integrate it in WordPress 5. I'm working on a WP website and I'm developing my own child theme. But Its not working its shows "uncaught referenceerror $ is not defined "

This is my function.php

wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );

wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );

wp_enqueue_script( 'gsap-js', '//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );

wp_enqueue_script( 'gsap1-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js', array(), false, true );

wp_enqueue_script( 'gsap2-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js', array(), false, true );

wp_enqueue_script( 'gsap3-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js', array(), false, true );

ZachSaucier · March 7, 2020

Hey dileepkp123 and welcome to the GreenSock forums!

First off, that error has nothing to do with GSAP. It likely means that you are trying to use jQuery but are not loading it correctly (if at all). Loading jQuery before the script that is attempting to use it should fix that error.

Secondly, you are attempting to use two really old versions of GSAP. We highly recommend using GSAP 3. You can use the URL here: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js

If you use GSAP 3, you don't have to load TweenMax, TimelineLite, CSSPlugin, or likely EasePack (unless you need the eases included in it). Thus you can replace all of the code above with the following:

wp_enqueue_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js', array(), false, true );

It's hard for us to help much more than that given we cannot see your setup. But please let us know if you have questions and we'll be happy to help however we can!