alecosta Posted October 2, 2020 Share Posted October 2, 2020 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. Link to comment Share on other sites More sharing options...
alecosta Posted October 2, 2020 Author Share Posted October 2, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 2, 2020 Share Posted October 2, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now