TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 71 forks source link

Passing the clicked link to the trigger #256

Open popeating opened 3 years ago

popeating commented 3 years ago

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?

hawkstein commented 3 years ago

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