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