Horizontal scroll section (Wordpress)

[pardieiro]

Guys, I would like your help, I've already followed tutorials and none of them work, the Green Sock example on Codepen is with an image, I didn't understand it well.I want to make a wide section ( 5 * 100vw ) horizontal scroll

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>


<script>

    gsap.registerPlugin(ScrollTrigger);
    
    const jogos = document.querySelector(".jogos");
    
    
    let tl = gsap.timeline({
        ScrollTrigger:{
            trigger: jogos,
            start: "left left",
            end: () => "+=" + 5 * jogos.offsetWidth + "px",
            scrub: 1,
            pin: true,
        }
    });
    
    tl.to(jogos, {
        xPercent: -400,
        ease: "none",
    });
    
</script>

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[pardieiro]

 

I did it in codepen, what happens is different from wordpress, in wordpress nothing happens, but let's go by parts. In this case it happens quickly and automatically, ignoring the 100vw css

 

See the Pen VwRPPeK by pardieiro (@pardieiro) on CodePen

[mvaneijgen]

Hi @pardieiro welcome to the forum!

 

The property in a timeline is scrollTrigger not ScrollTrigger (see capital S, happens to me all the time).  If things are not working in Wordpress I advise you to disable big chunks of your install to see what might be causing the issue, but if you're using a off the shelve theme it is probably adding something via CSS something like transition: all 1s ease-in; or  html { scroll-behavior: smooth; }

 

Hope it helps and happy tweening! 

 

See the Pen ZEPLLPY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[pardieiro]

27 minutes ago, mvaneijgen said:

Hi @pardieiro welcome to the forum!

 

The property in a timeline is scrollTrigger not ScrollTrigger (see capital S, happens to me all the time).  If things are not working in Wordpress I advise you to disable big chunks of your install to see what might be causing the issue, but if you're using a off the shelve theme it is probably adding something via CSS something like transition: all 1s ease-in; or  html { scroll-behavior: smooth; }

 

Hope it helps and happy tweening! 

 

 

 

Thank you my friend!!!!!!!! That resolved it. It's incredible how a lowercase S changes everything hahaha.

At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this?

[mvaneijgen]

7 minutes ago, pardieiro said:

At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this?

Can you elaborate on this. I'm not sure what you mean. 

[pardieiro]

14 minutes ago, mvaneijgen said:

Can you elaborate on this. I'm not sure what you mean. 

Observing the End mark, it reaches the top, making the vertical scroll work again, before the blue div ends, how can we resolve this so that the vertical scroll returns at the beginning of the red div?

[Rodrigo]

Hi,

 

3 hours ago, pardieiro said:

At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this?

This happens because of the scrub value you have in your ScrollTrigger config:

scrollTrigger: {
  trigger: container,
  // start: "left left",
  end: () => "+=" + 2 * container.offsetWidth + "px",
  scrub: 1,
  pin: true
}

That means that ScrollTrigger will take one second (or any other amount of time you pass there) to update the animation progress relative to the scroll position. What happens is that it you scroll too fast past the end marker, the animation will complete one second after that. You can either reduce the amount of time on the scrub property or just use scrub: true so the update is immediate.

 

Hopefully this helps.

Happy Tweening!

[pardieiro]

1 hour ago, Rodrigo said:

Hi,

 

This happens because of the scrub value you have in your ScrollTrigger config:

scrollTrigger: {
  trigger: container,
  // start: "left left",
  end: () => "+=" + 2 * container.offsetWidth + "px",
  scrub: 1,
  pin: true
}

That means that ScrollTrigger will take one second (or any other amount of time you pass there) to update the animation progress relative to the scroll position. What happens is that it you scroll too fast past the end marker, the animation will complete one second after that. You can either reduce the amount of time on the scrub property or just use scrub: true so the update is immediate.

 

Hopefully this helps.

Happy Tweening!

Solved, thank you very much, dude!