Hello,
I'm having a issue with ScrollTrigger on a WordPress installation.
This is my enqueue script in functions.php
function my_gsap_script() {
wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/gsap.min.js', array(), false, true );
wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/ScrollTrigger.min.js', array(), false, true );
wp_enqueue_script( 'script_home', get_template_directory_uri() . '/js/my_gsap.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_gsap_script' );
Here's the code of my_gsap.js:
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
// wait until images, links, fonts, stylesheets, and js is loaded
window.addEventListener("load", function(e) {
// custom GSAP code goes here
gsap.registerPlugin(ScrollTrigger);
gsap.to(".c", {
scrollTrigger: ".c", // start the animation when ".box" enters the viewport (once)
x: 500,
duration: 3
});
}, false);
});
The code works correctly: when the ".c" element appears on the screen, it moves along the x axis.
However, if I add the "start" parameter after duration, like so:
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
// wait until images, links, fonts, stylesheets, and js is loaded
window.addEventListener("load", function(e) {
// custom GSAP code goes here
gsap.registerPlugin(ScrollTrigger);
gsap.to(".c", {
scrollTrigger: ".c", // start the animation when ".box" enters the viewport (once)
x: 500,
duration: 3,
start: "20px 80%"
});
}, false);
});
The ".c" element still moves as soon as it appears on the screen, and the console says: Invalid property start set to 20px 80% Missing plugin? gsap.registerPlugin().
Please help.
