Jump to content
GreenSock

FrancoisBeyers

Cursor Animation not working in production

Recommended Posts

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

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

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... 🤦🏼‍♂️

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×