Need help on how can I stick the section title to 50px below from the top while I scroll vertically till the very end of the card stacking effect.

[md-saad]

Here is the source code of the section: 

 

"use client";

 

import Service from "@/Components/Service";

import { useGSAP } from "@gsap/react";

import gsap from "gsap";

import { ScrollTrigger } from "gsap/all";

import { useRef } from "react";

import { serviceData } from "./serviceData";

import "./services.css";

 

export default function ServiceList() {

  const serviceSectionRef = useRef(null);

  gsap.registerPlugin(useGSAP, ScrollTrigger);

 

  useGSAP(

    () => {

      const cards = gsap.utils.toArray(".service-container");

      gsap.set(cards, {

        zIndex: (i) => 30 + i,

        transformOrigin: "50% - 400px",

      });

 

      let lastCardST = ScrollTrigger.create({

        trigger: cards.pop(),

        start: "center center",

      });

      let stickDistance = 0;

 

      cards.forEach((card, index) => {

        gsap.to(card, {

          scrollTrigger: {

            trigger: card,

            scrub: true,

            invalidateOnRefresh: true,

            start: "center center",

            end: () => lastCardST.start + stickDistance,

            pin: true,

            refreshPriority: index === cards.length - 1 ? 5 : 0,

            pinSpacing: false,

          },

          ease: "none",

          // scale: () => 1 - (cards.length - index) * 0.05,

        });

      });

    },

    { scope: serviceSectionRef }

  );

 

  return (

    <section className="service-list-section" ref={serviceSectionRef}>

      <div className="service-list-inner-container page-width">

        <h2 className="service-list-title">

          <span>Our Professional</span> Services

        </h2>

        <div className="service-list">

          {serviceData.map((service) => (

            <Service key={service.id} service={service} />

          ))}

        </div>

      </div>

    </section>

  );

}

 

 

 

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

 

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.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

 

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 GSAP as shown in the Install Helper in our Learning Center : 

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

[md-saad]

Thank you so much for your response. Here https://stackblitz.com/edit/stackblitz-starters-b83gshqk?file=app%2Fpage.tsx, I've tried to give you a minimum demonstration of my need. I want the section title will be visible while I scroll, at the same time the card stacking effect will go on as well

[mvaneijgen]

Hi @md-saad welcome to the forum!

 

Yep as already mentioned, build an animation. Currently your setup reverses the order, eg you're thinking about the scrolling part first, but it is almost always easier to think about animations first, check the post above and see this demo from the post.

 

Hope it helps and happy tweening! 

 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen.

[md-saad]

Hi, @mvaneijgen Thanks for guiding me. I've tried various ways to achieve this, but haven't succeeded. Can you help me with this? 

[mvaneijgen]

Of course, what have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

[md-saad]

I'm actually trying to pin multiple elements at a time; one is the section title, and the second is the stacking card container.

[mvaneijgen]

Can you show what other routes you've tried in a minimal demo? Again it is so much more easier to create an animation with what you want and hook that to ScrollTrigger instead of creating multiple ScrollTrigger and hope they all line up and play with each other. 

 

Again check my post it walks you through all the steps you need and has loads of example that all use the same bases, but have totally different effects. 

 

 

Hope it helps and happy tweening! 

[md-saad]

Hi @mvaneijgen thanks for guiding me. Finally, I've figured out the solution!