Cursor Animation not working in production

[FrancoisBeyers 0 Likes (Newbie)]

import React, { useEffect } from "react";
import { gsap } from "gsap/dist/gsap";
import tw, { styled } from "twin.macro";

import Layout from "../components/layout";
import SEO from "../components/seo";
import Works from "../components/works";
import About from "../components/about";
import Hero from "../components/hero";
import Contact from "../components/contact";

// Styles
const Ball = styled.div`
  ${tw`fixed w-12 h-12 border-2 rounded-full pointer-events-none`}
  top: -25px;
  left: -25px;
  @media (max-width: 62em) {
    display: none;
  }
`;

function IndexPage() {
  useEffect(() => {
    gsap.set(ball, { xPercent: -50, yPercent: -50 });
    var ball = document.querySelector("div[class*=-Ball]");

    var pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    var mouse = { x: pos.x, y: pos.y };
    var speed = 0.1;

    var xSet = gsap.quickSetter(ball, "x", "px");
    var ySet = gsap.quickSetter(ball, "y", "px");

    window.addEventListener("mousemove", (e) => {
      mouse.x = e.x;
      mouse.y = e.y;
    });

    gsap.ticker.add(() => {
      pos.x += (mouse.x - pos.x) * speed;
      pos.y += (mouse.y - pos.y) * speed;
      xSet(pos.x);
      ySet(pos.y);
    });
  }, []);

  return (
    <Layout>
      <Ball />
      <SEO />

      <Hero />
      <About />
      <Works />
      <Contact />
    </Layout>
  );
}

export default IndexPage;

Hi, my cursor animation does not show up in production. It works fine in Development, but for some reason is nowhere to be seen in production. Can someone please guide in the right direction to fix this? Thank you

[FrancoisBeyers 0 Likes (Newbie)]

Now none of my animations are working. I thought it was just the cursor. 

What am I doing wrong here? Thank you
 

// import { graphql, useStaticQuery, Link } from "gatsby";
import React, { useRef, useEffect } from "react";
import { gsap } from "gsap/dist/gsap";
import tw, { styled } from "twin.macro";
import AnchorLink from "react-anchor-link-smooth-scroll";

const NavBar = styled.header`
  ${tw`fixed hidden text-gray-200 font-Body sm:block`}
`;

const NavContainer = styled.div`
  ${tw`flex items-center justify-between p-5 mx-auto`}
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin-top: 10vw;
  width: 90%;
`;

const NavLogo = styled.a`
  ${tw`flex items-center self-start order-first mb-4 font-semibold text-gray-900 font-Body md:items-center`}
`;

const NavList = styled.nav`
  ${tw`flex flex-col text-base leading-8 text-right`}
`;

const TitleMob = styled.div`
  ${tw`absolute hidden`}
  top: 10%;
  right: 10%;
  transform: translate(-50%, -50%);
  @media (max-width: 43rem) {
    display: block;
  }
`;

const SVG = styled.svg`
  ${tw`text-white fill-current  md:h-10 md:w-10 lg:h-16 lg:w-16`}
`;

