Cargo Collective Lenis & Scrolltrigger White background Bug

[Arshadali]

Hi, 

i have working in cargo collective website then i've added smooth scroll lenis.js and my requirement also one section use animation like card scrolling pin effect horizontally then i have implement gsap scrollTrigger but i have scrolling then smooth scroll lenis.js working perfectly but when enter the section they are hold card's not see only white background showing so please check it and help me.

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

[Arshadali]

ok i have providing a code in cargo collective 

[Arshadali]

<style>

  [id="X4136400666"] bodycopy {
}

[id="X4136400666"] bodycopy{
}

.page-content{
    padding: 0;
}
 .full-page {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }


        /* Custom CSS */

        section.section-wrapper {
            height: 100%;
            overflow: hidden;
            width: 300vw;
            background-color: #242424;
        }

        .container {
            height: 100vh;
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            gap: 50px;
            margin: 50px 0;
            transform: translateX(500px);
        }

        .card {
            width: 500px;
            height: 400px;
            border: 1px solid #fff;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
</style>

<div class="page-wrapper"><section class="full-page" style="background-color:#ffefba"><h1>Section 1</h1></section><section class="full-page" style="background-color:#aedff7"><h1>Section 2</h1></section><section class="section-wrapper"><div class="container"><div class="card one"><h3>Module One</h3></div><div class="card two"><h3>Module 2</h3></div><div class="card three"><h3>Module 3</h3></div><div class="card three"><h3>Module 3</h3></div><div class="card three"><h3>Module 3</h3></div><div class="card three"><h3>Module 3</h3></div></div></section><section class="full-page" style="background-color:#d3c4e3"><h1>Section 4</h1></section></div>


<!-- gsap js -->
<script src="https://freight.cargo.site/m/U2055329218988265169812608288936/gsap.min.js"></script>
<!-- scrollTrigger  -->
<script src="https://freight.cargo.site/m/O2064440389866436514677162081968/ScrollTrigger.min.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script> 
<script>
 // Initialize Lenis Smooth Scroll
        const lenis = new Lenis({
            duration: 3,
            smooth: true,
        });

        function raf(time) {
            lenis.raf(time);
            requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);

        // Register GSAP's ScrollTrigger plugin
        gsap.registerPlugin(ScrollTrigger);

        // Horizontal Scroll Animation
        const horizontalContainer = document.querySelector('.container');
        const totalScrollWidth = horizontalContainer.scrollWidth - window.innerWidth;

        // Pin and Horizontal Animation
        gsap.to(horizontalContainer, {
            x: -totalScrollWidth, // Move horizontally
            ease: 'none',
            scrollTrigger: {
                trigger: '.section-wrapper',
                start: 'top top', // Pin starts at the top
                end: `+=${totalScrollWidth}`, // The horizontal scroll distance
                scrub: 1, // Smooth animation during scroll
                pin: true, // Pin the section
                //markers: true
            },
        });

        // Sync Lenis with GSAP's ScrollTrigger
        lenis.on('scroll', ScrollTrigger.update);
</script>

 

[Arshadali]

i have provided a cargo collective sample page code can i request please check this code and guide me  i've already very stuck

[Arshadali]

i have provided a cargo collective sample page code can i request please check this code and guide me  i've already very stuck

[mvaneijgen]

Hi @Arshadali welcome to the forum!

 

There isn't much we can help with without a minimal demo. We need to see your code in action and be able to edit it to help you debug. Also lenis isn't a GSAP product, so we can't really help you on that front. We have our own scroll smoother plugin aptly named ScrollSmoother which works out of the box with all the GSAP products, so if you want a plug and play solution I would advise using that. 

 

If you want to keep using lenis, there are some topics on the forum that might help you https://gsap.com/community/search/?q=lenis ScrollTrigger&quick=1&type=forums_topic&nodes=11 

 

If you still need help please create a minimal demo on one of the platforms above. Codepen is the best place in my opinion.

 

Hope it helps and happy tweening! 

 

Edit: Seen that you're new here I've pasted your code in a Codepen and without Lenis everything works great! So you might have to ask lenis for support why it is not working. Again hope it helps and happy tweening! 

 

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

[Arshadali]

Hi , Can you check in cargo collective as there is a problem with scrolltrigger in cargo 

[Cassie]

As @mvaneijgen mentioned. The GSAP code is working perfectly. 

 

If it's not working on cargo collective for some reason you could contact their support - they have a contact form here, https://cargo.site/information