Anylink not working with variables ?

[ptrkvsky]

Hi everyone,

{categories.map(categorie => (
    <div className="col-sm-3">
        <BackgroundImage
            Tag="section"
            className="clip-polygon"
            fluid={categorie.vignette.fixed}
            backgroundColor={`#040e18`}
        >

        </BackgroundImage>
        <AniLink paintDrip to={`recettes/${categorie.slug}`} hex="#ee4749" duration={1} >{categorie.titre}</AniLink>
        <AniLink paintDrip to="/recettes/bouillons" hex="#ee4749" duration={1}>{categorie.titre}</AniLink>
    </div>
))}

Am i missing something here ? The first analink doesnt display animation, and the second one yes. When i inspect code, i have the same thing, same href, same hex attribute., nothing in the console. Is this a bug or is this me ? Thank you for your help

[TylerBarnes]

Hey @barbgegrasse can you share your repo so I can have a look? For the first link does the page exist? Try adding a forward slash to the to prop to={`/recettes/${categorie.slug}`} and make sure ${categorie.slug} isn't undefined.

[ptrkvsky]

Hi, thank you yes, links exist, and work in both case, there is just no animation when there is a variable @TylerBarnes

[ptrkvsky]

hahahaha that was just the forward slash.... thank you for your help

[TylerBarnes]

Ha, just one of those things! I wonder if there's ever a case where you would add a link without a starting forward slash? Might be a good issue to bring up to Gatsby. Let me know if you run into any other problems!