Plugin broken, or ...?

[sn3h]

Hello,

just trying to use this plugin, with this simple config

  {
        resolve: 'gatsby-plugin-transition-link',
        options: {
          layout: require.resolve('./src/components/Layouts/layout.js')
        },
  }

using

  "gatsby-plugin-transition-link": "^1.18.0"

and no matter what I do, I cant make it work properly.. all the properties of transition state are permanently 0..

seems like the same behavior of this testing site https://gatsby-plugin-transition-link.netlify.app

any help please? I am quite confused..

[TylerBarnes]

Hi @sn3h , thanks for opening this issue. If you can provide a simple reproduction repo that will help me understand what's going on here.

Do you mean that you're trying to access transition state within your layout component?

[wendelltron]

It seems as though sn3h is correct. If you remove node modules and do a fresh install, transition link transitions are broken. I rolled back a couple of versions and still don't see any animations from this plugin.

If you check the plugin website: https://gatsby-plugin-transition-link.netlify.app

You will see that it is bereft of animations as well, so whatever automated process rebuilds the netlify site is apparently also impacted by this bug.

Go to the netlify site in Google Chrome, and click i.e. paint drip transition. Page instantly transitions -- no animation.

[TylerBarnes]

@wendelltron do you by chance have the "reduce motion" accessibility setting enabled in your OS? For macos you can check that by following this guide: https://osxdaily.com/2018/12/17/how-reduce-motion-mac-disable-animations/

For other OS's it will be different. In any case, if it's enabled, this plugin will intentionally not run animations. If I go to the example site I see the animations and if I enable this OS setting they don't run. Let me know if this resolves things for you

[wendelltron]

No, reduce animations is not a setting that is on. It does seem to be something specifically with Chrome, though, since other browsers are actually working on the sample site.

I suspect that between the last time I worked on my project and now, with the updates, respect for the user's OS preferences for animations was added. It had been working for me, but now isn't, but I can see from using the inspector that Chrome does think I want to reduce animations even thought the os preference isn't set that way.

thanks

[TylerBarnes]

Ah, interesting. Are you on the latest Gatsby? Can you try updating to the latest and see if it fixes it? There was a Gatsby core release fairly recently which broke this plugin, but the next release fixed it again.

[sn3h]

Hello guys, thanks for so much feedback. I tried to find "reduce motion" in Windows 10 and it is located in Settings - Display - Simplify and personalise windows as Show animations in Windows (Win key + U).. Turned it on and suddenly it works (expect fading, that seems to be still broken).. Is there anyway to force this plugin to work no matter the settings of the OS? Seems quite problematic to me

Big thanks one more time