Akash Ranjan

Thanks alot for these docs. I followed it and put the timelines inside the hooks and also added separate timelines for all the scroll triggers and they are working fine now. The only suggestion I want is that, is it okay to use multiple timelines in single useEffect? Thanks a lot for the help tough.

Hi OsuBlake, Thanks for the reply. Unfortunately I am unable to replicate the issue in minimal sandbox so I have cloned the project and removed extra elements. You can see the issue when you scroll down halfway and click on the button on the navbar then go back up the 3 cards in hero disappear instantly on scroll down and sometime the images that are appearing from the back of the video also stops working. https://codesandbox.io/s/laughing-surf-vt759?file=/src/pages/index.jsx Please help me. Thanks

Hi, I am stuck in a weird situation and I am unable to find any solution for this. Basically my elements which are controlled by scrolltrigger start to behave differently when any other items changes states. For example on this site https://cliphire-recruit.web.app/ when you click on JOIN WAITLIST on the navbar after scrolling a bit the cards in the hero area will start to get glitch. All I am doing is for the join waitlist popup is change state which adds a class in it. It was happening with other element states too so I moved them to separate component but I cant move this one. GSAP Code for cards useLayoutEffect(() => { tl.to(heroCardOne.current, { scrollTrigger: { trigger: heroContainer.current, start: 'top 0%', end: '80% 0%', scrub: true, // markers: true, }, x: '200%', y: '400%', autoAlpha: 0, scale: 0.8, rotateZ: 20, duration: 2, ease: 'power2.out', }).to(heroCardTwo.current, { scrollTrigger: { trigger: heroContainer.current, start: 'top 0%', end: '70% 0%', scrub: true, // markers: true, }, x: '200%', y: '400%', scale: 0.8, autoAlpha: 0, rotateZ: 20, duration: 2, ease: 'power2.out', }); .to(heroCardThree.current, { scrollTrigger: { trigger: heroContainer.current, start: 'top 0%', end: '75% 0%', scrub: true, // markers: true, }, x: '-200%', y: '400%', scale: 0.8, autoAlpha: 0, rotateZ: -20, duration: 2, ease: 'power2.out', }); }, [tl]); And this is the code for popup const [openModal, setOpenModal] = useState(false); const openModalToggle = useCallback(() => { setOpenModal((state) => !state); }, []); Please help me I am STUCK

Hello Cassie, Thanks a lot for the help. This worked. The only issue I am seeing is that the images are not aligned to path when i load the page but when I refresh they appear correctly. The same this I am noticing with the pen you shared. Can you please help me with that. Thanks

Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks

Thanks you so much Rodrigo. This worked perfectly fine. Although I am facing a strange issue only on my local machine, i.e the start and end points of the elements does not seem to be at correct position at page load but if I resize my browser window or open browser's inspector they jump to their correct positions. This is not happening on live server that's why I am unable to replicate this. Do you have any idea why this is happening. I think it is something to do with useEffect or react

Hi, I tried creating my first codesandbox thanks to you I figured out how to do it. https://codesandbox.io/s/test-gsap-template-mb6ns?file=/src/App.js I hope this will help you solve my issue

Hello Rodrigo, Thanks alot for the reply. I tried creating a codesandbox but it is giving me error dont know why. However I have created this public repo in github. https://github.com/akashrwx/testbulls Please see if this help. ☺️

Hello Guys, I am a newbie to this awesome scrolltrigger plugin. I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. You can check live example here: https://algobulls.netlify.app/ecosystem-2/ Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me out. I will really appreciate it. const sectionFirst = useRef() const mainIllustrationContainer = useRef() const firstHeading = useRef() const ecoCore = useRef() const ecoMarkets = useRef() const ecoOms = useRef() const ecoBrokers = useRef() const ecoclients = useRef() const ecoStrategist = useRef() const ecoChannelPartner = useRef() const ecoDataVendor = useRef() const videoBlock = useRef() const sectionSecond = useRef() const sectionThird = useRef() const sectionFourth = useRef() useEffect(() => { let tl = new TimelineMax() tl.fromTo( ecoCore.current, { autoAlpha: 0, }, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 300", end: "center 100", scrub: true, //markers: true, }, //y: 450, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( firstHeading.current, { autoAlpha: 0, y: 0, }, { scrollTrigger: { trigger: sectionFirst.current, start: "600 300", end: "800 150", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, autoAlpha: 1, y: -100, ease: "power2.out", } ) .to(firstHeading.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "80% 300", end: "90% 100", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 1, scale: 0, ease: "power2.out", }) .to(sectionFirst.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 0", endTrigger: videoBlock.current, end: "center center", // markers: true, pin: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, ease: "power2.out", }) tl.fromTo(sectionFirst.current, { scale:1, x: 0, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top-=400 300", end: "200 200", markers: true, scrub: true, }, scale: 0.53, x: -290, duration: 3, ease: "power2.out", }) // this is the one which makes it scale 1 ///////// .to(sectionFirst.current, { scrollTrigger: { trigger: "#data-vendor", start: "bottom+=150 300", end: "bottom+=250 150", // markers: true, scrub: true, }, scale: 1, x: 0, duration: 3, ease: "power2.out", }) tl.fromTo( ecoMarkets.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top 400", end: "200 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoOms.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionThird.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoBrokers.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionFourth.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoclients.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#clients", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoStrategist.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#pro-strategist", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoChannelPartner.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#channel-partner", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoDataVendor.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#data-vendor", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( '#eco-video', { autoAlpha: 0, }, { scrollTrigger: { trigger: "#data-vendor", start: "bottom 200", end: "bottom+=200 100", // markers: true, scrub: true, }, duration: 2, autoAlpha: 1, ease: "power2.out", } ) }, [])