gsap#TweenMax JavaScript Examples

IndexPageTemplate = ({ data }) => {
  let appln = useRef(null);

  useEffect(() => {
    TweenMax.to(appln, 0, { css: { visibility: "visible" } });
    console.log(appln);
  });
  return (
    <div className="main" ref={(el) => (appln = el)}>
      <Jumbotron />

      <MyCard data={data} />
      <TopPosts data={data} />

      <SlickSlider />

      <RecentPosts data={data} />
      <About />
    </div>
  );
}

function Contact() {
  let screen = useRef(null);
  let body = useRef(null);
  useEffect(() => {
    var tl = new TimelineMax();
    tl.to(screen, {
      duration: 1.2,
      height: "100%",
      ease: Power3.easeInOut,
    });
    tl.to(screen, {
      duration: 1,
      top: "100%",
      ease: Power3.easeInOut,
      delay: 0.3,
    });
    tl.set(screen, { left: "-100%" });
    TweenMax.to(body, .3, {css: {
      opacity: "1",
      pointerEvents: "auto",
      ease: Power4.easeInOut
    }}).delay(2);
    return () => {
      TweenMax.to(body, 1, {css: {
        opacity: "0",
        pointerEvents: 'none'
      }});
  }
  });
  return (
    <React.Fragment>
      <div className="load-container">
        <div className="load-screen1" ref={(el) => (screen = el)}></div>
      </div>
      <div data-barba="container" className="Contact">
        <div ref={(el) => (body = el)} className="Headd">
          <div > Contact Me!!!</div>
          <NavLink to="/" className="button">Home</NavLink>
        </div>
      </div>
    </React.Fragment>
  );
}

function Home() {
  let screen = useRef(null);
  let body = useRef(null);
  useEffect(() => {
    var tl = new TimelineMax();
    tl.to(screen, {
      duration: 1.2,
      width: "100%",
      left: "0%",
      ease: Power3.easeInOut,
    });
    tl.to(screen, {
      duration: 1,
      left: "100%",
      ease: Power3.easeInOut,
      delay: 0.3,
    });
    tl.set(screen, { left: "-100%" });
    TweenMax.to(body, .3, {css: {
      opacity: "1",
      pointerEvents: "auto",
      ease: Power4.easeInOut
    }}).delay(2);
    return () => {
      TweenMax.to(body, 1, {css: {
        opacity: "0",
        pointerEvents: 'none'
      }});
  }
  });
  return (
    <React.Fragment>
      <div className="load-container">
        <div className="load-screen" ref={(el) => (screen = el)}>
        </div>
      </div>
      <div data-barba="container" className="Home">
        <div ref={(el) => (body = el)} className="Headd">
          <div >Welcome to Home!!!</div>
          <NavLink to="/contact" className="button">Contact</NavLink>
        </div>
      </div>
    </React.Fragment>
  );
}

export default function LandingPage() {
  const [username, setUsername] = useState("");
  const octocatRef = useRef();
  const landingRef = useRef();
  const loaderRef = useRef();
  const history = useHistory();

  const handleUsernameSubmit = (e) => {
    if (e.key === "Enter" && username !== "") {
      // GSAP ANIMATIONS
      TweenMax.to(octocatRef.current, 0.5, {
        opacity: 0,
        y: "50%",
        display: "none",
      });
      TweenMax.to(landingRef.current, 0.5, {
        opacity: 0,
        y: "-50%",
        display: "none",
      });
      TweenMax.to(loaderRef.current, 1, { opacity: 1 });

      setTimeout(() => history.push(`/${username}`), 2000);
    }
  };

  // Fade-In Transitions
  useEffect(() => {
    TweenMax.to(octocatRef.current, 1, {
      opacity: 1,
    });
    TweenMax.to(landingRef.current, 1, {
      opacity: 1,
    });
  }, []);

  return (
    <section className="landing__section">
      <Particles className="particles-js" params={particleOptions} />
      <div className="landing__header" ref={landingRef}>
        <LandingHeader
          inputHandler={(e) => setUsername(e.target.value)}
          username={username}
          keyUpHandler={handleUsernameSubmit}
        />
      </div>

      <div className="landing__octo" ref={octocatRef}>
        <img src="/assets/images/octo.png" alt="GitHub Lunar OctoCat" />
      </div>

      <div className="landing__loader" ref={loaderRef}>
        <LandingLoader />
      </div>
    </section>
  );
}

