RickGove

Thank you, I see this error too now, not sure what it is. However, when I deploy the codepen to my GitHub pages site, all the animations work great. Do you have any idea what could be causing this issue on the bigger page? I am using: react-router (hashrouter) Redux would any of these things cause such odd behaviors? I am going to rebuild it tomorrow component by component and try and make it all work, thanks for your time, but it's definitely something on my side.

Okay, I've managed to get a codepen up and running: https://codepen.io/rickgove/pen/RwaPmrQ?editors=0010 I'm also going to npm run build this single file version and deploy it and see what happens.

Thank you. I have updated the code. Unfortunately, I can't run CodePen on this machine. It's very old and slow. Here is my new code, and the same things are happening. export default function Contact () { const anImg = useRef(), anTitleCont = useRef(); const st = { trigger: '.trigger', start: 'top 50%', end: '70% 50%', toggleActions: 'play reverse play reverse', }; useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.from('.anImg', { opacity: 0, x: -1000, top: -500, stagger: 0.2, duration: 1.5, rotate: 360, ease: 'power4', scrollTrigger: st, }); gsap.from('.anTitleCont', { opacity: 0, x: -1000, duration: 1, ease: 'power4', scrollTrigger: st, }); },[]); return ( <ContactCon id="Contact"> <div className="trigger" /> <ContactDiv> <div ref={anTitleCont} className="anTitleCont"> <ShowH1 col="white">Contact Me</ShowH1> <br /> </div> <div ref={anImg} className="anImg"> <ContactA href="https://github.com/RickGove"> <EmailImg src={logoGit} /> </ContactA> </div> <div ref={anImg} className="anImg"> <ContactA href="https://leetcode.com/rickbgove/"> <EmailImg src={leet} /> </ContactA> </div> <div ref={anImg} className="anImg"> <ContactA href="mailto:rick.gove.developer@gmail.com"> <EmailImg src={email} /> </ContactA> </div> <div ref={anImg} className="anImg"> <ContactA href="http://www.linkedin.com/in/richard-gove-developer"> <EmailImg src={linked} /> </ContactA> </div> {/* <div className="anImg"> <ContactA href="FaceBook"> <EmailImg src={facebook} /> </ContactA> </div> */} <div className="anImg"> <ContactA href="https://twitter.com/@gove_rick"> <EmailImg src={twitter} /> </ContactA> </div> </ContactDiv> </ContactCon> ); } import React, { useEffect, useRef } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { Container } from '../GlobalStyle'; import { Box, BoxImg, BoxCon, BoxGrid, H3Box, PBox, ToolsTitle, } from './ToolsStyle'; import { tools } from '../data/Data'; import { ShowH1 } from '../about/AboutStyle'; import logoTool from '../../img/logo_tools.png'; export default function Boxes() { const anTool = useRef(), anTitleTools = useRef(), triggerTools = useRef(), toolsTriggerEnd = useRef(); useEffect(() => { const stTools = { trigger: triggerTools.current, start: 'top 50%', end: 'bottom 60%', endTrigger: toolsTriggerEnd.current, toggleActions: 'play reverse play reverse', }; gsap.registerPlugin(ScrollTrigger); gsap.from(anTool.current, { opacity: 0, scale: 0, stagger: 0.4, duration: 1.5, ease: 'slow', scrollTrigger: stTools, }); gsap.from(anTitleTools.current, { opacity: 0, scale: 0, ease: 'power4', duration: 2, scrollTrigger: stTools, }); }, []); function renderTools() { const colors = [ '#778beb', '#786fa6', '#303952', '#e15f41', '#596275', '#f5cd79', ]; return tools.map((tool) => { let last = ''; let randomColor = colors[Math.round(Math.random() * (colors.length - 1))]; if (last === randomColor) { randomColor = colors[Math.round(Math.random() * (colors.length - 1))]; } else { last = randomColor; } return ( <Box key={tool.name} bg={randomColor} id={tool.name}> <BoxImg src={tool.logo} /> <H3Box>{tool.name}</H3Box> <PBox>{tool.Description}</PBox> </Box> ); }); } return ( <BoxCon id="Tools"> <div ref={triggerTools} /> <Container> <ToolsTitle> <ShowH1 col="black"> <div ref={anTitleTools} className="anTitleTools"> <BoxImg src={logoTool} r="30px" sz="45px" /> Tools </div> </ShowH1> </ToolsTitle> <BoxGrid ref={anTool} className="anTool" id="BoxGrid"> {renderTools()} </BoxGrid> <div ref={toolsTriggerEnd} className="toolsTriggerEnd" /> </Container> </BoxCon> ); } import React, { useEffect, useRef } from 'react'; import { gsap } from 'gsap'; import { ShowSubhead, ShowCaseCon, ShowH1, ShowImg, AboutTitle, AboutWPDiv, } from './AboutStyle'; import MoreInfo from '../MoreInfo/'; import FindOutMore from '../FindOutMore/'; import meA from '../../img/RBG.jpg'; function ShowCase() { const triggerAbout = useRef(), anName = useRef(), anSub = useRef(), anB = useRef(); useEffect(() => { const tl = gsap.timeline(); const delay = 2; const stagger = 0.5; tl.from(anName.current, { duration: delay, opacity: 0, x: -1000, ease: 'power4', }); tl.from(anB.current, { duration: delay / 2, opacity: 0, y: -100, stagger: stagger, ease: 'bounce', }); tl.from(anSub.current, { duration: delay / 2, opacity: 0, y: -100, ease: 'bounce', }); return function () { tl.kill(); }; }, []); return ( <AboutWPDiv> <div ref={triggerAbout} className="triggerAbout" /> <ShowCaseCon id="About"> <AboutTitle> <div ref={anName} className="anName"> <ShowH1>Hi, I'm Rick Gove</ShowH1> </div> </AboutTitle> <div ref={anB} className="anB"> <ShowImg src={meA}></ShowImg> </div> <ShowSubhead ref={anSub} className="anSub"> Junior Web Developer </ShowSubhead> <div> <FindOutMore /> <MoreInfo /> </div> </ShowCaseCon> </AboutWPDiv> ); } export default ShowCase;

Using React, I have added GSAP to two apps within one website. This is deployed to both GitHub Pages, and Netlify. While working great on my npm localhost, all the animations run when the page is first loaded, not when the component is scrolled into view, as it does on my LocalHost... import React from 'react'; import { GlobalStyle } from './GlobalStyle'; import HeaderDeterminer from './header/HeaderDeterminer'; import ScrollToTop from './scrollToTop/'; import About from './about/'; import Contact from './contact/'; import Tools from './tools/'; import Projects from './projects/Projects'; import Footer from './footer/'; class App extends React.Component { render() { return ( <React.Fragment> <GlobalStyle /> <HeaderDeterminer /> <ScrollToTop /> <About /> <Contact /> <Tools id="Tools" /> <Projects /> <Footer /> </React.Fragment> ); } } export default App; About, Contact, and Tools all have GSAP animation and are use ScrollToggle here they are: ABOUT: import React, { useEffect } from 'react'; import { gsap } from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { ShowSubhead, ShowCaseCon, ShowH1, ShowImg, AboutTitle, AboutWPDiv, } from './AboutStyle'; import MoreInfo from '../MoreInfo/'; import FindOutMore from '../FindOutMore/'; import meA from '../../img/RBG.jpg'; function ShowCase() { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: '.triggerAbout', toggleActions: 'play reset play reset', start: -600, }, }); const delay = 2; const stagger = 0.5; tl.from('.anName', { duration: delay, opacity: 0, x: -1000, ease: 'power4', }); tl.from('.anB', { duration: delay / 2, opacity: 0, y: -100, stagger: stagger, ease: 'bounce', }); tl.from('.anSub', { duration: delay / 2, opacity: 0, y: -100, ease: 'bounce', }); tl.from('.anC', { y: -100, duration: delay, opacity: 0, ease: 'power3', }); return function () { tl.kill(); }; }); return ( <AboutWPDiv> <div classname="triggerAbout" /> <ShowCaseCon id="About"> <AboutTitle> <div className="anName"> <ShowH1>Hi, I'm Rick Gove</ShowH1> </div> </AboutTitle> <div className="anB"> <ShowImg src={meA}></ShowImg> </div> <ShowSubhead className="anSub">Junior Web Developer</ShowSubhead> <div> <FindOutMore /> <MoreInfo /> </div> </ShowCaseCon> </AboutWPDiv> ); } export default ShowCase; Contact: import React, { useEffect } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { ContactCon, ContactDiv, ContactA, EmailImg } from './ContactStyle'; import { ShowH1 } from '../about/AboutStyle'; import email from '../../img/logo_email.png'; import linked from '../../img/logo_linked.png'; import leet from '../../img/logo_leet.png'; import logoGit from '../../img/logo_github.png'; // import facebook from '../../img/logo_facebook.png'; import twitter from '../../img/logo_twitter.png'; export default function () { const st = { trigger: '.trigger', start: 'top 50%', end: 'bottom 50%', toggleActions: 'play reverse play reverse', }; useEffect(() => { window.addEventListener('scroll', checkIfViewed); checkIfViewed(); gsap.registerPlugin(ScrollTrigger); gsap.from('.anImg', { opacity: 0, x: -1000, top: -500, endTrigger: 200, stagger: 0.2, duration: 1.5, rotate: 360, ease: 'power4', scrollTrigger: st, }); gsap.from('.anTitleCont', { opacity: 0, x: -1000, duration: 1, ease: 'power4', scrollTrigger: st, }); }); function checkIfViewed() { // Get the current component let comp = document.getElementById('Contact'); if (comp !== null) { // Get it's position in the viewport let bounding = comp.getBoundingClientRect(); if (bounding.top <= 0 && bounding.top >= ~bounding.height) { } else { } } } return ( <ContactCon id="Contact"> <div className="trigger" /> <ContactDiv> <div className="anTitleCont"> <ShowH1 col="white">Contact Me</ShowH1> <br /> </div> <div className="anImg"> <ContactA href="https://github.com/RickGove"> <EmailImg src={logoGit} /> </ContactA> </div> <div className="anImg"> <ContactA href="https://leetcode.com/rickbgove/"> <EmailImg src={leet} /> </ContactA> </div> <div className="anImg"> <ContactA href="mailto:rick.gove.developer@gmail.com"> <EmailImg src={email} /> </ContactA> </div> <div className="anImg"> <ContactA href="http://www.linkedin.com/in/richard-gove-developer"> <EmailImg src={linked} /> </ContactA> </div> {/* <div className="anImg"> <ContactA href="FaceBook"> <EmailImg src={facebook} /> </ContactA> </div> */} <div className="anImg"> <ContactA href="https://twitter.com/@gove_rick"> <EmailImg src={twitter} /> </ContactA> </div> </ContactDiv> </ContactCon> ); } and Tools: import React, { useEffect } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { Container } from '../GlobalStyle'; import { Box, BoxImg, BoxCon, BoxGrid, H3Box, PBox, ToolsTitle, } from './ToolsStyle'; import { tools } from '../data/Data'; import { ShowH1 } from '../about/AboutStyle'; import logoTool from '../../img/logo_tools.png'; export default function Boxes() { const stTools = { trigger: '.anTitleTools', start: 'top 50%', end: 'bottom 100%', endTrigger: '.toolsTriggerEnd', toggleActions: 'play reverse play reverse', }; useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.from('.anTool', { opacity: 0, scale: 0, endTrigger: 200, stagger: 0.4, duration: 1.5, pin: true, ease: 'slow', scrollTrigger: stTools, }); gsap.from('.anTitleTools', { opacity: 0, scale: 0, ease: 'power4', duration: 2, scrollTrigger: stTools, }); }); function renderTools() { const colors = [ '#778beb', '#786fa6', '#303952', '#e15f41', '#596275', '#f5cd79', ]; return tools.map((tool) => { let last = ''; let randomColor = colors[Math.round(Math.random() * (colors.length - 1))]; if (last === randomColor) { randomColor = colors[Math.round(Math.random() * (colors.length - 1))]; } else { last = randomColor; } return ( <Box key={tool.name} bg={randomColor} id={tool.name}> <BoxImg src={tool.logo} /> <H3Box>{tool.name}</H3Box> <PBox>{tool.Description}</PBox> </Box> ); }); } return ( <BoxCon id="Tools"> <Container> <ToolsTitle> <ShowH1 col="black"> <div className="anTitleTools"> <BoxImg src={logoTool} r="30px" sz="45px" /> Tools </div> </ShowH1> </ToolsTitle> <BoxGrid className="anTool" id="BoxGrid"> {renderTools()} </BoxGrid> <div className="toolsTriggerEnd" /> </Container> </BoxCon> ); } And a similar issue is happening on a second app where two components are loaded into one page, but only the first component is animating. I had previously only deployed it to: rickgove.github.io But I signed up for Netlify when it didn't work just to see if it was a GitHub pages issue. It is equally not working on both. http://rickgove.github.io/ and https://adoring-murdock-e54ed4.netlify.app/#/ both behave in the same way Maybe it's something wrong with my ScrollTrigger code? I'm not sure

