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.

@mvaneijgen I don't have club membership, is there any way we can achieve it with other plugins? Thanks for your response.

Hello my Wonderful Community, I have created some pages with GSAP scroll trigger animations, but now I want to add smooth scrolling, whatever packages I found are creating fake scroll due to which my scroll trigger animations are not triggered. Is there any package or solution to solve it?

Thank you very much for helping @akapowl

@mvaneijgen, Thank you very much I will take care of the points you mentioned and will practice it. Thanks again.

Hello @mvaneijgen, thanks for your response. the above examples are very good, however those doesn't look page scroll effect but overlapping of a section one over another. That is why I gave the last pen in which it actually looks like proper scroll of sections. Hope you understand my project's requirement. Please let me know if I can do it in your pen example as well.

Hey @mvaneijgen, here is what I have done using another pen. There are some issues like in initial section it is not fully scrolling to the next section's height (not scrolling 100vh). another issue is in the horizontal scroll it shows some glitchy transition (like while scrolling to second slide the first slide appears in a glitchy flash on the second slide and vice versa). and also is there any option to manage the speed of scroll? Thanks a lot again. https://codepen.io/EmpChirag/pen/ZEPWYoV

Hi @mvaneijgen, thank you very much for your response. I have one request can you modify that pen with 2 horizontal sections and some vertical sections on scroll, because I am new in GSAP and find some difficulties in understanding the combining of the code. Thanks again.

Hello, wonderful community. I am working on a project where I need scroll snapping but it has horizontal scroll and vertical scroll both, I got example of horizontal scroll with snapping to next section but I am not able to do it altogether. In this codepen only horizontal snapping is working. I need scroll snap work for whole page includes horizontal sections and vertical sections both. Help is appreciated always 😊

Okay Fine @GreenSock, I am using the helper function and I was thinking that if the above logic works than it will save a lot line of code that was the only reason but no problem if it doesn't work I will use the helper function. thanks a lot.

@GSAP Helper, Thanks I will take care of it. Sorry. Here is my simple question with the below snippet how can I do infinite loop horizontal and vertical both by using above logic. when I tried using the same it didn't work. sorry if I have broke any guidelines. I am new here. https://codepen.io/EmpChirag/pen/wvOBoPG