Gatsby: Why my animations not working in the the production env (build), but it works great in the DEV env

[mouhsnimohamed]

No description provided.

[dbramwell]

Hi,

I've got no idea, sorry. Does anything happen at all in your production environment? Are you using animations from animate.css? Can you check chrome dev tools or something similar in your production environment to see if the animation classes and CSS props are being applied to your elements?

[mouhsnimohamed]

Hi,

It hides all my components that using animations( animation-duration: 0.5s;
opacity: 0;) all blocks have the same style and the same class name (animated) normly it should add the class name that is responsible for the animation(zoomIn, fadeInUp ... )

Yes I'm using animate.css
Thank you very much. I appreciate your reply :)

[dbramwell]

All I can think of is that the library might not be included in the bundled code. Can't think of another reason why it would work in dev and not prod

[mouhsnimohamed]

How can I fix that? is there another plugin for GatsbyJS?

[dbramwell]

I've never used GatsbyJS before, but I've just fired up a quick sample project and I can see the animations when using both gatsby develop and gatsby serve...

Where do you host the site? Can I see it? Are you able to share the code?

[mouhsnimohamed]

Hello,

Here is my code:

Layout.js

`import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"
import { ThemeProvider } from "styled-components"
import Theme from "../styles/Theme"
import { LayoutContainer, Main } from "../styles/common"
import Header from "./header"
import Footer from "./footer"
import "./normalize.css"
import "../styles/icomoon/style.css"
import "animate.css/animate.min.css"

class Layout extends React.Component {
render() {
return (
<StaticQuery
query={graphqlquery SiteTitleQuery { site { siteMetadata { title } } }}
render={data => (

{this.props.children}



)}
/>
)
}
}

Layout.propTypes = {
children: PropTypes.node.isRequired,
}

export default Layout `

index.js

import React, { Fragment } from "react" import { graphql } from "gatsby" import ScrollAnimation from "react-animate-on-scroll" const IndexPage = ({ data }) => ( <Layout> <Fragment> <SEO title="Home" keywords={[xhub, devoxx, morocco]} /> <HomeBanner> <Container flex flexCenter> <TextContainer> <ScrollAnimation delay={300} duration={0.5} animateIn="bounceInLeft" animateOut="bounceOutRight" > <Title>{data.site.siteMetadata.title}</Title> </ScrollAnimation> </TextContainer> </Container> <HomeBanner> </Fragment> </Layout> )

I'm using styled-component

[mouhsnimohamed]

when i'm adding .animated {opacity: 1!important;} it triggers event on scroll and it adds class names(zoomIn......)

[mouhsnimohamed]

I thinks its a gatsby issue because when I'm building with a prefix it doesn't work (run this gatsby build --prefix-paths and in gatsby-config.js add this pathPrefix: "/next")

[virissimo]

Gatsby has some issues converting css. To know what is wrong you need so check the converted code in the static folder.

@keyframes my-animation {
  from {
    transform: scale(2);
  }
  to {
    transform: scale(1);
  }
}

The above code is converted as follows:

@keyframes my-animation {
  0% {
    transform: scale(2);
  }
  to {
    transform: scale(1);
  }
}

Animation does not work because it is not possible to mix from-to syntax with percentage syntax. One way to prevent the problem is to use only the percentage syntax:

@keyframes my-animation {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

This solution worked in version 2.23.22 of Gatsby.

[Robbie-Cook]

Ghad damn it. I got this error too with

element?.animate(
        [
          {
            transform: `translate(0%,  20px)`,
          },
          {
            transform: 'translate(0, 0)',
          },
        ],
        { duration: secondsTotalDuration * 1000, iterations: Infinity },
      );

on Gatsby 2.27.4. Doing #52 (comment) fixed it for me

[doublejosh]

100% becomes 1%

RE: For opacity animations (and probably other integer value CSS properties) + Gatsy build processing, I discovered that a set of keyframes like this...

  0% {
    opacity: 0;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }

...which works fine locally. Gets turned into this...

{0%{opacity:0}50%{opacity:1%}to{opacity:0}}

So you need to write...

opacity: 100;

I'm using TailwindCSS, so that may play a part in my situation.