Using GSAP ScrollTrigger with ODOO

[Haris Khan]

I am using gsap in ODOO Online, I have placed the cdns of gsap and scrollTrigger in "Web Layout" file and it is showing that odoo has picked the cdn which is fine, but when I write gsap code i.e gsap.to(".char", {
                    y: 0,
                    stagger: 0.05,
                    delay: 0.2,
                    duration: 0.05,
                    scrollTrigger: {
                        trigger: "#top_brands_tag_two",
                        markers: true,
                        start: "top 80%",
                        end: "bottom 50%",
                        scrub: true
                    }
                });

 

.char being the class provided from "Split-type" another javascript library for splitting text for animation.

 

Issue is that markers appear on screen but the element markers which should interact with the big markers are stuck.

The element markers when crosses the right side markers will animate the text, but as of now the element markers are stuck and not moving with the scroll.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Haris Khan]

I have tested locally and GSAP ScrollTrigger is working perfectly, but one I place the code in ODOO Online it stops working, If it is possible, I can share with you the URL of Odoo online and the login details so you can check. 

[GSAP Helper]

Are you seeing any error messages in the console (Dev Tools)? 

 

It's really not feasible to troubleshoot a live web site in these free forums. You are welcome to post a link, sure. I just want to manage expectations. It's always much, much better to recreate the problem in a minimal demo (like a CodePen or Stackblitz) and post that here instead. We do offer paid consulting services if you need more involved troubleshooting like on a live site. Go ahead and post the link though.