Jump to content
GreenSock

maisiemay06

ScrollTrigger not scrolling horizontally

Go to solution Solved by Rodrigo,

Recommended Posts

I'm very new to GSAP and trying to practice with a very simple horizontal scroll. 

I've been using this example as a guide with a few changes to make it work with Nuxt3/composition API. 

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

 

I'm also working with Tailwind but this isn't working the the CodePen, so I've included the style section too.

 

In my actual app, the site isn't scrolling horizontally and just scrolls down a very tiny amount (like half of the one) and that's it. 

How do I get it to scroll horizontally?

The example has a vertical scrollbar but mine only has horizontal? 

 

Have I missed something here? 

 

I've recorded my screen to show you what's actually going on on my screen because the CodePen doesn't seem to be representing this in the same way.

Video in link below:

https://drive.google.com/file/d/1iB5rQiR58bd0EjQyoXuwC-sUAb6Y1Sii/view?usp=sharing

 

 

Thanks in advance for any help!

See the Pen poVLKPd by maisiemay06 (@maisiemay06) on CodePen

Link to comment
Share on other sites

Isn't that JavaScript running BEFORE your DOM elements even exist? Don't you need to tie into some kind of lifecycle event for Vue so that it runs after the elements actually exist? If you look at the console, you'll see that it says it can't find your ".container" element.

 

Beyond that, try enabling that pin line and then also setting pinSpacing: true. Does that help? 

 

It's pretty tough to troubleshoot without a minimal demo that actually shows the issue - it could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc.

 

Would you maybe try providing a CodePen that's not using a framework like Vue - just the simplest possible version with a few colored <div> elements or something? 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. It sounds like you're looking for the "containerAnimation" feature (see the docs). 

Link to comment
Share on other sites

Hi @maisiemay06 and welcome to the GreenSock forums!

 

Indeed one of the issues is that the elements might not be in the DOM when the code runs, for that you have to check Vue3's composition API lifecycle hooks:

https://vuejs.org/api/composition-api-lifecycle.html

 

If you want to include the latest version of Tailwind in codepen, click the gear in the code section and in the sidebar select the HTML section and add this tag:

<script src="https://cdn.tailwindcss.com"></script>

The reason you're seeing the small amount of vertical scroll is because when the <body> element gets a horizontal scroll with an element that has a 100vh height, it kicks the vertical overflow because of the extra space the horizontal scroll bar needs. Is better to wrap everything inside an element that acts as a wrapper and do the scrolling in that element. In that case you have to provide that information to ScrollTrigger so it knows where the scrolling has to be watched and in which direction.

 

I forked your example and tinkered with the styling using Tailwind and created a rudimentary scroll trigger instance for each image:

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

 

Finally is worth noticing that this example uses Context, which was introduced in version 3.11

 

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo,

 

Thanks for this, really helpful. I had worked out the issue was something to do with the things not being rendered yet but hadn't found a good way around it.

 

I was looking for a solution like the example given where you can scroll vertically (by using the vertical scroll wheel for example) but the screen would at least appear to scroll horizontally, though. Sorry if this wasn't clear in my initial question. 

 

EDIT: 

After I bit of fiddling...

I've forked and altered your pen and managed to get this to kind of work how I want it but also, not really. It appears to scroll horizontally when using the vertical scroll wheel but only when the mouse is over scrollbars (i.e. not on the .image element).

I guess this is something to do with the trigger or container but I'm not quite sure how to fix this. I've tried changing trigger to .wrapper, .image and images but no luck. 

 

Also, the snap function isn't working quite right and is skipping over section 2 and not lining up correctly. Haven't looked into fixing that properly yet. 

 

See the Pen rNvKBvd by maisiemay06 (@maisiemay06) on CodePen

Link to comment
Share on other sites

  • Solution

Sorry I thought you were looking for native horizontal scrolling, my bad.

 

In that case the setup has to be a bit different. The slides/images container width has to be equal to the number of elements, in this case 6 so 600%. Making that dynamic shouldn't be hard at all, just in case, and we can forget about flex basis and shrink.

 

I updated the codepen and it should be working as expected now. Also I added a couple of extra sections before and after the container:

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

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Great, thanks so much for this! 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×