[How can we draw an animated curved route line between 2 points on a 2d image, something very similar to github globe arc]

 

Curved line between 2 points, similar to github glob arc animation. I am working on react js for this animation.

[ScrollTigger animation firing on page load and not on reaching the trigger element]

https://codesandbox.io/s/strange-tharp-e59od3?file=/src/App.js

 

The background of header should change with the background color of the sections.

[ScrollTigger animation firing on page load and not on reaching the trigger element]

• 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;