Jump to content
Search Community

Akash Ranjan

Members

  • Posts

    56

  • Joined

  • Last visited

 Content Type 

Everything posted by Akash Ranjan

1
2
3
Page 2 of 3  
  1. Akash Ranjan
    Hello, I was working with self.progress in scrollTrigger to change the state whenever a certain progress is reached. Please see the below code useEffect(() => { tl.current = gsap.timeline().to(doputMain.current, { scrollTrigger: { start: "0 0%", end: "100% 100%", trigger: doputMain.current, scrub: 0.5, // markers: true, onUpdate: (self) => { if (self.progress > 0 && self.progress < 0.2) { setdoputText(0); } if (self.progress > 0.2 && self.progress < 0.4) { setdoputText(1); } if (self.progress > 0.4 && self.progress < 0.6) { setdoputText(2); } if (self.progress > 0.6 && self.progress < 0.8) { setdoputText(3); } if (self.progress > 0.8 && self.progress <= 1) { setdoputText(4); } } } }); }, []); I was wondering if there is any way to make it dynamic so that no matter how many elements are there in the state it automatically divides the progress equally to them. For example currently my code has 5 elements so the progress is divided by 20% but if the number increase to 6 then I don't have to add one more line and change everything again. Here is a sandbox for DEMO https://codesandbox.io/s/suspicious-poincare-xc5jc5?file=/src/App.js Thanks a lot
  2. Akash Ranjan
    Thanks a lot @Cassie you are a life saver. I was thinking that there are multiple elements with same name so I have to loop them. Thanks a ton again
  3. Akash Ranjan
    Thanks alot @GreenSock, This is exactly what I was looking for. Also I am facing a similar issue in this codepen where I have stacked three layers on one another and sticking them with position sticky. I am applying css clip path to reveal them one by one but all of them are working together. Can you let me know how I will enable animation after the previous one is finished with slight parallax effect. https://codepen.io/akashrwx/pen/mdLWvve Thanks alot
  4. Akash Ranjan
    Hi, I want to achieve random stagger effect with scrollTrigger batch function. To be more clear as seen in the codepen there are 5 boxes which are appearing one after another I want to achieve an effect where boxes appear randomly like (2,4,1,3,5). Please help me. Thanks alot
  5. Akash Ranjan
    Hi @Cassie, Thanks for this I figured this out after posting in the forum ?‍♂️. Although I am struggling to keep the last class added in the target. For example if the last element passes from its view port its class also gets removed but i want that last class to stay. Can you please help me with that. Thanks again
  6. Akash Ranjan
    Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property ?. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);
  7. Akash Ranjan
    That is exactly what i was looking for thanks a lot @OSUblake.
  8. Akash Ranjan
    Yes like a counter of some sort. counting from 0% to 100%
  9. Akash Ranjan
    Hi @OSUblake, By preloading i mean loading all the frames then playing the animation as currently there is a stutter between frames as it looks like some frames are not loaded.
  10. Akash Ranjan
    Hi @OSUblake, Can you help me with preloading the image sequence in the canvas. I have searched everywhere but i am unable to find any solution. This is the same code I am using for my animation. The issue is that my images are around 7mb in total. https://codepen.io/GreenSock/pen/MWOpwBa Thanks
  11. Akash Ranjan
    Hey @OSUblake, I just noticed one small bug. It is something I always fall prey off. So the scroll trigger start points move out of place on page load which I found i due to fonts. So basically the browser loads fonts little later which changes the height of viewport. Can you tell me how I can reload the scrolltrigger positions once the page is completely loaded
  12. Akash Ranjan
    Wow the last panel trick was really new thing for me. Thanks a ton @OSUblake
  13. Akash Ranjan
    No after the second slide ends there is almost 100vh of black emply space
  14. Akash Ranjan
    Hey @OSUblake, Thanks a lot for this demo. You are a savior. This solved my problem. https://codesandbox.io/s/fervent-pare-ptxt4?file=/src/App.js The only problem is that I have a bit of extra empty space after the animation. How can I remove it. Thanks again
  15. Akash Ranjan
    Hi @OSUblake, I tried using creating that using animations first but don't know why i am unable to layer scroll the second section and then pin it. https://codesandbox.io/s/fervent-pare-ptxt4?file=/src/App.js I have created a minimal demo for this. Everything i working fine except I want the last text to not go up and the second section to scroll up as layer and then pin in place. Please Please help me Thanks
  16. Akash Ranjan
    Hi @OSUblake, Sorry for the confusing question. Let me try to simplify it. There are 2 sections with same class and interaction. ( <div class="phone-text-scroll-block">). So first I want the first section to be pinned and the text contents (On the right side of phone image) to scroll. Then the second section will scroll up like a layered pin section as shown in this demo (https://codepen.io/GreenSock/pen/BaowPwo) and the same text section animation happens like first section.
  17. Akash Ranjan
    Hi, I am trying to scroll the contents in the text-block while pinning the parent. But as you can see in this demo the scroll is taking children of both the parent divs. I want it like once the first section i.e {.phone-text-scroll-block} has finished scrolling the other {phone-text-scroll-block} should come as a pinned layer Like this example and then the same animation repeats as the first one. Please help me. Thanks
  18. Akash Ranjan
    Thanks @OSUblake for the useful insight. You are awesome.
  19. Akash Ranjan
    Hey @OSUblake, Can you also please tell me what is the best approach for tweening single element multiple times. For example I want a sticky card to show when in view but then hide it after the card reaches the next section. I tired below method but it does not work. Can you please help me here useEffect(() => { tl.current = gsap.timeline().from(section1Asset1.current, { scrollTrigger: { trigger: section1.current, start: 'top 50%', end: '30% 40%', scrub: true, // markers: true, }, autoAlpha: 0, x: '80%', duration: 1, ease: 'power2.out', }); tl.current = gsap.timeline().to(section1Asset1.current, { scrollTrigger: { trigger: section1.current, start: '60% 50%', end: '80% 40%', scrub: true, markers: true, }, autoAlpha: 0, scale: 0, duration: 1, ease: 'power2.out', }); }, [tl]); Thanks
  20. Akash Ranjan
    Hey @OSUblake, Thanks a lot for the help. Really appreciate this.
  21. Akash Ranjan
    Hey, Thanks for the response. @OSUblake I tried and implemented the image sequence on my code, but stuck in one error that is frame number. So what I am trying to achieve is that once user reaches certain frame a class will be added to the content div. But I am unable to fetch the current frame number. Can you help me here please. Thanks alot for the help
  22. Akash Ranjan
    Hello guys, I am stuck in a really bad situation and cant find a solution of it. So what I am trying to achieve is that I want to play a video smoothly on scrollTrigger scrub but that is not happening. The video is playing very choppily. I have a created a minimal codesandbox for you guys to have a look https://codesandbox.io/s/gracious-sunset-0xsvr?file=/src/pages/index.jsx Please help me as I am stuck on this for 2 days Thanks
  23. 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.
  24. Akash Ranjan
    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
  25. Akash Ranjan
    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
1
2
3
Page 2 of 3  
×
×
  • Create New...