This content originally appeared on Blog and was authored by Blog
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' ); ?> https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js
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.
This content originally appeared on Blog and was authored by Blog
Blog | Sciencx (2022-11-17T16:34:00+00:00) WordPress x GSAP. Retrieved from https://www.scien.cx/2022/11/17/wordpress-x-gsap/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.