Issues with domready—animation flickering on page load.

I’m having a hard time getting around an issue that I think has to do with domready. Each time I load my site (https://piotrf.pl) the plain keyframe CSS animations are being triggered twice, which causes an awkward flickering: https://s3-us-west-2.amazonaws.com/dropbox.piotrf.pl/Untitled.mov

Note how this flickering occurs only on server, not on hotloaded localhost. Here’s why I think domready might be involved:

Has anyone encountered a similar issue?

[malekjaroslav]

I have the same problem

[migs540]

@KyleAMathews we all win when you are awake.

In short: animations are executed twice. Once in index.html then a second time in componentindex.js:

I added console logging and can see the render is triggered just once in js (in component—src-pages-index-js-2d6cb1471a0df592f43f.js):

…E=(0,T.keyframes)(f),x=t.AboutContents=k.default.div(d,E),A=function(t){function n(){return(0,o.default)(this,n),(0,i.default)(this,t.apply(this,arguments))}return(0,u.default)(n,t),n.prototype.render=function(){return console.log(“IndexComponent triggered me during render”),e.createElement…

class IndexComponent extends React.Component {
  render() {
    console.log("IndexComponent triggered me during render")

but well before that the animation is triggered (presumably from index.html:

public 3Legs$ grep animation index.html 
.iVIEdg{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}
.hzuIAT{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}

Video of behaviour (chrome dev tools) at:

http://trustingcustomers.com/consolelogging.mp4

Note: console logging is not in place in the repo I mention above - and you need to do a gatsby build to see the behaviour (gatsby develop triggers it just once because of the way it serves files locally).