Jump to content
Search Community

Cursor Animation not working in production

FrancoisBeyers test

By FrancoisBeyers
in GSAP

Moderator Tag
 Share

Recommended Posts

FrancoisBeyers test

FrancoisBeyers

Posted
Posted 
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

Link to comment
Share on other sites
FrancoisBeyers test

FrancoisBeyers

Posted
  • Author
Posted

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;

 

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted
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?

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...