Laggy Animation - Can I optimize?

[redfawx]

Hi all! I am fairly new to GSAP and have been trying to run multiple animations at the same time. When I do I get the animated result that I want except its very choppy or laggy. Is there something that I could be doing better?

 

//desktop
            $(".desktop-body").removeClass("d-none");

            TweenMax.from(".desktop-portrait-hero", .75, { delay: .5, alpha: 0, y: "-=30", ease: Power3.easeInOut });


            var mySplitText = new SplitText(".desktop-hero-text", { type: "chars,words, lines" }),
                tl = new TimelineLite({ delay: 1 });
            tl.staggerFrom(mySplitText.chars, 0.5, { y: 100, opacity: 0 }, 0.02);

            var mySplitText2 = new SplitText(".d-title", { type: "chars,words,lines" }),
            t2 = new TimelineLite({ delay: .5 });
            t2.staggerFrom(mySplitText2.chars, 0.8, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: Back.easeOut }, 0.01, "+=0");

            var mySplitText3 = new SplitText(".gallery-side-text", { type: "chars" }),
            t3 = new TimelineLite({ delay: 1.4 });
            t3.staggerFrom(mySplitText3.chars, 0.5, { y: 100, opacity: 0 }, 0.02);

            

            TweenMax.from("#first-img", .75, { delay: 1, y: "+=30", alpha: 0, ease: Back.easeOut });
            TweenMax.from("#sec-img", .75, { delay: 1.5, y: "+=30", alpha: 0, ease: Back.easeOut });
            

 

[GreenSock]

Welcome to the forums, @redfawx. 

 

Hm, it's very difficult to troubleshoot blind but typically when you're running into performance issues it's totally unrelated to GSAP - it's more about the amount of pressure you're putting on the browser's rendering engine. For example, if you're animating hundreds of individual characters, that's really tough. GSAP can do its work on hundreds of elements without breaking a sweat, but then the browser has to actually render those elements in their new positions/rotations/opacity and THAT is where things can slow down. 

 

Do you have a codepen demo we can peek at? 

 

My guess is that you're just trying to animate too many characters simultaneously.