Nextjs / SliceZone gsap & slider / creating your own slicezone

Developing with Prismic
1

Hello.

I'm creating a gsap animation. And I realized that it works perfectly on load but not when I navigate from page to page. After trying many many things, I created a "panel" div outside of my slice zone (inside of my slices, I have a panel div which wraps everything).

And that outside div test div actually always work.
I've also created a component, with .panel inside, and it works at all time.
If I add a delay to the gsap, it's buggy but it recognize the panels.

I can see this because on load, my console logs all .panel divs, but when I navigate, it only catches the one outside of the slicezone...

What would be the way to fix this?

Here is my structure

 <div ref={gsapRef} className="images-wrapper">
      <div className="panel">
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
        <h1>
          Test
        </h1>
      </div>
      
<TestComponent />
        <SliceZone
              slices={page.data.slices}
          components={components}
        />
 </div>

And here is the script

const gsapRef = useRef(null);

  
  useIsomorphicLayoutEffect(() => {


    const ctx = gsap.context((context) => {
      console.log("context launch ");
      const panels = context.selector(".panel");
      console.log(panels);
      panels.forEach((panel) => {
        ScrollTrigger.create({
          trigger: panel,
          start: "top top",
          end: "bottom+=100% top",
          markers: true,
          pinSpacing: false,
          scrub: true,
          pin: true,
          anticipatePin: 1,
        });
      });
    }, gsapRef);


    return () => {
      ctx.revert();
      console.log("TRIGGERS kill");
    };

}, []);

Screenshot 2023-09-25 at 17.11.44
Screenshot 2023-09-25 at 17.11.441000×138 11 KB

and what it should render (& renders on initial load / delay) :
Screenshot 2023-09-25 at 17.12.55
Screenshot 2023-09-25 at 17.12.551286×112 18.3 KB

How can I draw data from the slices without using the slicezone?

2

Answering my own question!
I created SlicesComponent, and then:

 {page.data.slices.map((slice, index) =>
          slice.slice_type === "one_image" ? (
            <SliceProjectOneImage
              index={index}
              key={index}
              slice={slice}
              context=""
            />
          ) : slice.slice_type === "layout3" ? (
            <SliceProjectTwoImagesSmallBig
              key={index}
              slice={slice}
              context=""
            />
          ) : slice.slice_type === "layout1" ? (
            <SliceProjectThreeImages key={index} slice={slice} context="" />
          ) : slice.slice_type === "two_images_full_height" ? (
            <SliceProjectTwoImagesFullHeight
              key={index}
              slice={slice}
              context=""
            />
          ) : slice.slice_type === "video" ? (
            <SliceProjectVideo key={index} slice={slice} context="" />
          ) : null
        )}

And all works perfectly now!!

1 Like