Data rendered by PrismicRichText not working with GSAP

I'm having a strange issue with PrismicRichText and GSAP animations not working as expected for a Component.

Using the below I am able to render the data to the page, but from an animation perspective GSAP can't find the elements so no animations are applied.

TL.from(title.words, {
duration: 0.8,
y: 100,
ease: 'Power3.easeOut',
stagger: 0.014,
})

<PrismicRichText
field={title}
components={{
heading1: ({ children }) => <h1 className="hero-showreel__content-title">{children}</h1>,
}}
/>

On the other hand, if I render the data using the below, it will animate.

<h1 className="hero-showreel__content-title">{title[0].text}</h1>

The strange thing is I am able to animate text rendered by PrismicRichText with GSAP with no problem from within a Slice using the followng:

TL.from(text.words, {
duration: 0.8,
y: 60,
ease: 'Power3.easeOut',
stagger: 0.0019,
});

<PrismicRichText
field={slice.primary.title}
components={{
heading2: ({ children }) => (
<h2 className="slice--text-image-row__content-title">{children}</h2>
),
}}
/>

Theres nothing really different in the two different approach. Has anyone else expereiced issues with elements not being found when combining PrismicRichText and GSAP?

Hello @luke1,

Thanks for reaching out to us! :slightly_smiling_face:

I am not very familiar with GASP, but from the blog post: Animations with GSAP + React 🌟 - DEV Community, it seems it might require some React-specific code to get it to work. Here’s what I would try:

  • Use useEffect() to create and start the GSAP timeline. This ensures the timeline is only created after <PrismicRichText> has been rendered, which guarantees that the HTML elements are on the page.
  • Use class names to target the elements (e.g. TL.from("hero-showreel__content-title", …))

Let me know if this works out for you.

Thanks,
Racheal.

Hi @racheal.orukele thanks for replying.

Animations are already being implemented across the site in the manner you have mentioned/linked and are working as expected. The issue seems to be with certain ways of implementing data to be displayed when using PrismicRichText .

Hello @luke1,

Can you share your code and repository name to debug your project?
You can send it via DM if you prefer.