AniLink cover 'GSAP target null not found'

[piemasters]

When using the AniLink paintDrip, fade and swipe animations they all work fine. However when using cover the animation doesn't run and I get the following console warning:

backend.js:6 GSAP target null not found. https://greensock.com 
    in Transition (at delayTransitionRender.js:30)
    in DelayedTransitionWrapper (at TransitionHandler.js:46)
    in Context.Consumer (created by Location)
    in Location (at TransitionHandler.js:42)
    in Context.Consumer (at TransitionHandler.js:21)
    in TransitionHandler (at wrap-page.js:9)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Context.Consumer (created by Location)
    in Location (at root.js:118)
    in Root (at root.js:126)

Dep versions:

"gatsby-plugin-transition-link": "^1.17.7",
"gsap": "^3.0.4",

I wondered if you had any idea what the cause could be? I'm sure I've used the above before and it's worked fine and downgrading versions hasn't seemed to have made a difference. Thanks!

[TylerBarnes]

🤔 weird! any chance you could share a repro so I could check it out? That would be super helpful!

[piemasters]

Cheers for the reply! I managed to get it working, it seems to be down to some kind of conflict with emotion. In my layout file I moved from using styled components to using the css prop and it suddenly works.

I changed:

import styled from '@emotion/styled';

...

const Content = styled.div`
  flex-grow: 1;
`;

...

return (
<Content>
  <Header />
  {children}
</Content>
)

to:

import { css } from '@emotion/core';

...

const contentStyle = css`
  flex-grow: 1;
`;

...

return (
<div css={contentStyle}>
  <Header />
  {children}
</div>
)

My repos a bit of a mess for debugging atm but I'll try and clean it up a bit and point you to the relevant files if that helps. There seems to be another issue with TransitionLink failing unit tests and not building in Storybook, throwing Cannot read property 'disableAnimation' of undefined - ..gatsby-plugin-transition-link/components/TransitionLink.js:60:34 that I want to fix before pushing changes.

[TylerBarnes]

Thanks for the additional info! 🙈 that last error could be a TL bug though!

[piemasters]

The repo: https://github.com/piemasters/MiniToTheMax/tree/transition-link make sure to checkout the transition-link branch!

The header file: https://github.com/piemasters/MiniToTheMax/blob/transition-link/src/components/header.tsx I've updated this so it has 3 links:

• The main title uses a AniLink paintDrip, is wrapped in a styled component and works
• The first link below uses a AniLink cover, is wrapped in a styled component and is broken
• The first link below uses a AniLink cover, uses the css attribute and works

The test that fails: https://github.com/piemasters/MiniToTheMax/blob/transition-link/src/tests/components/header.test.tsx As you can see I've commented out the main test and am just testing the AniLink component mounts, which fails. I'm guessing I need to add something to my jest config?

[piemasters]

I've just updated the codebase (and the message above) with clear examples of:

• the cover animation not working when nesting inside a styled component (header.tsx)
• AniLink throwing Cannot read property 'disableAnimation' of undefined when testing with jest & react-testing-library (the same error is thrown in Storybook)

[naomigrace]

Hi! I'm getting the same issue where using the cover does not work, but using anything else (like swipe does):

not working:

export default ({ title, description, path, style }) => (
  <AniLink
    to={path}
    direction="left"
    cover
    duration={1.25}
    bg={`linear-gradient(rgb(101, 84, 192), rgb(64, 50, 148))`}
    style={{ width: `100%`, textDecoration: `none` }}
  >
    <EventStick style={style}>
      <EventTitle>{title}</EventTitle>
      {description && description.length && (
        <EventDescription>{description.toUpperCase()}</EventDescription>
      )}
    </EventStick>
  </AniLink>
)

working:

export default ({ title, description, path, style }) => (
<AniLink
  to={path}
  direction="left"
  swipe
  duration={1.25}
  style={{width: `100%`, textDecoration: `none`, marginBottom: `10px`}}
 >
    <EventStick style={style}>
      <EventTitle>{title}</EventTitle>
      {description && description.length && (
        <EventDescription>{description.toUpperCase()}</EventDescription>
      )}
    </EventStick>
  </AniLink>
)

The EventStick is called in a function Row

  const Row = ({ index, style }) => {
      if(events){
        return <EventStick style={style} {...events[index]} />
      }
  }

which is within an Autosizer (react-virtualized-auto-sizer) component and List from react-window

            <AutoSizer>
              {({ height, width }) => (
                <List
                  height={height}
                  width={width}
                  itemSize={() => 90}
                  itemCount={events.length}
                >
                  {Row}
                </List>
              )}
            </AutoSizer>

Let me know if more context is needed!

[TylerBarnes]

Hey everyone! Apologies on the super delayed response here. I haven't had any time to work on this package lately :(

This is fixed in gatsby-plugin-transition-link@1.19.2 though!