Animation after elements are displayed in the browser.

[Azizbek]

 

I have a gatsby project where I used TimelineLite.staggerTo animation 

When I run my project in development mode everything works normal. 

But when I build my project and open it in the browser elements are being animated after they're displayed.

 

Here's in the first video how animation behaving itself in production mode:

The second video is taken from development mode.

Source code one of my component where I used animation.

import React, { Component } from "react";
import Layout from "../components/layout";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import SEO from "../components/seo";
import facebook from "../images/icons/facebook.svg";
import linkedin from "../images/icons/linkedin.svg";
import github from "../images/icons/github-sign.svg";
import { TimelineLite, CSSPlugin } from "gsap/all";
import gsap from "gsap/gsap-core";

export const c = CSSPlugin;

export const query = graphql`
  {
    allPrismicMembers(
      sort: { order: ASC, fields: uid }
      filter: { lang: { eq: "en-us" } }
    ) {
      nodes {
        data {
          avatar {
            alt
            copyright
            url
            localFile {
              childImageSharp {
                fluid {
                  srcSetWebp
                  srcWebp
                  sizes
                }
              }
            }
          }
          job {
            html
            text
          }
          name {
            html
            text
          }
          social {
            facebook {
              link_type
              url
              target
            }
            github {
              link_type
              url
              target
            }
            linkedin {
              link_type
              url
              target
            }
          }
        }
        lang
      }
    }
  }
`;
export default class OurTeam extends Component {
  GSAP = gsap.registerPlugin(TimelineLite);
  cards = [];
  tl = new TimelineLite({ paused: true });

  componentDidMount() {
    // This is where animation is happening

    this.tl.staggerFrom(
      this.cards,
      0.5,
      { opacity: 0, autoAlpha: 2, y: 40 },
      0.1
    );
    this.tl.play();
  }

  state = {
    members: this.props.data.allPrismicMembers.nodes
  };

  render() {
    this.tl.kill();
    return (
      <Layout>
        <SEO title="Our Team" />
        <div className="team">
          <h1>Our Team</h1>
          <Row>
            {this.state.members.map((member, index) => {
              const fluidImages = member.data.avatar.localFile.childImageSharp;
              return (
                <Col
                  xs={12}
                  sm={6}
                  md={4}
                  lg={3}
                  key={index}
                  ref={(div) => (this.cards[index] = div)}
                >
                  <div className="card">
                    <div className="card-img">
                      {fluidImages ? (
                        <img
                          src={fluidImages.fluid.srcWebp}
                          srcSet={fluidImages.fluid.srcSetWebp}
                          sizes={fluidImages.fluid.sizes}
                        />
                      ) : (
                        <img src={member.data.avatar.url} />
                      )}
                    </div>
                    <div className="card-desc">
                      <div className="desc-info">
                        <p className="card-name">{member.data.name.text}</p>
                        <p className="card-job">{member.data.job.text}</p>
                      </div>

                      <div className="extra-info">
                        <div className="social-item">
                          <a href={member.data.social[0].facebook.url}>
                            <img src={facebook} alt="" />
                          </a>
                        </div>
                        <div className="social-item">
                          <a href={member.data.social[0].linkedin.url}>
                            <img src={linkedin} alt="" />
                          </a>
                        </div>
                        <div className="social-item">
                          <a href={member.data.social[0].github.url}>
                            <img src={github} alt="" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </Layout>
    );
  }
}

 

Is it greensock problem or React?

[ZachSaucier]

Hey Azizbek, 

 

It's a loading problem, not really a GSAP problem or a React problem  In your local environment, everything is being loaded from your PC so it loads super fast. When it's online, it has a longer load time so there's time for the elements to show before JS kicks in (when the page is done loading). Thus there is a flash of unstyled content before the animations kick in. 

 

We're actually going to post a quick tip video/mini article about this in the next few days but I'll give you a sneak peak of the video: 

 It's a video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3.

[OSUblake]

Side note. Don't import from gsap-core unless you have a good reason to, like you're only doing canvas/webGL animations. It is not the main entry point for gsap.

 

import { TimelineLite, CSSPlugin } from "gsap/all";
import gsap from "gsap/gsap-core";

 

Just import from "gsap". It automatically registers the CSSPlugin. Also, there is no need to use TimelineLite. It creates the same thing as gsap.timeline().

import { gsap } from "gsap";

...

export default class OurTeam extends Component {
  cards = [];
  tl = gsap.timeline({ paused: true });
}

 

Installation docs.

https://greensock.com/docs/v3/Installation#npm

 

You can also use "gsap/all" instead of "gsap".

https://greensock.com/forums/topic/21961-plugin-issue-with-gsap3-npm-and-nuxtjs/?tab=comments#comment-104188

 

 

[OSUblake]

5 hours ago, ZachSaucier said:

It's a loading problem, not really a GSAP problem or a React problem  In your local environment, everything is being loaded from your PC so it loads super fast. When it's online, it has a longer load time so there's time for the elements to show before JS kicks in (when the page is done loading). Thus there is a flash of unstyled content before the animations kick in.

 

I don't think that video applies here. The window load event will only fire once. With frameworks like React, different parts of the DOM are being swapped out, so you can't rely on the window load event. The only way to make sure you don't see FOUC is to preload all your images, or using a loading technique where you swap out a simple placeholder with the real image.