[ScrollTrigger, how to play a tween on horizontal scroll]

6 hours ago, akapowl said:

 

Hey @alecosta

 

Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work.

 

You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis.

 

I did it like so - just for example - in the following pen

 

gsap.to("#three", {
  scrollTrigger: {
        trigger: "body", // elemento oggetto dello scrolltrigger
        start: () => "0 -" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        end: () => "+=" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        scrub: true,
        //horizontal: true,
    },
    backgroundColor: "#000"
});

 

Also I added an end and a scrub - only to better demonstrate, when the tween begins and when it ends.

 

 

 

 

 

Edit (Just in case of a possible follow up question)

If your container is positioned somewhere further down on the page with content above it, you would of course have to calculate in the scroll-position / scrollTop into your start-point for that ScrollTrigger.

 

 

Hope this helps.

Cheers,

Paul

 

Thank you so much, @akapowl !

[ScrollTrigger, how to play a tween on horizontal scroll]

Hello,

I have some divs that scroll horizontally. I want to start an animation when the div id="three" appears on the screen, but I think that something is wrong in my code.

Please help!

See the Pen zYBvLRV by alessandro-costa (@alessandro-costa) on CodePen

[Invalid property "start" - ScrollTrigger]

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

[Invalid property "start" - ScrollTrigger]

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.