asyncasad

"use client"; import { useEffect, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import _ScrollTrigger from "gsap/ScrollTrigger"; export default function Home() { const el = useRef(); const tl = useRef(); const main = useRef(); useLayoutEffect(() => { gsap.registerPlugin(_ScrollTrigger); const ctx = gsap.context(() => { tl.current = gsap .timeline({ scrollTrigger: { trigger: ".main", start: "top top", scrub: true, pin: true, end: "100%", }, }) .to(".box", { rotate: 360, }) .to(".circle", { translateX: 1000, }); }, el); return () => ctx.revert(); }, []); return ( <div className="app" ref={el}> <div className="main h-screen flex justify-center items-center"> <div className="box w-5 h-5 bg-blue-500"></div> <div className="circle w-5 h-5 rounded-full bg-red-500"></div> </div> <div className="border-2 border-pink-500 h-60"></div> <div className="border-2 border-red-500 h-60 bello"></div> </div> ); } This is my Next.js code snippet. Here I want the second animation to happen after the first animation. In the second animation the circle should translateX to value of 1000 in the duration of 15s. During this time the person should not be able to scroll as what happens during the rotation of the box. i.e the backtground should be fixed. Now when the 15s is over then it should scroll like normal page. Note that the translate property doesnot depend on scrub and is an individual animation.