Jump to content
GreenSock

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

Akash Ranjan

Members

  • Posts

    27

  • Joined

  • Last visited

Akash Ranjan's Achievements

  • One Year In
  • Collaborator Rare
  • Reacting Well Rare
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

4

Reputation

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