ScrollTriggger pinning end

[maan]

const Projects = () => {

  const containerRef = useRef(null);

 

  useLayoutEffect(() => {

    const sections = gsap.utils.toArray(".comparisonSection");

 

    sections.forEach((section) => {

      const tl = gsap.timeline({

        scrollTrigger: {

          trigger: section,

          start: "center center",

          end: () => "+=3000", // Increase the end value for longer pinning

          scrub: true,

          pin: true,

          markers: true,

          pinSpacing: true,

        },

        defaults: { ease: "none" },

      });

 

      tl.fromTo(

        section.querySelector(".afterImage"),

        { width: "70%" },

        { width: "100%" }

      ).fromTo(

        section.querySelector(".afterImage img"),

        { xPercent: -50, x: 0 },

        { xPercent: 0 },

        0

      );

    });

 

    return () => {

      sections.forEach((section) => {

        ScrollTrigger.getById(section).kill();

      });

    };

  }, []);

 

  return (

    <Box

      ref={containerRef}

      sx={{

        backgroundColor: "#fdce00",

        width: "100%",

        minHeight: "400vh", // Increase minHeight for more scrollable content

        marginTop: "20px",

        boxSizing: "border-box",

        overflow: "hidden",

        padding: { xs: "10px", md: "0" },

      }}

    >

      <Chip

        label="Projects"

        className="font-bold text-[#fdce00] bg-black text-xl border-[1px] mt-10"

        sx={{

          marginLeft: { xs: "calc(50% - 50px)", md: "46%" },

        }}

      />

 

      <Grid container justifyContent="center" alignItems="center">

        <Typography

          sx={{

            color: "#4c3e00",

            margin: "20px",

            padding: "10px",

            textAlign: "center",

            fontWeight: "bold",

            fontSize: { xs: "24px", md: "48px", lg: "64px" },

            position: "relative",

            zIndex: 10,

            top: { xs: "0", md: "70%" },

          }}

        >

          DISCOVER OUR

          <br />

          INCLUSIVE

          <br />

          PLACES

        </Typography>

      </Grid>

 

      {data.map((project, index) => (

        <div

          key={index}

          className="comparisonSection"

          style={{

            display: "flex",

            flexDirection: { xs: "column", md: "row" },

            alignItems: "center",

            marginTop: "20px",

            minHeight: "100vh",

            position: "relative",

          }}

        >

          <div

            className="afterImage"

            style={{

              position: "relative",

              zIndex: 1,

              overflow: "hidden",

              width: "70%",

              height: "100%",

              transition: "width 2s ease-in-out, height 2s ease-in-out",

            }}

          >

            <img

              src={project.src}

              alt="Project"

              style={{

                width: "100%",

                height: "100%",

                objectFit: "cover",

              }}

            />

          </div>

          <div

            className="textContainer"

            style={{

              marginLeft: { xs: "0", md: "20px" },

              marginTop: { xs: "20px", md: "0" },

              textAlign: "left",

              zIndex: 10,

              color: index === 1 ? "white" : "black",

              textAlign: { xs: "center", md: "left" },

            }}

          >

            <Typography

              sx={{

                fontSize: { xs: "24px", md: "35px" },

                fontWeight: "bold",

                color: index === 1 ? "white" : "white",

              }}

            >

              {project.heading}

            </Typography>

            <Typography

              sx={{

                fontSize: { xs: "18px", md: "28px" },

                fontWeight: "bold",

                color: index === 1 ? "white" : "white",

                marginTop: "10px",

              }}

            >

              {project.text}

            </Typography>

          </div>

        </div>

      ))}

    </Box>

  );

};   hey this is my code actually i am trying to increase the pinning duration like i want to make the end more delayed like when my image gets to full width then it should unpin but this code is having no effect whatever i change the value in the end .Also the animation is not so smooth like when i scroll the image width increases and when i stop it keeps increasing some more like not exactly moving smoothly with the scroll 

See the Pen gOJVLLG?editors=1010 by maria-imran (@maria-imran) on CodePen

[mvaneijgen]

Hi @maan welcome to the forum!

 

There are certain properties you're better off not animating, width and height are some of them, these cause a browser repaint and can cause none smooth animation. In your case you could look in to changing the width animation to a clipPath, that way everything will be buttery smooth. Check out how to animate clipPaths with GSAP in the post below.

 

 

Also make sure you're using the latest versions of the tools, currently you're loading version 3.11 and were are on 3.12.5!

 

Also note that instead of .fromTo() tweens you can use .from() and .to() tweens and GSAP will just animate to the browsers defaults or what you've set in CSS. Makes it much easier to maintain, because you just have to update your values in one place. I've modified some of the logic in the below pen

 

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

 

You're using react check out our useGSAP hook this will probably also fix a lot or your issues https://gsap.com/resources/React/ Hope it helps and happy tweening! 

 

[maan]

Thanks a lot @mvaneijgen now it is more smooth and looking better but one more thing is that i want to unpin the page when the image is get to full width then it should unpin ,i am trying hard to increase the pinning duration but it is having no effect,  the page unpins when the image is not even get to full width and the end value no matter what i set to , end is in the center of the page i actually want the page not to unpin until the image is set to full width .

[mvaneijgen]

2 hours ago, maan said:

i actually want the page not to unpin until the image is set to full width

To me it is doing that! Just to explain what ScrollTrigger does it gets your animation (which is 0.5 seconds long) and stretches it over the scroll distance, so in your case 0.5 seconds get stretched over 5000px, as soon as the start makers (green) touch it starts and as soon as the end markers touch it finishes. In below pen I've add an extra tween (of 0.5 seconds) to the end of your timeline now ScrollTrigger will stretch a 1 second timeline over the same 5000px, so when you've scrolled 2500px the image will be full and for the rest 2500px it the animation will do nothing. Hope it helps and happy tweening! 

 

See the Pen NWVQjjz by mvaneijgen (@mvaneijgen) on CodePen

[maan]

thanks  @mvaneijgen

tl.add(()=>{}, "+=0.5") 
this line of code almost solved my problem actually i have made my textcontainer to absolute position and i wanted the image
 to increase to full viewwidth like image should be of full width text should overlap , it should look something like this in video 

 

 

[mvaneijgen]

Here is your pen without GSAP, your images are as wide as you've made them. If you want to span them over the whole page you have to make sure your CSS reflect that layout, right now this isn't the case, so the effect will not look like what you share in the video. 

 

My advise remove ScrollTrigger and GSAP and first focus on the layout with CSS then it will be easy to create this effect. Also when reimplementing GSAP keep in mind 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. Hope it helps and happy tweening! 

 

See the Pen xxNvLvv?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen