Jump to content
Search Community

Performance Issues on Desktop and Mobile Devices Using GSAP with React-Three-Fiber

Waqas ali

By Waqas ali
in GSAP

Moderator Tag
 Share
Go to solution Solved by GSAP Helper,

Recommended Posts

Waqas ali

Waqas ali

Posted
Posted

Hi GSAP Community,
 

I'm working on a site using Lenis Smooth Scroll, GSAP Scroll Trigger, React-Three-Fiber, and Drei. While the animations look great but the site is extremely laggy and sometimes non-functional on many mobile and desktop devices. I've optimized where I can but still can't pinpoint the issue.
 

Here's the live site: https://codeencoders.vercel.app/
GitHub Repo: https://github.com/Waqas786ali/codeencoders
 

Details:

  • I've implemented GSAP animations alongside Three.js objects.
  • Performance on Desktop and Mobile devices is the primary concern (lagging, slow interactions).
  • Any advice on optimizing GSAP or handling Three.js in mobile environments would be greatly appreciated!

Thank you in advance for your help.
 

Best regards,
Waqas Ali

  • Solution
GSAP Helper

GSAP Helper

Posted
  • Solution
Posted

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

  1. Try setting will-change: transform on the CSS of your moving elements. 
  2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
  3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
  4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
  5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
  6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
  7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
  8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
  9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" :)

I hope this helps!

Waqas ali

Waqas ali

Posted
  • Author
Posted

Actually except the SVG , i am following all the things.
But still facing performance issue.
Here Plz check if i am doing anything in wrong way

 

import { gsap } from 'gsap';
import { useGSAP } from '@gsap/react';
import Header from './header/Header';
import Services from './services/Services';
import Contact from './contact/Contact';
import Innovation from './innovation/Innovation';
import GreatMinds from './great-minds/GreatMinds';
import Clients from './clients/Clients';
 
const Home = () => {
  useGSAP(() => {
 
    gsap.fromTo(
      ".text_apear",
      {
        opacity: 1,
        y: 200,
      },
      {
        opacity: 1,
        y: 0,
        scrollTrigger: {
          trigger: ".text_apear",
          start: "top 100%",
          end: "bottom 60%",
          toggleActions: "play none none none",
        },
        stagger: 0.02,
        duration: 4,
        delay: 4,
      }
    );
 
    let mm = gsap.matchMedia();
    mm.add({
      isSMMobile: "(max-width: 376px)",
      isMobile: "(max-width: 640px)",
      isTablet: "(max-width: 1023px)",
      isDesktop: "(min-width: 1024px)",
    }, (context) => {
      const conditions = context.conditions as { isSMMobile: boolean; isMobile: boolean; isTablet: boolean; isDesktop: boolean };
      const { isSMMobile, isMobile, isTablet, isDesktop } = conditions;
      console.log(conditions, "context");
 
      gsap.fromTo('.scaling-element',
        {
          scale: 1,
          opacity: 1,
        },
        {
          scale: 0.3,
          opacity: 0,
          scrollTrigger: {
            trigger: '.scaling-element',
            pin: ".header",
            start: "center center",
            end: "bottom top",
            scrub: 1,
            markers: false,
            invalidateOnRefresh: true,
          },
          force3D: true,
          ease: 'power1.out',
        }
      );
 
      gsap.fromTo('.up-element',
        {
          opacity: 1,
          y: (isMobile && !isSMMobile) ? 0 : (isMobile && isSMMobile) ? 0 : 0,
        },
        {
          opacity: 0,
          y: isMobile ? -150 : -200,
          scrollTrigger: {
            trigger: '.up-element',
            start: "top 30%",
            end: "bottom top",
            scrub: 1,
            markers: false,
            invalidateOnRefresh: true,
          },
          duration: 1.5,
          stagger: 0.02,
          ease: 'power2.out',
        }
      );
      gsap.fromTo(
        ".text_apear1",
        {
          opacity: 1,
          y: 0,
        },
        {
          opacity: 1,
          y: 100,
          scrollTrigger: {
            trigger: ".text_apear1",
            start: "top 75%",
            end: "bottom 50%",
            scrub: 1,
            invalidateOnRefresh: true,
          },
          ease: 'power2.out',
          stagger: 0.02,
          duration: 3,
        }
      );
      gsap.fromTo('.header_shade',
        {
          opacity: 0.35,
        },
        {
          opacity: 0,
          scrollTrigger: {
            trigger: '.header_shade',
            start: "top 30%",
            end: "bottom top",
            scrub: 1,
            markers: false,
            invalidateOnRefresh: true,
          },
          duration: 1.5,
          stagger: 0.02,
          ease: 'power2.out',
        }
      );
 
      /**
    * Function to apply parallax on a list of elements
    * @param {string} selector - The class selector for the images
    * @param {number} yValue - How much y-axis shift you want (more for stronger effect)
    * @param {number} scrubValue - The scrub value (higher = slower, more cinematic)
    */
      const animateParallax = (selector: any, yValue: any, scrubValue: any) => {
        gsap.utils.toArray(selector).forEach((img: any, index) => {
          gsap.fromTo(
            img,
            {
              opacity: 1,
              y: 0,
              z: 0,
            },
            {
              opacity: 1,
              y: yValue, // Parallax shift on the y-axis
              z: index % 2 === 0 ? 30 : -30,
              scrollTrigger: {
                trigger: img,
                // pin: img.closest('.parrallaxSection'),
                start: "top 60%", // Start earlier
                end: "bottom 20%", // End later
                scrub: scrubValue, // Scrub factor controls the scroll speed
                markers: false,
              },
              ease: 'power2.inOut', // Smooth entry/exit
            }
          );
        });
      };
 
      // Add parallax to different image layers
      if (!isMobile) {
        animateParallax('.serviceImgUP1', isTablet ? 20 : 230, 1.5);
      }
      animateParallax('.serviceImgUP2', isTablet ? 20 : -230, 1.5);


 
      // Split text into individual letters for animation
      const splitTextIntoLetters = (selector: string) => {
        gsap.utils.toArray(selector).forEach((element: any) => {
          const text = element.textContent;
          const wrappedText = text
            ?.split('')
            .map((letter: any) => `<span class='letter'>${letter}</span>`)
            .join('');
          element.innerHTML = wrappedText;
        });
      };
 
      // Letter-by-letter animation
      const animateLetterByLetter = (selector: string) => {
        gsap.utils.toArray(selector).forEach((element: any) => {
          const isButton = element.classList.contains('parallaxText-button');
          gsap.fromTo(
            element.querySelectorAll('.letter'),
            {
              opacity: 0.2,
              y: 50,
            },
            {
              opacity: 1,
              y: 0,
              stagger: isButton ? 0.02 : 0.02,
              scrollTrigger: {
                trigger: element,
                start: "top 60%",
                end: "bottom 0%",
                scrub: true,
                markers: false,
              },
              ease: 'power3.out',
            }
          );
        });
      };
 
      // Apply the letter-split effect and animation to the text
      splitTextIntoLetters('.parallaxText, .parallaxText-button');
      animateLetterByLetter('.parallaxText, .parallaxText-button');
 
      gsap.fromTo('.text_reveal',
        {
          opacity: 1,
          y: 100,
        },
        {
          y: 0,
          scrollTrigger: {
            trigger: '.lock_section',
            start: "center center",
            end: "center top",
            scrub: 1,
            pin: ".lock_section",
            markers: false,
          },
          duration: 1.5,
          ease: 'power3.out',
        }
      );
 
      gsap.timeline({
        scrollTrigger: {
          trigger: '.innovation_section',
          start: 'center center',
          end: 'center top',
          scrub: 1.5,
          markers: false,
          pin: true,
          invalidateOnRefresh: true,
        },
      })
        .fromTo(
          '.innovation_section',
          { scale: isMobile ? 0.7 : 0.5, opacity: 0.8 },
          {
            scale: 1,
            opacity: 1,
            ease: 'power3.inOut',
          }
        );
 
      gsap.fromTo('.text_reveal_1',
        {
          opacity: 0,
          y: 100,
        },
        {
          opacity: 1,
          y: 0,
          scrollTrigger: {
            trigger: '.text_reveal_1',
            start: "center 60%",
            end: "center top",
            scrub: 1,
            pin: '.lock_section_1',
            pinSpacing: true,
            markers: false,
          },
          duration: 1.5,
          ease: 'power3.out',
        }
      );
 
      gsap.fromTo(
        ".text_apear3",
        {
          opacity: 1,
          y: 100,
        },
        {
          opacity: 1,
          y: 0,
          scrollTrigger: {
            trigger: ".text_apear3",
            start: "top 80%",
            end: "bottom 0%",
            toggleActions: "play reverse play reverse",
            markers: false,
          },
          stagger: 0.1,
          duration: 1,
        }
      );
 
    });


 
  });
 
  return (
    <main>
      <Header />
      <Services />
      <Innovation />
      <GreatMinds />
      <Clients />
      <Contact />
    </main>
  );
};
 
export default Home;
Rodrigo

Rodrigo

Posted
Posted

Hi,

 

I don't see anything that spells trouble in the code you posted. As mentioned performance issues can come from many parts and we don't have the time resources to go through an entire codebase looking for perfomance issues and debugging a live production is almost impossible.

 

Unless you present a minimal demo that clearly illustrates the problem so we can track it down and determine whether or not is GSAP related, I'm afraid that there isn't much we can do.

Waqas ali

Waqas ali

Posted
  • Author
Posted

SO it means that there high chances that performance issue is because of three.js stuff because this is all the animation i am playing in my whole site.

Rodrigo

Rodrigo

Posted
Posted

As mentioned performance issues could stem from many different possibilities, one of them might be THREE related stuff. There could be other frameworks or libraries in your project that could be causing this, etc.

 

Debugging performance is not an exact science in terms that is not always the same problem, so you really have to isolate stuff as much as possible in order to come close to a solution. You should start by removing all the other libraries and packages that are not essential for this, just leave THREE and GSAP, so test your site just with those and no styles (I believe you're using tailwind, so remove all those styles by removing the import of the styles file, and of course remove any other styles being applied by any other package or library). If you keep having performance issues, then start removing some THREE stuff until you see a performance improvement. Like that you'll know what exactly is causing this.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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