FrancoisBeyers

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

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

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;

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

How can I achieve this in React? Thanks for any help 🙏🏼