Archived topic
Javascript animation not working from hook but works when ran in the console
7 replies · Started by James on July 31, 2022
I am experimenting with the Greensock animation library. I have a simple animation staged using the details in the below codepen (HTML block, CSS in the styles.css, JS added to a GP hook).
https://codepen.io/GreenSock/pen/JjYPQpN?editors=0110
I am sourcing the gsap library via the below php code invoked in my functions.php on a gp child theme. I see the library in the page sources so I believe this is working as expected.
<?php
// https://greensock.com/forums/topic/19908-wordpress-5-integration/
// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js-scroll-trigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js-custom', get_stylesheet_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>
I've pasted the code from the hook below. When I load the page I see the hook in the footer on page inspect, but the animation doesn't trigger. When I take the same code and execute it in the console, the animation work.
<script type="text/javascript">
gsap.to(".pContent", {
yPercent: -100,
ease: "none",
scrollTrigger: {
trigger: ".pSection",
// start: "top bottom", // the default values
// end: "bottom top",
scrub: true,
markers: true
},
});
gsap.to(".pImage", {
yPercent: 50,
ease: "none",
scrollTrigger: {
trigger: ".pSection",
// start: "top bottom", // the default values
// end: "bottom top",
scrub: true,
markers: true
},
});
</script>
I also tried bumping down the php priority on my hook in case that let the library load first, but that had no effect and I am not exactly sure of all the mechanics there.
Appreciate any advice!
Hi James,
I can’t seem to access the site. Can you check if it’s accessible?
Sorry, did the wrong server. Also note that some of the images won't load, but the animation near the bottom of the home page isn't affected.
Also I will be at a conference this week, so won't be able to get back to my home workstation until Friday / Saturday to respond.
Hi James,
The new link attached leads to a 404 page, can you check again?
I disabled and re-enabled the live link and have confirmed it works from my side.
Hi there,
theres a 404 error in the developers console - this resource could not be found:
https://your-website-domain.io/wp-content/themes/genpress-childtemplate/js/custom-gsap-scripts.js?ver=6.0.1
Can you check the file is in the correct location ?
Thanks for catching. After making that update I was still seeing an error that gsap was undefined. I instead added the code from the hook into the /js/custom-gsap-scripts.js and that got it to work, which is good enough for me.
Glad to hear that!