I have also done all those steps when I first deployed it... except I don't use NPM run deploy, will try that instead, but maybe it's just GitHub...

I have done that, just not sure what to call it now... haha

As far as I know I am just using the basic GSAP. Linear, TweenMax, TimelineMax

I've followed everything you guys have said, and it's working now, but only if navigated to from the front-page of my portfolio. If you try to navigate directly to the DiceGame page, the dice will not load. Additionally, if you do navigate there via the front-page, and then refresh the page, the dice will again not show up. This is very odd behaviour and it may not even be GSAP. Also it doesn't have this behaviour on my localhost. Could it be a GitHub pages thing? I'm out of ideas, but does anyone else have any ideas?

I would assume so. I've never had a component only render some of the time. Especially considering that it's on a page with nothing else in it. I know it doesn't make much sense. But I've had no troubles like this before I started to use gsap for this dice. I had made a CSS animation that worked fine, but I wanted to use gsap to learn it and make it look better.

The dice component isn't showing up in the game app, or in the dice component on its own at https://rickgove.github.io/#/DiceGame or https://rickgove.github.io/#/Dice

Hi, sorry again It's still not loading Do you have anything else that I can try?

Thank you very much, everything works perfectly. Gsap has amazing support

Thank you, I finally have it working - more or less. I am just wondering if I need to do some kind of unmounting function to a GSAP component. Because when I reload the page now - which is something that probably won't happen too often but still - there's an image which becomes absolutely massive, and the dice goes away. I know it's not anything to with any other component because there's another page using the same icon component where, when reloaded, is fine. Steps to recreate the problem: 1) https://rickgove.github.io/#/DiceGame 2) reload 3) click on the big blue image and it will take you to the main page, where everything is all messed up as well This doesn't happen on an other site that uses the same blue image component 1) https://rickgove.github.io/#/SuperHeroSmackDown 2) Reload - and all is well I understand too that this may be beyond the scope of GSAP, but I appreciate any help you can give me

