horizontal scroll Using ScrollTrigger to make horizontal section

[Antonio.Higdon]

I've recently started learning GSAP so i am not too familiar with it. Im building a website for my business and wanted to implement GSAP ScrollTrigger to add some flare to it.  For my website, I used scrollTrigger to make a horizontal scrolling section on MOBILE DEVICES only. When I viewed the section on testing environments and codePen it worked well and as it was supposed to:

 - The website would scroll vertically like normal until it reached the the section titled "We Provide Opportunity
to Aspiring Businesses by ". This section would then to snap into place and begin scrolling horizontally until it reaches a the 3rd card, then continue scrolling vertically like usual.

 

When i posted it to my live testing site (testinghub.dev) it didn't work the same:

-What happened on the real web, is when the section "snapped" a large empty section would appear in between where it was supposed to snap and where the cards are in view (you have to scroll very far down to see it). Once you do the cards, it doesnt even scroll horizontally. Its really weird.

 

Like i said, the codePen is the exact code i used (withought the images) and it works fine, but it doesnt work in the real world. I dont know why.

 

CONTEXT: I used an iphone 16 to test the live website. I havent used an android device as i dont have one.

 

GSAP CODE: 

gsap.registerPlugin(ScrollTrigger)

document.addEventListener('DOMContentLoaded', sideScrollers);

window.onresize = sideScrollers;

let mobileQuery = window.matchMedia("(max-width: 450px)");

let desktopQuery = window.matchMedia("(min-width: 451px)")

 

function sideScrollers(){ //maybe i put this inside an if statment/ conditional function

 

    if(mobileQuery.matches){

        let sections = gsap.utils.toArray('.card-scroller .card-container')

        let tl = gsap.timeline({

            scrollTrigger: {

                trigger: ".card-scroller",

                pin: true,

                anticipatePin: 1,

                scrub: 0.5,

                start: "top 4%",   //was 6% (incase it broke EVERYTHINGGG)

                end: "+=3000",

                snap: {snapTo: [0, 0.5243, 1], duration: 0.2, delay: 0.1, ease: "circ.Out"},

            }

        })

 

        tl

            .from(".translate", { delay: 0, ease: "circ.out", duration: .04, y: 25})

            .to(sections,{ duration: .15})

            .to(sections,{ ease: "power1.inOut", xPercent: -113 * (sections.length - 1), })      

            .to(sections,{ duration: .15})  

    }

}

 

GSAP FILES: 

 

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

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

 

Can someone please help me with this? If needed you can copy and paste the code on a testing site if you have one as well to view the issue im talking about. Let me know if more context or details are needed!!!

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

[mvaneijgen]

There is way to much code in this demo, sadly we don't have the time and resources to comb through all that. 

 

My advice start removing things from your live site in big chunks to see if you can make it so that the issue goes away. When it does add them back in one by one, this way you can narrow down what is causing this issue. Again if you said it works perfectly in codepen GSAP is not the issue, so you have to figure out what is. 

 

It also seems like you're creating your own match media function. GSAP has this build in and has a lot features that will make it nicer working with GSAP, check it out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

Hope it helps and happy tweening!