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?
