Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Akash Ranjan

  • Posts

  • Joined

  • Last visited

Akash Ranjan's Achievements

  1. 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
  2. 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', }, }); }); }, []);
  3. That is exactly what i was looking for thanks a lot @OSUblake.
  4. Yes like a counter of some sort. counting from 0% to 100%
  5. 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.
  6. 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
  7. 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
  8. Wow the last panel trick was really new thing for me. Thanks a ton @OSUblake
  9. No after the second slide ends there is almost 100vh of black emply space
  10. 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
  11. 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
  12. 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.
  13. 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
  14. Thanks @OSUblake for the useful insight. You are awesome.
  15. 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