function Header() {
  let content = useRef(null);

  useEffect(() => {
    const navLogo = content.children[0];

    const navList = navLogo.nextSibling;

    gsap.from(navLogo, {
      opacity: 0,
      y: -250,
      duration: 4,
    });

    gsap.from(navList, {
      opacity: 0,
      y: 250,
      duration: 4,
    });
  }, []);

  return (
    <>
      <TitleMob ref={(el) => (content = el)}>
        <SVG version="1.0" width="50" height="50" viewBox="0 0 1080 1080">
          <path d="M0 540v539l539.3-.2 539.2-.3.3-538.8L1079 1H0v539zm1018.5 0v478.5l-479.7.3-479.8.2V61l479.8.2 479.7.3V540z"></path>
          <path d="M122.5 129.2c-.3.7-.4 39.3-.3 85.8l.3 84.5H165c40.8 0 42.8-.1 50.8-2.2 13.3-3.6 20.7-7.7 28.8-15.7 9.2-9.3 11.5-14.9 12.2-29.8.6-14.9-1.6-22.3-9.4-30.7-3.4-3.7-7.8-7.1-11.5-9-3.3-1.6-6.1-3.2-6.2-3.5-.1-.2 1.7-1.8 4-3.5 14.1-10.2 20-36 12.1-52.8-5.8-12.4-19.8-20-42.3-23.3-10.8-1.5-80.4-1.3-81 .2zm72.8 36.2c5.2 1.9 7.5 4.2 8.7 8.8 1.4 5.2-.3 11.3-4.4 15.4-3.9 3.9-10.2 5.4-22.6 5.4h-9v-31h11.8c7.2.1 13.2.6 15.5 1.4zm6 65.5c5.9 1.9 9.7 5.9 10.7 11.2 1.6 8.7-1.4 15.6-8.6 19.3-3.4 1.8-6.1 2.1-19.6 2.4l-15.8.4v-35.4l14.8.5c8.1.2 16.4 1 18.5 1.6zM371.4 164.9c-25.6 4.1-47.6 25.3-53 51.2-.8 4-1.5 12.1-1.5 17.9 0 32.1 14.9 54.9 42.5 65.3 7.2 2.7 9.6 3.1 21.6 3.4 12 .4 14.6.2 23.4-2.1 10.1-2.6 20.3-6.9 25.7-10.7l3-2.1-7.2-13.8-7.2-13.7-6.1 2.7c-3.4 1.5-8.5 3.3-11.5 4-6.6 1.6-20.1.8-25.3-1.4-6.8-2.9-12.2-8.7-14.2-15.4l-.7-2.2h75l.8-3.8c.4-2 .7-9.3.7-16.2-.2-20.5-5.3-35.5-16.2-47.2-6.7-7.1-14.6-11.9-23.5-14.2-7.2-1.9-19.8-2.7-26.3-1.7zm20.6 37.3c2.5 1.5 5.4 6.8 6.5 11.5l.7 3.3h-19.1c-21.4 0-20.8.2-17.1-7 2.5-4.8 8.7-9.2 14.3-10 4.9-.7 11.7.4 14.7 2.2zM491 168.1c0 .7 7.7 20.8 17.2 44.8 9.4 24 20.4 52 24.5 62.3 4 10.2 7.3 19.6 7.3 20.8 0 3-2.7 9.1-5.3 11.8-4 4.4-7.6 5.6-16.5 5.5H510l-1 3.6c-4.1 15.4-6.7 28.7-5.9 29.7 1.3 1.6 12 3.4 20.1 3.4 17.7 0 32.3-6.4 42.1-18.6 6-7.4 14.4-23.8 19.2-37.4 11.7-33.2 41.8-121.9 42.2-124.3l.5-2.7h-21.5c-19.7 0-21.6.2-22.1 1.7-2.3 7.9-16 62.5-18.2 73-1.6 7.3-3.1 13.3-3.4 13.3-.4 0-2.1-6.4-3.9-14.1-3-13-8.1-30.3-18.1-61.4l-3.9-12-22.5-.3c-16.9-.2-22.6.1-22.6.9zM168.2 486.1c-24.9 3.1-46.3 22.1-53.8 47.9-2.6 8.9-2.7 32.6-.1 42 10.1 37.6 46.9 56.4 88.5 45 7.6-2.1 19.8-7.5 23.7-10.5 1.9-1.5 1.8-1.9-5-15.1-5.1-9.8-7.4-13.3-8.5-13-.8.3-5.3 1.9-10 3.5-18.9 6.7-37.7 2.5-44-10-3.8-7.4-6.2-6.9 35-6.9 34.4 0 37.1-.1 37.8-1.8.4-.9.7-8.7.7-17.2 0-13.5-.3-16.5-2.3-23-6.9-21.9-19.9-35.3-38.4-39.4-8.7-1.9-16.2-2.4-23.6-1.5zm17.8 36.7c4.1 2 6.6 6.1 7.6 12l.7 4.2h-19.2c-14.6 0-19.1-.3-19.1-1.3.1-2.3 3.7-9.2 6.1-11.3 1.3-1.2 3.8-2.9 5.4-3.7 4.1-2.2 14.1-2.2 18.5.1zM374.2 486.2c-10.5 1.6-20.6 8.3-27.8 18.4-2.6 3.6-4.8 6.3-5 6.1-.2-.2-.8-3.9-1.4-8.3-.6-4.3-1.3-9.1-1.6-10.7l-.6-2.7H301v133h45v-73.6l2.6-5.3c3.2-6.3 7.9-11.2 13.7-14.3 3.6-2 5.6-2.3 14.8-2.2h10.7l4.1-18.9c2.3-10.4 3.9-19.3 3.6-19.7-.5-.8-4.4-1.5-13-2.4-1.6-.1-5.4.1-8.3.6zM150.4 808.9c-14.6 4-25.9 12.3-31.1 23-2.6 5.1-2.8 6.6-2.8 17.1 0 10.2.3 12 2.4 16.3 5.5 10.6 16.3 18.6 35.7 26.3 16.6 6.6 17 6.8 18.2 10.1 2.2 6.6-1.9 9.7-12.8 9.7-9.4-.1-19.9-3.1-27-7.9-2.9-1.9-5.4-3.5-5.6-3.5-.5 0-18.3 23.7-18.6 24.8-.5 1.6 9.1 8.7 17.1 12.6 11.9 6 20.4 7.9 36.1 7.9 11.8 0 14.5-.3 21.5-2.6 9.8-3.2 15.5-6.8 21.8-13.6 7.1-7.6 10-14.6 10.5-25.3.6-12.6-2.1-20.1-10.3-28.3-7.4-7.4-13.3-10.6-29.4-16.1-9.7-3.3-13.2-5-15.3-7.4-3.3-3.6-3.4-5-.9-8.1 4.1-5.1 22.5-3.2 32.7 3.3 2.6 1.6 5 2.6 5.5 2.1 2.5-2.6 17.9-23.8 17.9-24.8 0-3-16.4-12-27.5-15.1-9.5-2.6-29.3-2.9-38.1-.5zM299.2 891.9c-6.6 2.3-12.4 7.7-15.3 14.4-1.8 4.3-2.1 6.5-1.7 13.3.4 7 .9 9 3.4 13.1 11.4 18.4 37.5 17 46.8-2.7 1.6-3.4 2.1-6.4 2.1-12.5-.1-6.9-.4-8.7-3-13.4-3.6-6.6-8.5-10.7-14.9-12.6-6.5-2-10.9-1.8-17.4.4z"></path>
        </SVG>
      </TitleMob>
      <NavBar>
        <NavContainer ref={(el) => (content = el)}>
          <NavLogo>
            <SVG version="1.0" width="100" height="100" viewBox="0 0 1080 1080">
              <path d="M0 540v539l539.3-.2 539.2-.3.3-538.8L1079 1H0v539zm1018.5 0v478.5l-479.7.3-479.8.2V61l479.8.2 479.7.3V540z"></path>
              <path d="M122.5 129.2c-.3.7-.4 39.3-.3 85.8l.3 84.5H165c40.8 0 42.8-.1 50.8-2.2 13.3-3.6 20.7-7.7 28.8-15.7 9.2-9.3 11.5-14.9 12.2-29.8.6-14.9-1.6-22.3-9.4-30.7-3.4-3.7-7.8-7.1-11.5-9-3.3-1.6-6.1-3.2-6.2-3.5-.1-.2 1.7-1.8 4-3.5 14.1-10.2 20-36 12.1-52.8-5.8-12.4-19.8-20-42.3-23.3-10.8-1.5-80.4-1.3-81 .2zm72.8 36.2c5.2 1.9 7.5 4.2 8.7 8.8 1.4 5.2-.3 11.3-4.4 15.4-3.9 3.9-10.2 5.4-22.6 5.4h-9v-31h11.8c7.2.1 13.2.6 15.5 1.4zm6 65.5c5.9 1.9 9.7 5.9 10.7 11.2 1.6 8.7-1.4 15.6-8.6 19.3-3.4 1.8-6.1 2.1-19.6 2.4l-15.8.4v-35.4l14.8.5c8.1.2 16.4 1 18.5 1.6zM371.4 164.9c-25.6 4.1-47.6 25.3-53 51.2-.8 4-1.5 12.1-1.5 17.9 0 32.1 14.9 54.9 42.5 65.3 7.2 2.7 9.6 3.1 21.6 3.4 12 .4 14.6.2 23.4-2.1 10.1-2.6 20.3-6.9 25.7-10.7l3-2.1-7.2-13.8-7.2-13.7-6.1 2.7c-3.4 1.5-8.5 3.3-11.5 4-6.6 1.6-20.1.8-25.3-1.4-6.8-2.9-12.2-8.7-14.2-15.4l-.7-2.2h75l.8-3.8c.4-2 .7-9.3.7-16.2-.2-20.5-5.3-35.5-16.2-47.2-6.7-7.1-14.6-11.9-23.5-14.2-7.2-1.9-19.8-2.7-26.3-1.7zm20.6 37.3c2.5 1.5 5.4 6.8 6.5 11.5l.7 3.3h-19.1c-21.4 0-20.8.2-17.1-7 2.5-4.8 8.7-9.2 14.3-10 4.9-.7 11.7.4 14.7 2.2zM491 168.1c0 .7 7.7 20.8 17.2 44.8 9.4 24 20.4 52 24.5 62.3 4 10.2 7.3 19.6 7.3 20.8 0 3-2.7 9.1-5.3 11.8-4 4.4-7.6 5.6-16.5 5.5H510l-1 3.6c-4.1 15.4-6.7 28.7-5.9 29.7 1.3 1.6 12 3.4 20.1 3.4 17.7 0 32.3-6.4 42.1-18.6 6-7.4 14.4-23.8 19.2-37.4 11.7-33.2 41.8-121.9 42.2-124.3l.5-2.7h-21.5c-19.7 0-21.6.2-22.1 1.7-2.3 7.9-16 62.5-18.2 73-1.6 7.3-3.1 13.3-3.4 13.3-.4 0-2.1-6.4-3.9-14.1-3-13-8.1-30.3-18.1-61.4l-3.9-12-22.5-.3c-16.9-.2-22.6.1-22.6.9zM168.2 486.1c-24.9 3.1-46.3 22.1-53.8 47.9-2.6 8.9-2.7 32.6-.1 42 10.1 37.6 46.9 56.4 88.5 45 7.6-2.1 19.8-7.5 23.7-10.5 1.9-1.5 1.8-1.9-5-15.1-5.1-9.8-7.4-13.3-8.5-13-.8.3-5.3 1.9-10 3.5-18.9 6.7-37.7 2.5-44-10-3.8-7.4-6.2-6.9 35-6.9 34.4 0 37.1-.1 37.8-1.8.4-.9.7-8.7.7-17.2 0-13.5-.3-16.5-2.3-23-6.9-21.9-19.9-35.3-38.4-39.4-8.7-1.9-16.2-2.4-23.6-1.5zm17.8 36.7c4.1 2 6.6 6.1 7.6 12l.7 4.2h-19.2c-14.6 0-19.1-.3-19.1-1.3.1-2.3 3.7-9.2 6.1-11.3 1.3-1.2 3.8-2.9 5.4-3.7 4.1-2.2 14.1-2.2 18.5.1zM374.2 486.2c-10.5 1.6-20.6 8.3-27.8 18.4-2.6 3.6-4.8 6.3-5 6.1-.2-.2-.8-3.9-1.4-8.3-.6-4.3-1.3-9.1-1.6-10.7l-.6-2.7H301v133h45v-73.6l2.6-5.3c3.2-6.3 7.9-11.2 13.7-14.3 3.6-2 5.6-2.3 14.8-2.2h10.7l4.1-18.9c2.3-10.4 3.9-19.3 3.6-19.7-.5-.8-4.4-1.5-13-2.4-1.6-.1-5.4.1-8.3.6zM150.4 808.9c-14.6 4-25.9 12.3-31.1 23-2.6 5.1-2.8 6.6-2.8 17.1 0 10.2.3 12 2.4 16.3 5.5 10.6 16.3 18.6 35.7 26.3 16.6 6.6 17 6.8 18.2 10.1 2.2 6.6-1.9 9.7-12.8 9.7-9.4-.1-19.9-3.1-27-7.9-2.9-1.9-5.4-3.5-5.6-3.5-.5 0-18.3 23.7-18.6 24.8-.5 1.6 9.1 8.7 17.1 12.6 11.9 6 20.4 7.9 36.1 7.9 11.8 0 14.5-.3 21.5-2.6 9.8-3.2 15.5-6.8 21.8-13.6 7.1-7.6 10-14.6 10.5-25.3.6-12.6-2.1-20.1-10.3-28.3-7.4-7.4-13.3-10.6-29.4-16.1-9.7-3.3-13.2-5-15.3-7.4-3.3-3.6-3.4-5-.9-8.1 4.1-5.1 22.5-3.2 32.7 3.3 2.6 1.6 5 2.6 5.5 2.1 2.5-2.6 17.9-23.8 17.9-24.8 0-3-16.4-12-27.5-15.1-9.5-2.6-29.3-2.9-38.1-.5zM299.2 891.9c-6.6 2.3-12.4 7.7-15.3 14.4-1.8 4.3-2.1 6.5-1.7 13.3.4 7 .9 9 3.4 13.1 11.4 18.4 37.5 17 46.8-2.7 1.6-3.4 2.1-6.4 2.1-12.5-.1-6.9-.4-8.7-3-13.4-3.6-6.6-8.5-10.7-14.9-12.6-6.5-2-10.9-1.8-17.4.4z"></path>
            </SVG>
          </NavLogo>
          <NavList>
            <AnchorLink href="#about" className="mr-5 hover:text-gray-600">
              .about
            </AnchorLink>
            <AnchorLink href="#works" className="mr-5 hover:text-gray-600">
              .work
            </AnchorLink>
            <AnchorLink href="#contact" className="mr-5 hover:text-gray-600">
              .contact
            </AnchorLink>
          </NavList>
        </NavContainer>
      </NavBar>
    </>
  );
}

export default Header;

 

[FrancoisBeyers 0 Likes (Newbie)]

I have so far changed the imports to 

import { gsap } from "gsap/dist/gsap";

That didn't work, so now I 've changed it to 

const { gsap } = require("gsap/dist/gsap");

This has not worked either... 🤦🏼‍♂️

[ZachSaucier 7,118 Likes (Superhero)]

Hey Francois. Sorry to hear about the trouble you're having. Have you already watched the modules video on the GSAP installation page? Most of the time you just need

import { gsap } from "gsap";

 But it varies depending on your build system. What are you using? 

[FrancoisBeyers 0 Likes (Newbie)]

@ZachSaucier thank you for replying. Its a GatsbyJS site. I initially used 

import { gsap } from "gsap";

but that didn't work, so I followed the video instructions and tried the alternatives above... On the installation page it mentions to use gsap.registerPlugin(), but I dont use any plugins. Would that make any difference?

[ZachSaucier 7,118 Likes (Superhero)]

3 minutes ago, FrancoisBeyers said:

On the installation page it mentions to use gsap.registerPlugin(), but I dont use any plugins. Would that make any difference?

Not since you're not using any.

 

What error(s) does it give? Can you please create a minimal demo of the issue using something like CodeSandbox?