Invalid property "start" - ScrollTrigger

[alecosta]

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.

[alecosta]

It was my fault, the correct code is

// 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: {
        trigger: ".c", // start the animation when ".box" enters the viewport (once)
        start: "20px 80%"
        }, 
        x: 500
    });
      
    }, false);   
});

Please cancel this topic or mark it as resolved

[ZachSaucier]

Hey alecosta and welcome to the GreenSock forums.

 

5 hours ago, alecosta said:

Please cancel this topic or mark it as resolved

We disable users deleting their own topics on purpose because this thread might be useful to others later on  Thanks for posting your solution!