Jump to content
GreenSock

RGR

Members
  • Posts

    4
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

RGR's Achievements

  1. Curved line between 2 points, similar to github glob arc animation. I am working on react js for this animation.
  2. https://codesandbox.io/s/strange-tharp-e59od3?file=/src/App.js The background of header should change with the background color of the sections.
  3. import React, { useState, useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import LandingHeader from "../../components/LandingPageComp/LandingHeader/LandingHeader.jsx"; import * as S from "./LandingPage.style.js"; const LandingPage = () => { const mainRef = useRef(); const headerRef = useRef(); const greySec = useRef(); const ANIMATION_TIME = 1.5; const ANIMATION_TYPE = "ease-in-out"; const PAGE_DELAY = 0; const SETIMEOUT_DELAY = 3000; useEffect(() => { mainRef.current.focus(); mainRef.current.style.height = `${window.innerHeight}px`; gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ toggleActions: "play none restart reset", start: "top center", end: "bottom center", }); setTimeout(() => { gsap.to(headerRef.current, { scrollTrigger: { trigger: greySec.current, markers: true, start: "top center" }, background: '#fff', color: '#000', duration: 0, }); }, SETIMEOUT_DELAY); }, []); return ( <React.Fragment> <div ref={mainRef} tabIndex={1}> <LandingHeader headerRef={headerRef} /> <S.LandingGreySec ref={greySec}> </S.LandingGreySec> </div> </React.Fragment> ); }; export default LandingPage;
×