Conditional check if gsap and plugins are installed

[AdventurousDeveloper]

Hey everyone,

 

Sorry if this has been asked before... My use case is using GSAP and GSAP plugins within WordPress ACF Blocks. I'm not using React or anything fancy like that..

 

I am wondering if there is a best practise way or solution to check if GSAP is available and if required, specific GSAP plugins have been registered e.g ScrollTrigger before running javascript functions? My thoughts were to run maybe a global check and place all my functions inside of it. Whether that's the most efficient way of doing it I'm not sure... 

 

Appreciate any input or advice 😅

 

Cheers,

 

 

[GreenSock]

Hm, so you don't have control over what's loaded? 

 

You can use typeof() to see if something exists, like:

if (typeof(gsap) === "object") {
  // gsap exists!
  if (typeof(ScrollTrigger) !== "undefined") {
    // ScrollTrigger exists
  }
}

 

Does that help? 

[AdventurousDeveloper]

Hey Jack @GreenSock,

 

Thanks heaps for taking the time to reply! I do have control over how GSAP and ScrollTrigger are loaded using wp_enqueue_scripts. What I was hoping to achieve with this was more or less a fallback if GSAP and ScrollTrigger weren't avaliable. But i'm not sure if this is actually just overkill.. Reason for wanting something like this is because the blocks created will be reused throughout other website builds, so it's more of an internal check tool.

 

Your solution of using typeof() is great thank you. GSAP returned as an object as you mentioned in your example. Though the ScrollTrigger check couldn't be checked as an object, but as a function. It works, but is this the right way of checking for plugins?

 

if ( typeof (gsap) === 'object' ) {
	
	console.log('GSAP installed')
	
	if ( typeof (ScrollTrigger) === 'function' ) {
		
		console.log('ScrollTrigger installed')
		
	} else {
		
		console.log('ScrollTrigger required')
		
	}
	
} else {
	
	console.log('GSAP required')
	
}

 

Thanks again!

[GreenSock]

Yeah, sorry, you can just check to make sure it's not "undefined". That should be adequate. I edited my previous answer.