gsap#TimelineLite JavaScript Examples

/**
   * Generate all the "in" animations.
   * @return {TimelineLite}
   */
  setupTimeline() {
    const {transition} = this.props;
    const tl = new TimelineLite({paused: true});
    // Start the circle-masking animation
    tl.add(transition.start());
    // Toggle visibility of this element
    tl.from(this.root, 0.01, {opacity: 0});
    // Hide the circle-masking animation
    tl.add(() => transition.end());
    tl.add('text', '+=0.0');
    tl.add('buttons', '+=0.4');
    tl.add(() => this.props.dispatch(setFrozen(false)));
    return tl;
  }

Menu = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  let brandName = useRef(null);
  let pageLink1 = useRef(null);
  let pageLink2 = useRef(null);
  let pageLink3 = useRef(null);

  let tl = new TimelineLite();
  useEffect(() => {
    tl.from(brandName, 4, { x: -500, ease: Power3.easeOut }, 0)
      .from(pageLink1, 3, { x: 1000, ease: Power3.easeOut }, 0)
      .from(pageLink2, 3, { x: 1100, ease: Power3.easeOut }, 0)
      .from(pageLink3, 3, { x: 1200, ease: Power3.easeOut }, 0);
  });
  return (
    <Navbar light expand="md" className="background-blue sticky-top">
      <div className="container">
        <NavbarBrand href="/" style={{ fontWeight: "bold", color: "#eee" }}>
          <div ref={(el) => (brandName = el)}>
            <img src="/img/logowhite.png" alt="" style={{ width: "30px" }} />{" "}
            KJSCE CodeCell
          </div>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} style={{ background: "#666" }} />
        <Collapse
          isOpen={isOpen}
          navbar
          style={{
            justifyContent: "space-between",
          }}
        >
          <Nav className="ml-auto" navbar>
            <div ref={(el) => (pageLink1 = el)}>
              <NavItem className="mr-3">
                <Link to="/" className="links mr-2">
                  <HouseFill size={20} /> Home
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink2 = el)}>
              <NavItem className="mr-3">
                <Link to="/blog" className="links mr-2">
                  <Grid1x2Fill /> All Articles
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink3 = el)}>
              <NavItem>
                <Link to="/about" className="links">
                  <CodeSlash size={20} /> About
                </Link>
              </NavItem>
            </div>
          </Nav>
        </Collapse>
      </div>
    </Navbar>
  );
}

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 Cards({ data }) {
  let textContentHeader = useRef(null);
  let textContentDesc = useRef(null);
  let cardImage = useRef(null);
  let cardAnimation = useRef(null);
  let ribbonAnimation = useRef(null);

  let tl = new TimelineLite();
  let t2 = new TimelineLite();

  const max = 3;

  useEffect(() => {
    tl.from(textContentHeader, 2, {
      autoAlpha: "0",
      y: 200,
      delay: 1,
      scrollTrigger: { trigger: textContentDesc },
    })
      .from(textContentDesc, 3, {
        autoAlpha: "0",
        y: 100,
      })
      .from(ribbonAnimation, 0.5, {
        autoAlpha: "0",
        x: -50,
        ease: Power3.easeOut,
      });
    t2.from(cardAnimation, 2, { y: 500, ease: Power3.easeOut }, 0.2);
    gsap.from(
      cardImage,
      3,
      {
        filter: "grayscale(100%)",
        // autoAlpha: "0",
        scale: 0.95,
        delay: 1,
      },
      0
    );
  });
  return (
    <Container>
      {data.edges
        .filter((e) => e.node.frontmatter.featuredpost === true)
        .map((e) => (
          <div
            className="featured-card"
            style={{
              margin: "1em 0",
            }}
            ref={(el) => (cardAnimation = el)}
          >
            <div className="featured-card-grid">
              <div className="featured-content">
                <div className="overlay-ribbon">
                  <span className="ribbon" ref={(el) => (ribbonAnimation = el)}>
                    Featured
                  </span>
                </div>
                <h1 ref={(el) => (textContentHeader = el)} className="mt-1">
                  <a href={e.node.fields.slug}>{e.node.frontmatter.title}</a>
                </h1>
                <div ref={(el) => (textContentDesc = el)} className="trigger">
                  {/* Badges for tags */}
                  <div className="tags mb-2">
                    {e.node.frontmatter.tags.map((tag, index) => {
                      if (index < max) {
                        return (
                          <span
                            className="badge badge-pill badge-success mr-2"
                            style={{ fontSize: "0.8em" }}
                          >
                            {tag}
                          </span>
                        );
                      } else {
                        return <span></span>;
                      }
                    })}
                  </div>
                  <p>{e.node.frontmatter.description}</p>
                  <p>{e.node.frontmatter.author}</p>
                </div>
              </div>
              <div
                className="featured-image-holder"
                ref={(el) => (cardImage = el)}
              >
                <img
                  src={"/img/" + e.node.frontmatter.featuredimage.relativePath}
                  alt={e.node.frontmatter.title}
                />
              </div>
            </div>
          </div>
        ))}
    </Container>
  );
}

Jumbotron = () => {
  let titleName = useRef(null);
  let tagLine = useRef(null);

  let tl = new TimelineLite();

  useEffect(() => {
    tl.from(titleName, 1.2, {
      y: -1280,
      ease: Power3.easeOut,
    })
      .from(titleName, 2.5, { scale: 1.8, ease: Power3.easeOut }, 0.2)
      .from(tagLine, 2, { opacity: "0", ease: Power3.easeIn }, 0.2);
  });
  return (
    <Fragment>
      <section className="section-home">
        <Particles
          style={{ height: "100vh" }}
          params={{
            particles: {
              number: {
                value: 180,
                density: {
                  enable: false,
                },
              },
              size: {
                value: 3.5,
                random: true,
                anim: {
                  speed: 4,
                  size_min: 0.3,
                },
              },
              line_linked: {
                enable: false,
              },
              move: {
                random: true,
                speed: 1,
                direction: "top",
                out_mode: "out",
              },
            },
            interactivity: {
              events: {
                onhover: {
                  enable: true,
                  mode: "bubble",
                },
              },
              modes: {
                bubble: {
                  distance: 250,
                  duration: 2,
                  size: 0,
                  opacity: 0,
                },
                repulse: {
                  distance: 400,
                  duration: 4,
                },
              },
            },
          }}
        />
        <div className="box">
          <div className="d-none d-md-block">
            <h1
              style={{ lineHeight: 0.9 }}
              className="white"
              ref={(el) => (titleName = el)}
            >
              <span
                style={{ fontSize: "1.2em", textShadow: "3px 2px #777" }}
                className="d-block m-0"
              >
                KJSCE
              </span>
              <span style={{ fontSize: "3em", textShadow: "4px 3px #777" }}>
                CodeCell
              </span>
            </h1>
            <h3
              align="center"
              className="white"
              ref={(el) => (tagLine = el)}
              style={{ textShadow: "1px 2px #777", marginTop: "1em" }}
            >
              Changing the world, one bit at a time
            </h3>
          </div>
          <div className="d-block d-md-none">
            <div className="row row-header align-items-center">
              <div
                className="col-12 white"
                style={{ textShadow: "3px 2px #777" }}
              >
                <h1
                  align="center"
                  style={{ textShadow: "3px 3px #777", fontSize: "2.8rem" }}
                >
                  KJSCE CodeCell
                </h1>
                <h4 align="center" className="pt-2">
                  Changing the World
                </h4>
                <h4 align="center"> One bit at a time.</h4>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Fragment>
  );
}