codechirag

const tl = gsap.timeline({ scrollTrigger: { trigger: ".theApp", pin: true, pinSpacer: false, markers: true, start: "top top", // end: "bottom top", scrub: true, }, }); const app = gsap.utils.toArray(".app"); tl.to(app, { y: "0%", opacity: 1, scale: 1, ease: "back.inOut(4)", stagger: 1, duration: 0.5 }) .to({}, {}, "+=1") .to(".app1", { delay: 1, duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: 155, scale: 0.5, opacity: 1 }) .to( ".app2", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: 50, scale: 0.5, // opacity: 0 }, "<" ) .to( ".app3", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: -50, scale: 0.5, // opacity: 0 }, "<" ) .to( ".app4", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: -150, scale: 0.5, // opacity: 0 }, "<" ).to('.app img + div', {opacity: 0},"<") Hello wonderful community, Thanks for always being helpful. I have made one animation using scrollTrigger while pinning the section it is not working properly. If I enable markers and then check it works very smoothly but without markers the pin is not working properly the section gets pinned before the start point. Here I am sending the video link , I will be very much thankful for your help. Here I am also attaching GSAP code.

Hello my wonderful community, https://paretoweb.empyrealinfotech.net/ this is my website where I have used split-type with gsap animation my concern is that on very first load of the page animation except hero section doesn't work. and once we refresh the page all animations work fine. I don't understand why it that happening it is not throwing any error either. Need your help. useGSAP(() => { const animText = gsap.utils.toArray("h1"); animText.forEach((box) => { const splith1 = new SplitType(box, { types: "words, chars,lines" }); gsap.from(splith1.chars, { display: "none", stagger: 0.05 }); }); const animH2 = gsap.utils.toArray("h2"); animH2.forEach((box) => { const splith2 = new SplitType(box, { types: "words, chars,lines" }); gsap.from(splith2.chars, { display: "none", stagger: 0.05, scrollTrigger: { trigger: box, start: "top center" } }); }); });

Hey @Rodrigo, Thanks a lot I understood it and working fine now by the above method.

thanks alot @mvaneijgen, your solution is correct but when I use it in my react project it is jerking when I add repeat: -1 and also when I just make a codeblitz snippet only for this section it worked fine. please look at this loom video , I will be very much thankful to you if you can correct me. here I am sharing my project fork in stackblitz. you can find that effect at the very bottom of the page.

I was looking for marquee on scroll direction change example and thanks to this wonderful community I got it, I saw many threads for similar thing and one of them worked for me but I have little difference in my example, I have used helper function to make infinite and also for two opposite direction simultaneously. In my snippet the directions are working fine but it stops after sometimes and also at some points I found initially both were going in one direction. I request corrections from experts. Thanks a lot.

Thanks guys for your response. 🙏

Hello wonderful community, recently I found one attractive canvas effect, Can you help me if we can make it using GSAP. URL : https://www.joebentaylor.co.uk/ Note: check the face movement on cursor.

I got solution the animation of type writer text was occurring issue it needed will-change property also. Now it is working fine. Thanks everyone for your efforts.

I have tested removing blur but still same and also I have tested in 3-4 devices iphone 13pro max, iphone 14pro max, iphone xr, iphone 11 etc.. Don't find any clue. I have added that also but still the flickering issue is there.

Yes, I think mvaneijgen is right, you should use timeline mostly.

Hi @GreenSock, thanks for your response and sorry for improper explanation. I have removed unnecessary things as you said and I have shared a video link of the hero section flickering animation in iPhone 13 pro max. here is the link https://demo.solusent.com/ here is the video of flickering https://jmp.sh/6HXxxOgj and I have refined the gsap code here. https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx

please check this url which has exact animation there which I have shown in video, https://demo.solusent.com/

Here is the stackbiz editable link https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx I have sent you my project link in message. Here is the video link of the exact problem. https://jmp.sh/6HXxxOgj

I have used gsap time line in my project but It is not working proper in Iphone only, rest works proper in android and desktop. need help. https://stackblitz-starters-kunktk.stackblitz.io

hahaha! sorry for that but I am not able to get membership right now. Thanks again.