scrolltrigger How to fix a horizontal scroll section with scrollTrigger

[Antonio.Higdon]

I'm trying to have a section that scrolls horizontally while you scroll down, (it looks ugly on code pen because it doesn't have my local files and the rest of the CSS. Just what's  necessary). I was looking at videos on how to do this, and although it seems simple enough, I cant get it to work. Can somebody help me understand what I'm doing wrong? I am new to using GSAP and don't have a complete understanding of it just yet although I've been looking into it extensively.

 

What I'm looking to create is a horizontal carousel that will pin to the container and start scrolling across cards in the carousel as the user is scrolling down. after the carousel reaches the end it should continue scrolling down through the rest of the page like normal.

See the Pen mdrrbyo by oldskool123 (@oldskool123) on CodePen.

 

Instead the carousel is stagnant. instead of pinning to the carousel and scrolling horizontally like it should, the viewport scrolls right past without showing the other cards in the carousel. 

 

I downloaded the files for GSAP, I added "gsap.min.js" and "ScrollTrigger.min.js" along  my main js file to my local js folder for my website. Then I  added them into my html file like so:

 

<script src="JS/gsap.min.js"></script>

 <script src="JS/ScrollTrigger.min.js"></script>

 <script src="JS/main.js"></script>

 

 

See the Pen eYqyjEK by Ramon-117 (@Ramon-117) on CodePen.

[mvaneijgen]

Hi @Antonio.Higdon welcome to the forum!

 

If you would have loaded ScrollTrigger it would work. What exactly is not working? It is always good to explain what you think should happen and what is happening now. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  

 

Below I've update your pen en removed ScrollTrigger for now so that you can see what the animation is doing. Instead animating all <div> elements only get the cards you want to use for the calculations. You can see now that your also need to include the spaces between the cards. Check it out, hope it helps and happy tweening! 

 

See the Pen abeqwzY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[Antonio.Higdon]

Thank you for your response @mvaneijgen and the advice!

You helped me realize that I was coding it correctly (besides linking the js files incorrectly in codepen). The real issue was that my main.js file was accidentally duplicated and that caused my code to work. Although that wasn't the answer you gave me. Taking your advice and thoughts led me to that discovery!

 

You were very helpful. Thank you again!