Dashboard = (props) => {

  const socket = props.socket
  const headings = ["Bonjour", "Hola", "Namaste"]
  const [currentCount, setCount] = useState(0);
  const [render, setRender] = useState(true)
  const [name, setName] = useState("")

  const timer = () => setCount(currentCount + 1);
  const char_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
  const length = 6
  const [code, setCode] = useState("")


  // GSAP ref
  let hello = useRef(null)
  let helloHidden = useRef(null)
  let infoHidden = useRef(null)
  let infoHiddenContinue = useRef(null)
  let linkInfo = useRef(null)
  let button = useRef(null)
  let history = useHistory();

  // New GSAP timeline.
  let tl = new TimelineLite({ delay: .4 });

  if (render == true) {
    const token = localStorage.getItem('jwtToken');
    if (token) {
      const decoded = jwt_decode(token);
      setName(decoded.name)
      setRender(false)
    }
  }


  // For Hello headings.
  useEffect(() => {
    if (currentCount > 1) {
      return;
    }
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, [currentCount]);

  // Create a code for the room.
  const generateCode = () => {
    let text = ""
    for (let i = 0; i < length; i++) {
      text += char_list.charAt(Math.floor(Math.random() * char_list.length));
    }
    setCode(text)
  }

  // Create a room and redirect user.
  useEffect(() => {
    if (code !== "") {
      if (name === "") {
        history.push(`/register`)
      } else {
        socket.emit('created-room', code)
        console.log('CREATED-ROOM')
        history.push(`/editor/${code}`)
      }
    }

  }, [code])

  useEffect(() => {

    // GSAP animations, no timeline :(
    TweenMax.to(hello, 2, { css: { display: 'none' } })
    TweenMax.to(helloHidden, 1, { css: { display: 'inherit' }, delay: 4.5 })
    TweenMax.to(helloHidden, 1, { y: -60, ease: Power3.easeOut, delay: 4.5 })
    TweenMax.to(infoHidden, 3, { css: { display: 'inherit' }, delay: 4.5 })
    TweenMax.to(infoHidden, 1, { y: -40, opacity: 1, ease: Power3.easeInOut, delay: 5.5 })
    TweenMax.to(infoHiddenContinue, 4, { css: { display: 'inherit' }, delay: 4.5 })
    TweenMax.to(infoHiddenContinue, 1, { y: -20, opacity: 1, ease: Power3.easeInOut, delay: 6.5 })
    TweenMax.to(linkInfo, 5, { css: { display: 'inherit' }, delay: 4.5 })
    TweenMax.to(linkInfo, 1, { y: 0, opacity: 1, ease: Power3.easeInOut, delay: 7.5 })
    TweenMax.to(button, 0.5, { opacity: 1, delay: 5.5 });

  }, [tl])

  return (

    <div className="dashboard">
      <h1 ref={el => hello = el} className="heading">{headings[`${currentCount}`]}</h1>
      <h1 ref={el => helloHidden = el} className="heading-visible">Hello, {name}</h1>
      <h1 className="intro" ref={el => infoHidden = el}>Your dashboard is pretty empty right now.</h1>
      <h1 className="introContinue" ref={el => infoHiddenContinue = el}>More features have been planned for this project.</h1>
      <h1 className="introContinue" ref={el => linkInfo = el}>Have fun.</h1>
      <div className="create-room ui text container" style={{ textAlign: "center" }} ref={el => button = el}>
        <div onClick={generateCode}
          className="ui huge black button"
          style={{ marginTop: "0vh", marginRight: "0em" }}
        >Create a Room</div>
      </div>
    </div>
  );
}

function MainPage(props) {

    const socket = props.socket
    const char_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
    const length = 6

    const [code, setCode] = useState("")
    const [name, setName] = useState("")
    const [render, setRender] = useState(true)

    const history = useHistory();

    let app = useRef(null)
    let content = useRef(null)
    let image = useRef(null)
    let button = useRef(null)
    let headlineSecond = useRef(null)
    let headlineThird = useRef(null)
    let tl = new TimelineLite({ delay: .4 });

    if (render == true) {
        const token = localStorage.getItem('jwtToken');
        if (token) {
            const decoded = jwt_decode(token);
            setName(decoded.name)
            setRender(false)
        }
    }

    const generateCode = () => {
        let text = ""
        for (let i = 0; i < length; i++) {
            text += char_list.charAt(Math.floor(Math.random() * char_list.length));
        }
        setCode(text)
    }

    useEffect(() => {
        if (code !== "") {
            if (name === "") {
                history.push(`/register`)
            } else {
                socket.emit('created-room', code)
                console.log('CREATED-ROOM')
                history.push(`/editor/${code}`)
            }
        }

    }, [code])

    useEffect(() => {

        //content vars
        const contentP = content.children[1];

        //Remove initial flash
        TweenMax.to(app, 0, { css: { visibility: 'visible' } })
        // TweenMax.to(button, 5.5, { css: { visibility: 'visible' } })
        TweenMax.to(headlineThird, 0.5, { opacity: 1, delay: 2 });
        TweenMax.to(button, 0.5, { opacity: 1, delay: 2.5 });

        tl.from(image, 1.6, { x: -1280, ease: Power3.easeOut }, 'Start')

        // Content Animation
        tl.staggerFrom([headlineSecond], 1, {
            y: 0,
            ease: Power3.easeOut,
            delay: .2
        }, .15, 'Start')
            .from(contentP, 1, { y: 40, opacity: 0, ease: Power3.easeOut }, 0.6)
        // .from(contentButton, 1, { y: 20, opacity: 0, ease: Power3.easeOut }, 1.6)

    }, [tl])

    const onLogoutClick = (e) => {
        localStorage.removeItem("jwtToken");
        window.location.reload();
    };

    return (
        <div className="mainPage" ref={el => app = el}>
            <nav className="navbar">
                <Link to="/" className="logo">CodeLive</Link>
                <ul className="nav-links">
                    {name !== "" ?
                        <>
                            <li className="nav-item linkAnim"><a href="https://github.com/Nobitaaah/code-live">Github</a></li>
                            <li className="nav-item">Hello, {name}</li>
                            <li className="nav-item login linkAnim "><Link to="/" onClick={onLogoutClick}>Log out</Link></li></ > :
                        <>
                            <li className="nav-item linkAnim"><a href="https://github.com/Nobitaaah/code-live">Github</a></li>
                            <li className="nav-item linkAnim"><Link to="/register">Sign up</Link></li>
                            <li className="nav-item login linkAnim "><Link to="/login">Log in</Link></li></ >}
                </ul>
            </nav>

            <div className="container-flex">
                <div className="container-flex-info" ref={el => content = el}>
                    <div className="container-flex-title" >
                        Live code sharing made easy.
                    </div>
                    <div className="container-flex-intro" ref={el => headlineSecond = el}>
                        Share your code with others for interviews, troubleshooting, teaching & more!
                    </div>

                    <div className="container-flex-intro-video">
                        <img src={codeShare} className="codeShareGIF" ref={el => image = el} alt="code share gif" />
                    </div>
                    <div className="headlineThird container-flex-intro-continue" ref={el => headlineThird = el}>
                        Supports multiple languages with no limit on participants.
                    </div>
                </div>

            </div>
            <div className="create-room-main ui text container" style={{ textAlign: "center" }} ref={el => button = el}>
                <div onClick={generateCode}
                    className="ui huge black button"
                    style={{ marginTop: "5vh", marginRight: "0em" }}
                >
                    Create a Room
                </div>
            </div>


        </div >);
}

export default function ProfilePage() {
  let { username } = useParams();
  const history = useHistory();
  const profileRef = useRef();
  const card1ref = useRef();
  const card2ref = useRef();
  const card3ref = useRef();
  const reportRef = useRef();
  const [loading, setloading] = useState(true);
  const [error, setError] = useState(null);
  const [report, setReport] = useState(null);

  const backToHome = () => {
    TweenMax.to(profileRef.current, 0.75, {
      opacity: 0,
    });
    setTimeout(() => history.push("/"), 1000);
  };
  const isMobile = useMediaQuery("(min-width:720px)");

  const fetchReport = async () => {
    const req = await getUserReport(username);

    if (req.error_code == 1) {
      setError(`0xb00${req.error_code}`);
    } else {
      let _data = req.data;
      setReport({
        commits: _data.commits,
        issues: _data.issues,
        pullrequests: _data.pr,
        stars: _data.stars,
      });
      TweenMax.to(card3ref.current, 1, {
        opacity: 1,
        y: "0%",
      });
    }
    setloading(false);
  };

  const saveReport = () => {
    html2canvas(reportRef.current).then((canvas) => {
      var img = canvas.toDataURL();
      let a = document.createElement("a");
      a.href = img;
      a.download = `${username}'s-report.png`;
      a.click();
    });
  };

  // Fade-In Transitions
  useEffect(() => {
    TweenMax.set(profileRef.current, {
      opacity: 0,
    });
    TweenMax.set(card1ref.current, {
      opacity: 0,
      y: "50%",
    });
    TweenMax.set(card2ref.current, {
      opacity: 0,
      y: "50%",
    });
    TweenMax.set(card3ref.current, {
      opacity: 0,
      y: "50%",
    });
    TweenMax.to(
      profileRef.current,
      1,
      {
        opacity: 1,
      },
      "+=1"
    );
    setTimeout(() => {
      TweenMax.to(card1ref.current, 1, {
        opacity: 1,
        y: "0%",
      });
    }, 500);
    setTimeout(() => {
      TweenMax.to(card2ref.current, 1, {
        opacity: 1,
        y: "0%",
      });
    }, 1000);

    fetchReport();
  }, []);

  return (
    <section className="profile__section">
      <Particles className="particles-js" params={particleOptions} />

      <div className="profile__content" ref={profileRef}>
        <div className="profile__column__left">
          <div className="back__button">
            <IconButton onClick={backToHome} centerRipple={true}>
              <ArrowBackIcon />
            </IconButton>
            <div className="text">Back</div>
          </div>
        </div>
        <div className="profile__skeleton">
          {error != null && (
            <div className="error__wrapper">
              <div className="error__content">
                <p>Something went wrong.</p>({error})
                <a
                  rel="noopener"
                  target="_blank"
                  href="https://github.com/ishandeveloper/github-wrapped/issues/new"
                  className="file__issue"
                >
                  File an issue
                </a>
              </div>
            </div>
          )}
          {loading && error == null && (
            <ContentLoader
              height={!isMobile ? "600px" : "720px"}
              width={"100%"}
              backgroundColor="rgba(255,255,255,0.25)"
              foregroundColor="rgba(255,255,255,0.3)"
            >
              <rect rx="10" ry="10" width="100%" height="720px" />
            </ContentLoader>
          )}

          {!loading && error == null && (
            <YearInReviewReport
              reportReference={reportRef}
              commits={report.commits}
              stars={report.stars}
              pr={report.pullrequests}
              issues={report.issues}
              username={username}
            />
          )}

          <div className="profile__actions">
            {report != null && (
              <a
                target="_blank"
                rel="noopener"
                href={`https://twitter.com/intent/tweet?original_referer=https://githubwrapped.techF&ref_src=twsrc%5Etfw&text=In 2020 I made over ${report.commits}%2B commits and ${report.pullrequests} Pull Requests towards open-source! Check how your %23GithubWrapped up in 2020 at&tw_p=tweetbutton&url=githubwrapped.tech`}
                className="tweet-btn"
              >
                <img
                  src="/assets/images/icons/twitter.svg"
                  alt="Twitter Logo"
                />
                Share on Twitter
              </a>
            )}
          </div>
        </div>
        <div className="profile__column__right">
          <div className="profile__card" ref={card1ref}>
            <h3>Did you know?</h3>
            <p>
              So far, Over <span className="highlight">1.9 Billion+ </span>
              commits have been made towards open-source this year.
            </p>
          </div>

          <div className="profile__card" ref={card2ref}>
            <h3>Fun Fact</h3>
            <p>
              JavaScript continues to dominate the market by being the most used
              language on GitHub.
            </p>
            <div className="src">
              cc :{" "}
              <a
                target="_blank"
                rel="noopener"
                href="https://octoverse.github.com/"
              >
                octoverse.github.com
              </a>
            </div>
          </div>

          <div
            className="profile__card save__report"
            ref={card3ref}
            onClick={saveReport}
          >
            <h3>
              <SystemUpdateAltIcon /> Save Report
            </h3>
          </div>
        </div>
      </div>
    </section>
  );
}