AniLink no animation for nav menu items

[omattman]

Hello, I've implemented AniLink animation across all of my site and as the last thing I had to implement it for links inside the main navigation. However, the animations aren't being triggered.

This is used within a Gatsby v2 project for clarification.

This is the AniLink component:

import React from 'react'
import AniLink from 'gatsby-plugin-transition-link/AniLink'

const AniLinkCover = props => (
  <AniLink
    cover
    direction={props.dir}
    top="exit"
    duration={0.7}
    to={props.to}
    bg="#27c17d"
  >
    {props.children}
  </AniLink>
)

export default AniLinkCover

And this is my nav menu items:

import React from 'react'
import TransitionCover from '../Links/AniLinkCover'

const MenuItemsPrimary = props => {
  return (
    <ul className="nav__main--list">
      {props.filter.map((item, index) => {
        if (index <= props.boundry) {
          return (
            <li key={item.object_slug} className="nav__main--list-item t__h2 f__bold">
              <TransitionCover to={item.object_slug} dir="down">
                {item.title}
              </TransitionCover>
            </li>
          )
        }
      })}
    </ul>
  )
}

export default MenuItemsPrimary

Is there some certain edge case, which I haven't thought of?

[TylerBarnes]

Are you using a layout component for the main navigation? If so are you using the built in layout option or gatsby-plugin-layout?

[smbt]

Facing similar problems. Is it recommended to only go with gatsby-plugin-layout to have the animations working properly?

[TylerBarnes]

@smbt , no gatsby-plugin-layout would potentially stop transitions from working anywhere. This will be fixed in this plugin

[jayasio]

Any workarounds for the meantime?

[TylerBarnes]

@jayasio , there was a recent change that may make this work but I haven't had time to try it out. Are you on the latest version?