Animations Don't Work Every Time Page Loads

[neontrenton]

Hello,

 

I'm having an issue with the site I'm working on. For instance, the animation below works maybe 50% of the time. The top "quarter" of the site or so seems to load fine, but below that, these animations don't always fire. I've tried refreshing, hard refreshing, clearing cache, etc. but can't seem to get them to function properly consistently. Any ideas what might be the issue?

 

As this is a complex site, I'm not able to just rebuild/replicate the issues in Codepen, but I can provide a link to the dev url: https://hinsdale2022.wpengine.com/

 

I'm a GSAP beginner and love what I'm able to do with it, but unfortunately I haven't been able to consistently accomplish what I'm trying to do. 

 

Thanks for any help you can send my way!

 

Example One:

gsap.registerPlugin(SplitText, ScrollTrigger);



        gsap.utils.toArray(".text-reveal").forEach((title) => {
            const childSplit = new SplitText(title, {
                type: "lines, words",
            });

            gsap.from(childSplit.lines, {
                scrollTrigger: {
                    trigger: title,
                    toggleClass: "active",
                },
                autoAlpha: 0,
                ease: Back.easeInOut.config(1.7),
                duration: 3,
                y: 40,
                ease: "power4",
                delay: 0.3,
                opacity: 0,
                skewY: 0,
                stagger: 0.1,
                lazy: false,
            });
        });

 

Example Two:
      

 let containers = gsap.utils.toArray(".treatment-1");

        containers.forEach((container) => {
            let tl = gsap.timeline({
                scrollTrigger: {
                trigger: container,
                scrub: true,
                pin: true,
                start: "center center",
                end: "bottom top",
                markers: false,
                },
                defaults: { ease: "none" }
            });
            tl.to(container.querySelector("img"), { scale: 1, x: -500 });
            tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 });
        });

 

[Carl]

Hi,

 

Nice job on the site. 

It isn't feasible for us to troubleshoot a live site of that complexity, however I noticed you are using an older version of gsap (3.5.1')

I'd suggest updating gsap and all the plugins to the latest version 3.10.4 as there have been quite a few improvements lately.

[neontrenton]

No worries, I'll (probably) figure it out eventually. Thanks, Carl!

[Taun]

Any solution? My animations for menu and work item don't fire the first click, but fire after that fine.

[GSAP Helper]

@Taun there must be a logic issue in your code. Without a minimal demo, it's very difficult to troubleshoot; if you’d like some help, please start a new thread and include a minimal demo that clearly 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. ✅