Akash Ranjan

Hey @Rodrigo, Thanks for your reply. I tried useGSAP hook but still I am having the same problem. It is working on my codepen but not in my project. It is a strange issue as if I dont put the elements in separate components and keep the code as it is on the page with both the useGSAP hooks it works. But if I make components for both of them the second one breaks. The problem is the second pin scrolltrigger start point is off from the amount of pinspacing from the first element. I tried removing pin from first element and second element started working fine. I dont know what is causing this issue. Please help useGSAP( () => { const mm = gsap.matchMedia(); mm.add( { small: '(max-width: 767px)', large: '(min-width: 768px)', }, (ctx) => { const { small } = ctx.conditions; let serviceSection = document.querySelector('.service-block'); gsap.to('.service-block', { x: () => serviceSection.scrollWidth * -1, xPercent: 100, scrollTrigger: { trigger: '.service-block', start: '0% 20%', end: '+=2000px 10%', pin: serviceWrapper.current, scrub: 0.5, // invalidateOnRefresh: true, // markers: true, }, }); } ); }, { scope: homeMain, } ); // component import React, { useEffect, useRef } from 'react'; import Heading from '../Heading/Heading'; import FeaturedWork from '../FeaturedWork/FeaturedWork'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import { useGSAP } from '@gsap/react'; const workContent = [ { projectName: 'NextGen Marketplace', projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT', projectUrl: '/', }, { projectName: 'NextGen Marketplace', projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT', projectUrl: '/', }, { projectName: 'NextGen Marketplace', projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT', projectUrl: '/', }, { projectName: 'NextGen Marketplace', projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT', projectUrl: '/', }, { projectName: 'NextGen Marketplace', projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT', projectUrl: '/', }, ]; gsap.registerPlugin(ScrollTrigger); const SelectedWorkSection = ({ className }) => { const workWrapper = useRef(); const main = useRef(); useGSAP( () => { const mm = gsap.matchMedia(); mm.add( { small: '(max-width: 767px)', large: '(min-width: 768px)', }, (ctx) => { const { small } = ctx.conditions; let workSection = document.querySelector('.work-block'); gsap.to('.work-block', { x: () => workSection.scrollWidth * -1, xPercent: 100, scrollTrigger: { trigger: '.work-block', start: 'center center', start: '0% 20%', end: '+=2000px 10%', pin: workWrapper.current, scrub: 0.5, invalidateOnRefresh: true, markers: true, }, }); } ); }, { scope: main, } ); return ( <section ref={main} className={`section-pad overflow-hidden ${className}`}> <div className="container"> <Heading className="mb-12 " icon> Selected Work </Heading> </div> <div className=" "> <div className="container"> <div className="work-wrapper-main " ref={workWrapper}> <div className="work-wrapper"> <div className={`flex h-full work-block flex-wrap md:flex-nowrap gap-8 md:gap-0`} > {workContent.map( ({ projectName, projectType, projectUrl }, index) => ( <div key={index} className="md:min-w-[50%] md:px-4 "> <FeaturedWork initialText={`0${index + 1}`} projectName={projectName} projectType={projectType} projectLink={projectUrl} /> </div> ) )} </div> </div> </div> </div> </div> </section> ); }; export default SelectedWorkSection;

Hello, I am stuck into a weird problem. I am working in next JS and I have two components that have the identical animations. The problem is that the pin of first element is causing the pin of second element to break as you can see on codepen. Can you please tell me what I am doing wrong here. This is the code I am using inside both the components. Selectors are different for both of them. Please help me useEffect(() => { if (window.innerWidth > 767) { let ctx = gsap.context(() => { let serviceSection = document.querySelector('.service-block'); gsap.to('.service-block', { x: () => serviceSection.scrollWidth * -1, xPercent: 100, scrollTrigger: { trigger: '.service-block', start: '0% 20%', end: '+=2000px 10%', pin: serviceWrapper.current, scrub: 0.5, invalidateOnRefresh: true, // markers: true, }, }); }, serviceWrapper.current); return () => ctx.revert(); } }, []); Thank You

I am really feeling dumb right now. Thanks alot for your help

Hey Guys, I am trying to create a custom cursor with gsap. My site is horizontal scroll based as you can see in the codepen demo. The problem is whenever I am scrolling the cursor also moves up. How can i stop this from happening and make it behave just like a normal cursor. I am working in Next JS with the cursor being a separate component. Please help me. Thanks alot

Thanks alot. This is exactly what i was looking for

Hey, The effect I am trying to achieve is when the next image start revealing on scroll it should fade in from 0 - 1. Thanks

Hey Guys, I am trying to build an animation where the children elements have position sticky with bottom:0 set. I want to add autoAlpha on each child as they scroll down and settle on their respective places. I have created a minimal pen for it on what I have tried. I also tried gsap.utils to array method but it still not work. Can you please help me. If there is any way that I can achieve this effect without using position sticky that too I can consider. Thanks alot

Hi, I am trying to achieve the effect using GSAP physics plugin in which the objects fall from the sky and collect on the ground and does not stack on each other instead they collide. Please help me

Hi @Rodrigo, This is exactly what i was looking for. Thanks alot for this. The only problem is what if I need multiple stops?

Yes I understand that the animation is key but the problem I am facing is that I don't want all the panels to stick while their inner animations are playing. I want a smooth horizontal scroll with stops only at panels which I want. Currently the entire panel 2 sticks while the inner content animations are playing. At the start I took refernce from this codepen provided by @Cassie in another post. https://codepen.io/GreenSock/pen/poLpxyN

Hey, This is what I tried. https://codepen.io/akashrwx/pen/wvQjoYG I am using multiple scroll trigger to have a more precise control on start and end points as I have many animations between the panels

I tried to add it to the timeline but i want the animation to go on as the previous animation is running. For example when the first 2 slides are moving i want the box in the second slide to move to with them. But in my case it is working after the panel animation is completed

Hey @mvaneijgen, Thanks a lot for the reply. Sorry I was unable to provide forked codepen as I was experimenting in my VScode only. I created this simple demo just for this forum. I tried the above solution but there are many animations inside those sections which animate as i scroll. I used containerAnimation for that but after implementing this solution the animations have stopped working gsap.to('.v-text-1', { yPercent: -50, duration: 2, ease: 'linear', scrollTrigger: { trigger: '.vertical-text-wrapper', containerAnimation: scrollTween, start: '60% 100%', end: '140% 0%', markers: true, scrub: 0.5, id: '1', }, }) Can you please help me with this https://codepen.io/akashrwx/pen/bGQMwaz

Hi, I am building a website with horizontal scroll. I have a requirement to stick one section and scroll to bottom which has content more than the viewport height (Grey section in the example codepen). I tried a few ways but it is not working as expected. Please help me. Thank you

I really feel stupid after finding this solution. Thanks alot for the help Jack

Here is the codepen demo but I am unable to replicate this issue in codepen because codepen always refreshes from the top of the page. My issue comes when the page refresh from the middle of the web page. https://codepen.io/akashrwx/pen/gOBJQLB I can show the issue in a video though https://drive.google.com/file/d/1YXcZN7psGlehMvishH5_RaxUtmceS4V4/view?usp=sharing As you can see the LASER text animates on page load and goes down after scroll. But after we reach the mid of the web page and refresh the page and if the browser keeps the user at the same point and then we scroll up the LASER text stays there and hides and never shows again.

Hi, I am trying to do animation on one element with gsap.fromTo and then later control that animation in a timeline with scrollTrigger. But the issue is that whenever I refresh the page and the page refreshes and show the content from middle on the webpage then the gsap.fromTo animation runs which it should not. Below is my code for better understanding. As you can see If the page reloads from middle then the .h1-text should not be visible if we scroll up but it is showing because of that gsap.fromTo animation. Please help me in fixing the issue gsap.fromTo( '.h1-text', { autoAlpha: 0, yPercent: 100, }, { autoAlpha: 1, yPercent: 0, duration: 1, ease: 'power2.out', } ) let LaserHeroTl = gsap.timeline({ ease: 'power2.out', scrollTrigger: { trigger: laserHeroContainer.current, // markers: true, start: '10% 25%', end: '75% 10%', scrub: 0.6, }, }) LaserHeroTl.fromTo( '.satelite-1', { transform: 'rotate3d(1, 1, 1, 15deg)', }, { transform: 'rotate3d(1, 1, 1, -10deg)', duration: 1, ease: 'power2.out', } ) .to( '.h1-text', { yPercent: 100, opacity: 0, duration: 0.4, ease: 'power2.out', }, '-=0.4' ) Thanks

Thanks alot @Cassie for the help. I used timeline and it is working fine. You are awesome

Yes it is working but partially. I have updated the same codepen. The issue is I am using 2 fromTo tween on same element. One for making it appear and another for making it disappear after a while. https://codepen.io/akashrwx/pen/NWOaPeG But the problem is that the text is visible on first scroll which I don't want.

Hi @Cassie, Thanks alot for pointing out the issue. I have update all of them to a fromTo tween and added toggle actions so that they play again when entering back. Do you have any suggestions how I can improve this? gsap.fromTo( weakRouterWordsTwo, { autoAlpha: 0, y: 90, }, { duration: 0.5, autoAlpha: 1, y: 0, ease: 'power2.out', stagger: 0.1, scrollTrigger: { trigger: weakRouterSection.current, // markers: true, start: '18% 30%', end: '25% 25%', toggleActions: 'play none reverse none', }, } ) gsap.fromTo( weakRouterWordsTwo, { opacity: 1, y: 0, }, { duration: 0.5, opacity: 0, y: -90, ease: 'power2.out', stagger: 0.1, scrollTrigger: { trigger: weakRouterSection.current, // markers: true, start: '40% 30%', end: '45% 25%', toggleActions: 'play none reverse none', }, } )

Hi, I am trying to animate multiple split text animations in a timeline with scrollTrigger. But it is not working as expected. The text appears instantly without animating. The animation works fine when adding scrub property though. Please help me. Thanks

Thanks @Cassie this worked fine. I tried many ways but did not know that I can do it this way also. Many thanks

Hi, I am trying to achieve an effect where the font size increases as the animation progresses (like just what scrub do) and decreases as the font size of next element increases. But i am unable to achieve this effect with SCRUB property. I tried many methods but i am not sure how to achieve it. Can you guys please help me. Thanks alot.

Thanks for the insight @alig01. Just one confusion though. So suppose if I put everything in a timeline like you mentioned should I add delay if I want that element to stay a little longer once it has appeared because currently I am using different scrolltrigger values to trigger the animation. Thanks

Hello, I want to animate single element multiple times with scrollTrigger. I am using fromTo method everytime I animate. I want to know if this is the right way to do so or there is a better way to do this. Please see codepen for reference Thanks alot