I'm a newbie, would love help with horizontal scroll

[kz1012]

Hey everyone,

 

I love what you can do with GSAP, but I'm a total newbie and struggling with even horizontal scroll. I tried your demo for vue horizontal scroll, but can't seem to get it work in my vue project. Any advice? Thanks!

 

 

See the Pen XWwrwqV by Kzh1012 (@Kzh1012) on CodePen.

[GSAP Helper]

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: 

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

 

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. ✅

[kz1012]

Cool thanks,  I just found this link in another thread and tried it out in Vue.

 

https://stackblitz.com/edit/vitejs-vite-onqhee?file=src%2FApp.vue&terminal=dev

 

It seems to work in stackblitz, but in my project I cant get horizontal scroll to work... all the panels are stacked vertically instead of 'flex' and i can only scroll vertically.

 

The css and the js is all copied identical. I've also checked the gsap and scrolltrigger are both installed correctly. What typically is the issue when the animations don't work? It seems like gsap isn't working

[Rodrigo]

Hi,

 

Sorry to hear about the issues, but the demo is working as expected, so definitely is not a GSAP related issue. Most likely something else in your setup (CSS most likely) is interfering with this, so you'll have to look for that. Also keep in mind that the particular demo that was linked is using this stylesheet as well:

See the Pen xxmzBrw.css%22 by GreenSock (@GreenSock) on CodePen.

 

Maybe the styles you're missing are there.

 

Hopefully this helps.

Happy Tweening!