TylerBarnes/gatsby-plugin-transition-link

AniLink background color not updating per link

Opened this issue · 8 comments

I want each AniLink to have a different background color transition for "cover", but the transition only shows the first "bg" prop defined in the component. Am I missing something simple that will fix this?

Here is how I have my links set up, right now each transition only shows #9D2407:

           <li>
            <AniLink
              cover
              to="/delivery-kitchens/"
              direction="up"
              duration={1}
              bg="#9D2407"
              className="btn--text color--grey-5"
            >
              Delivery Kitchens
            </AniLink>
          </li>
          <li>
            <AniLink
              cover
              to="/technology/"
              direction="up"
              duration={1}
              bg="#B7661B"
              className="btn--text color--grey-5"
            >
              Technology
            </AniLink>
          </li>

Bumping this, we're having the exact same issue. Would be unbelievably helpful to get this working.

Just to add, happy to create codepen to show this in action

I have the same issue as well.

Same issue here.

Same... even with one bg=hex and one bg=url

Bumping as well - issue is still persistant. bg/hex don't work and adding 'paintDrip' creates a duplicate link.

also having this issue on version 1.20.5

Still having this issue, would be great to get a fix although seems unlikely seeing as this appears to be an unfixed bug from 2020....