codechirag

May 27

hi @mvaneijgen, thanks for quick reply. You are right my mistake. It is working fine now. Thanks a lot again.

May 27

Hello GSAP Family, It's always pleasant working with GSAP and today while doing so I have got an issue with scrollTrigger snap. I was working with functionality for which Snap is required and I have tried to add it but while I scroll down the snap goes back to previous section and not moving forward. Here is the pen. Please help me guys.

See the Pen ExzNVgz by EmpChirag (@EmpChirag) on CodePen

April 19

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.

March 27

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"
        }
      });
    });
  });

February 21

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

February 20

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.

February 20

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.

See the Pen jOJRywp by EmpChirag (@EmpChirag) on CodePen

February 1

Thanks guys for your response. 🙏

January 31

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.

January 26

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.

January 26

7 hours ago, GreenSock said:

Did you try removing the blur filter just to see if that resolves things? My suspicion is that your phone is just really struggling to render that blur filter (totally unrelated to GSAP).

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.

16 hours ago, Rodrigo said:

Hi,

I just tested on my iPad again and I'm not seeing any issues neither on Chrome nor Safari.

The one thing I could suggest is to add will-change: transform to the elements that are moving:

I have added that also but still the flickering issue is there.

January 25

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

January 25

10 hours ago, GreenSock said:

If you want help, @codechirag, please be very specific about what EXACTLY you mean by "It is not working proper". I have no idea what you mean, sorry. The video didn't help much.

Also,

Why are you creating multiple gsap.matchMedia() objects? You only need one.

Did you realize you've got an overlap of 1 pixel on your queries? max-width: 1024px and min-width: 1024px would BOTH match when the viewport is 1024px.

Why are you animating from display: "none"?

As mentioned earlier, be very careful about filter: 'blur(200px)' - browsers have a very hard time rendering blurs, especially extreme ones like that.

You cannot set an ease on a timeline. Perhaps you meant defaults: { ease: "none" }? Same goes for opacity.

Your 7, 8, and 9 tweens are all going to exactly the same value which seems very strange and useless to me.

You're animating '.anim-text spatailwindcssn' infinitely, but there are no such elements. There are several warnings in the console indicating you're using invalid targets.

In short, please provide more details about exactly what you think the problem is, otherwise we won't be able to help.

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

January 24

3 hours ago, Rodrigo said:

Hi,

Once again you're not giving us a clear description of the problem, sorry.

I tested this on an iPad running iOS 17.2 and I'm getting the exact same result on the latest Chrome and Safari that I get on the browser on my desktop. Maybe I'm missing something here 🤷‍♂️

Happy Tweening!

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

January 24

On 1/23/2024 at 11:58 PM, GSAP Helper said:
We'd love to help, but vague details like 'it is not working proper' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

A clear description of the expected result - "I am expecting the purple div to spin 360degrees"

A clear description of the issue - "the purple div only spins 90deg"

A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container"

A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you?

Also, this looks odd to me:
filter: 'blur(250px)'
Filters are extremely expensive for the browser to render. That's totally unrelated to GSAP. So a huge blur like that looks problematic to me rendering-wise. Just be careful. Does everything work as expected if you remove the filter animations?

Lastly, please link to the editable project, not just the preview. Like:

https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx

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

January 23

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

January 16

6 minutes ago, mvaneijgen said:

Sure! And that you've already discovered!

So you either have to do a lot of research and find a solution that will allow you to do this or join the club. Personally I wouldn't think twice, my time is more valuable than the cost of the membership. It also feels great supporting a tool that supports you!

I find your question a bit weird, I get it but still it feels like you're asking a really skilled carpenter to help you (for free) to customize some IKEA furniture you bought that doesn't fit, because you don't want to pay the carpenter for their skills. 🤷‍♂️

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

January 16

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

January 15

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?

January 9

19 hours ago, akapowl said:

Hello there @codechirag

Since it looks to me like what you wanted was to implement snapping for every section in that example - vertically native-scrolled and horizontally fake-scrolled - I really don't think you'll have to go the way of 'animate everything' as suggested earlier here.

Snapping logic can become quite tricky, especially if you want to implement it across the board for different ScrollTriggers, but in your case I would suggest having a look at this older thread. It contains an example built by @GreenSock that shows how you can achieve what I understand it is you're after.

I hope this will help you out. Cheers.

Thank you very much for helping @akapowl

January 8

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

January 6

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.

January 5

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.

See the Pen ZEPWYoV by EmpChirag (@EmpChirag) on CodePen

January 5

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.

January 3

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 😊

See the Pen qBvbWwY by EmpChirag (@EmpChirag) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by codechirag