gatsby-plugin-transition-link
gatsby-plugin-transition-link copied to clipboard
Passing the clicked link to the trigger
I have the following scenario: the menu is generated dinamically and built this way:
{menu.nodes.map((D, i) => {
return (
<li
key={i}
ref={(el) => (LiRefs.current[i + 1] = el)}
className="list-none text-4xl md:text-6xl lg:text-8xl font-bold relative overflow-hidden uppercase pb-5"
>
<TransitionLink
ref={(el) => (LinkRefs.current[i + 1] = el)}
to={D.url}
exit={{
length: 1,
delay: 0.9,
trigger: ({ exit, node, e }) => exit_ani(exit, node),
}}
entry={{
delay: 0.9,
trigger: ({ entry, node, e }) =>
enter_ani(entry, node),
}}
className="hover:text-gray-600"
activeClassName="border-b-2 border-gray-600"
onClick={handleMenu}
>
{D.label}
</TransitionLink>
</li>
);
})}
the two animation triggers are animated with GSAP, my problem is that i dont know the page where i am and the page i want to go, so in my animation i have to animate event things that do not exists (this gives warnings); is there a way i can pass to the trigger the link i clicked?
Hey @popeating , you can pass any state you want to the trigger within the entry and exit props see the docs https://transitionlink.tylerbarnes.ca/docs/transitionlink/#props-and-options