
Akash Ranjan
Members-
Posts
27 -
Joined
-
Last visited
Akash Ranjan's Achievements
-
-
Rare
-
Rare
-
Rare
-
Rare
Recent Badges
4
Reputation
-
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
-
Akash Ranjan started following Scroll children on fixed pin parent and Target for scrolltrigger
-
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', }, }); }); }, []);
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
That is exactly what i was looking for thanks a lot @OSUblake.- 15 replies
-
- 1
-
-
- smooth video
- choppy
-
(and 1 more)
Tagged with:
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
Yes like a counter of some sort. counting from 0% to 100%- 15 replies
-
- smooth video
- choppy
-
(and 1 more)
Tagged with:
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
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.- 15 replies
-
- smooth video
- choppy
-
(and 1 more)
Tagged with:
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
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- 15 replies
-
- smooth video
- choppy
-
(and 1 more)
Tagged with:
-
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 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
Wow the last panel trick was really new thing for me. Thanks a ton @OSUblake
- 12 replies
-
- 1
-
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
No after the second slide ends there is almost 100vh of black emply space
- 12 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
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 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
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 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
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.
- 12 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
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
- 12 replies
-
- scrolltrigger
- pinning
-
(and 2 more)
Tagged with:
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
Thanks @OSUblake for the useful insight. You are awesome.- 15 replies
-
- 1
-
-
- smooth video
- choppy
-
(and 1 more)
Tagged with:
-
scrolltrigger Smoothly play video on scrolltrigger
Akash Ranjan replied to Akash Ranjan's topic in GSAP
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- 15 replies
-
- smooth video
- choppy
-
(and 1 more)
Tagged with: