Jump to content
Search Community

Animations Don't Work Every Time Page Loads

neontrenton test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...