ScrollTrigger not working

[Vineeth Achari]

Hi,

 

I have developed a new film site, https://vineethachari.cloudvent.net/test/work1.html that incorporates all these plugins (Barba.js/Locomotive/GSAP/ScrollTrigger). 

 

The ScrollTrigger JS at the above mentioned URL is commented out as of now. Because, enabling ScrollTriggerJS does not achieve the following section effects. 

 

 

Could someone please help me find a solution to this, as I still have facing some issues with plugins.

 

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions, which we love to do, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[GreenSock]

Yep, it's impossible to troubleshoot a live site effectively. Since you're using a 3rd party smooth-scrolling tool (LocomotiveScroll), that totally hijacks scrolling, thus it won't work with ScrollTrigger unless you set it up properly to communicate outside of native scrolling. See ScrollTrigger.scrollerProxy() in the docs. Of course I'd highly recommend switching to ScrollSmoother instead because that's a GreenSock product that integrates nicely with ScrollTrigger and doesn't require the special configuration. 

 

If you still need help, please make sure you provide a minimal demo with only the essential code to illustrate the GSAP-related issue. Beware that we cannot support tools like LocomotiveScroll or other 3rd party integrations since they're not GreenSock products. 

 

Good luck!

[Vineeth Achari]

Could anybody here help me please?

[GreenSock]

1 hour ago, Vineeth Achari said:

Could anybody here help me please?

If you'd like more help, you have several options (as indicated in the previous posts):

1. Provide a minimal demo that clearly shows the GSAP-related issue/question and doesn't use 3rd party tools. We cannot troubleshoot a live site for free, sorry. Please read the forum guidelines.
2. Post in the "Jobs & Freelance" forum to seek paid assistance from willing community members. 

Good luck!

[Vineeth Achari]

On 7/3/2022 at 10:02 PM, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Even when I enable the locomotive js, the background image transition does not work. As the website work is 90% complete, I cannot use any other library. I'm still struggling with this and have tried other solutions, as well as posting in job/freelance. Please help me out with this.

 

Please have a look at this. 

See the Pen KKoVWaa by vineethachari (@vineethachari) on CodePen

.

(Image transition js i have put it line number 481 you can see in the codepen.)

Much Appreciate!

 

 

 

 

 

On 7/3/2022 at 10:02 PM, GSAP Helper said:

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions, which we love to do, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

[GreenSock]

13 hours ago, Vineeth Achari said:

Even when I enable the locomotive js, the background image transition does not work.

LocomotiveScroll is not a GreenSock product and it hijacks native scroll, so it's not something we can support here, sorry.

 

13 hours ago, Vineeth Achari said:

As the website work is 90% complete, I cannot use any other library.

Understood. I guess you'd just need to gauge how much time it would take to switch vs. how much time it'll take to fix with your current strategy/libraries. There's a demo on the ScrollTrigger.scrollerProxy() page showing how LocomotiveScroll can be connected, but again that's not officially supported. 

 

13 hours ago, Vineeth Achari said:

I'm still struggling with this and have tried other solutions, as well as posting in job/freelance.

I don't see any post from you in the Jobs & Freelance forum: https://greensock.com/forums/forum/15-jobs-freelance/. Did I miss it?

 

13 hours ago, Vineeth Achari said:

Please help me out with this.

Thanks for providing the CodePen, but unfortunately it has over 2,300 lines of HTML/CSS/JS and it uses unsupported 3rd party libraries which are almost surely causing the problems. There are way too many factors involved and it would take too much time to dig into this. Of course anyone in these forums is welcome to offer to lend you a hand for free - I just wanted to manage your expectations properly about the kind of help you can expect here. Again, please read the forum guidelines. 

 

If you can isolate the issue in a CodePen that has maybe 50-100 lines of code and no 3rd party libraries, you'll greatly increase your chances of getting help here.