@Rodrigo I have changed it to use useEffect, however it's still no loading all the time. I also looked at how to migrate to the new syntax, and it seems I can just replace TweenMax. to gsap. I can't find out what to do for Linear and TimelineMax now though. I also tried to make a CodeSandbox for the file, but CodeSandbox took over 10 minutes to load so I gave up on it. I have uploaded the new version to https://rickgove.github.io/#/dice https://github.com/RickGove/Current-Portfolio/tree/master/src/components/DiceGame/dice

Thanks for your help you guys! You also may have helped me fix the issue with Vorlon at the same time!

I have a rolling dice on a page that uses GSAP. Sometimes it loads, and sometimes it doesn't. It's deployed on GitHub pages. I installed GSAP via NPM and in my pulblic/index.html I have added: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script> The link is here: https://rickgove.github.io/#/dicegame and the dice only is here: https://rickgove.github.io/#/dice Here is a link to the repo on GH: https://github.com/RickGove/Current-Portfolio/tree/master/src/components/DiceGame https://github.com/RickGove/Current-Portfolio/tree/master/src/components/DiceGame/dice Here's the code for the component: React, { useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { TweenMax, Linear, TimelineMax } from 'gsap'; import { DiceWrap } from './style'; import { setRoundScore, setActivePlayer, setRolled, setIsRolling, } from '../../../actions'; export default function Dice() { const dispatch = useDispatch(); const roundScore = useSelector((state) => state.roundScore); const activePlayer = useSelector((state) => state.activePlayer); const rolledLast = useSelector((state) => state.rolled); //////////// Copy Pasta //////// const cubeRef = useRef(); const sceneRef = useRef(); let canRoll = true; let i = 90; let j = 0; //Main DOM Variables and Selectors //Selects Cube Face X via CSS Degree Rotatation const cubeFace = [ 'translateX(200px)', 'rotateX(90deg)', 'rotateX(180deg)', 'rotateX(270deg)', ]; TweenMax.set(sceneRef.current, { perspective: 0 }); //Rotates through cubeFace array on each click. //If i>cubeFace reset to 0 and preform 1st step. const RotateY = function () { TweenMax.to(cubeRef.current, 0.5, { transform: cubeFace, ease: Linear.easeNone, }); if (i < cubeFace.length) { i++; console.log(i); } else { i = 1; TweenMax.to(cubeRef.current, 0.5, { transform: cubeFace[0], ease: Linear.easeNone, }); console.log(i); } }; //RotateY Function const RotateX = function () { TweenMax.to(cubeRef.current, 0.5, { transform: 'rotateY(' + i + 'deg)' }); i += 90; }; //Random Experimental Scene const tl = new TimelineMax({ paused: true, repeat: 3 }); tl.yoyo(true); tl.to(cubeRef.current, 1, { rotation: 360 }) .to(cubeRef.current, 1, { rotationY: 360, rotationX: 360 }, '-=1') .to(sceneRef.current, 1, { scale: 0.2 }, '-=1') .to(cubeRef.current, 1, { x: 500 }, '-=1'); tl.timeScale(1); const start = function () { tl.restart(); }; //Roll Die Timeline const startRoll = function () { if (canRoll) { dispatch(setIsRolling(true)); canRoll = false; const duration = 1500; let randomNum = Math.floor(Math.random() * 3); //between 0 and 5 let rl = new TimelineMax({ onComplete: faceRoll }); rl.to(cubeRef.current, 0.01, { rotationY: 0, rotationX: 0 }); rl.to(cubeRef.current, 3, { rotationY: 1800, rotationX: 1800 }); rl.to(sceneRef.current, 3, { scale: 0.2 }, '-.1'); rl.timeScale(4); rl.restart(); } }; const faceRoll = function () { var randomNum = Math.floor(Math.random() * 6); //between 0 and 5 if (randomNum === 0) { TweenMax.to(cubeRef.current, 0.2, { rotationY: 0, rotationX: 0 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } if (randomNum === 5) { TweenMax.to(cubeRef.current, 0.2, { rotationX: 90, scale: 1 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } if (randomNum === 1) { TweenMax.to(cubeRef.current, 0.2, { rotationX: 180, scale: 1 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } if (randomNum === 4) { TweenMax.to(cubeRef.current, 0.2, { rotationX: 270, scale: 1 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } if (randomNum === 2) { TweenMax.to(cubeRef.current, 0.2, { rotationY: 90, scale: 1 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } if (randomNum === 3) { TweenMax.to(cubeRef.current, 0.2, { rotationY: 270, scale: 1 }, '-1'); TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1'); } window.setTimeout(() => { canRoll = true; dispatch(setIsRolling(false)); if (randomNum + 1 === 1) { dispatch(setRoundScore(0)); activePlayer === 0 ? dispatch(setActivePlayer(1)) : dispatch(setActivePlayer(0)); } else { dispatch(setRolled(randomNum + 1)); dispatch(setRoundScore(roundScore + randomNum + 1)); } }, 500); }; //FaceRoll If Statement ///////////////////// return ( <DiceWrap> <div id="box1" onClick={startRoll}> <div className="scene" ref={sceneRef}> <div className="cube" ref={cubeRef}> <div className="cube-face front-face rfront"></div> <div className="cube-face back-face rback"></div> <div className="cube-face left-face rleft"></div> <div className="cube-face right-face rright"></div> <div className="cube-face top-face rtop"></div> <div className="cube-face bottom-face rbottom"></div> </div> </div> </div> </DiceWrap> ); }