Jump to content
Search Community

Low FPS when the first animation plays.

NLopesx test
Moderator Tag

Recommended Posts

16 hours ago, Makssshow said:

Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message?

The JS is basically this. I think the HTML and CSS doesn't matter maybe.

 

gsap.registerPlugin(ScrollTrigger);
 
ScrollTrigger.matchMedia({
 
  "all": function () {
 
    // OPACITY 1 THE OBJECT .opacity ON SCROLL
    const opacity = gsap.utils.toArray('.opacity');
 
    opacity.forEach(opacity => {
      gsap.to(opacity, {
        scrollTrigger: {
          start: "0% 90%",
          end: "0% 60%",
          trigger: opacity,
          scrub: true,
          // markers: true,
        },
        opacity: 1
      })
    });


 
    // HOME TEXT SLIDING LEFT 
    gsap.to(".scrollLeft", {
      scrollTrigger: {
        trigger: ".scrollLeft",
        scrub: 1,
        start: "50% 90%",
        end: "0% 10%",
        pin: true,
        // markers: true,
      },
      xPercent: -43
    })


 
    // GLOBAL TITLE SLIDING LEFT
    const titleLeft = gsap.utils.toArray('.titleLeft');
 
    titleLeft.forEach(titleLeft => {
      gsap.to(titleLeft, {
        scrollTrigger: {
          start: "0% 90%",
          end: "0% 10%",
          trigger: titleLeft,
          scrub: 2,
        },
        xPercent: -6
      })
    });
 
    const titleLeft2 = gsap.utils.toArray('.titleLeft2');
 
    titleLeft2.forEach(titleLeft2 => {
      gsap.to(titleLeft2, {
        scrollTrigger: {
          start: "0% 90%",
          end: "0% 10%",
          trigger: titleLeft2,
          scrub: 2,
          // markers: true,
        },
        xPercent: -15
      })
    });
 
  },
 
  "(min-width: 799px)": function () {
 
    // PHOTOS SLIDING
    gsap.to(".Dev", {
      scrollTrigger: {
        trigger: ".Dev",
        scrub: 1,
        start: "50% 70%",
        end: "50% 20%",
        // markers: true,
      },
      xPercent: -30
    })
 
    gsap.from(".Mkt", {
      scrollTrigger: {
        trigger: '.Mkt',
        scrub: 1,
        start: "50% 70%",
        end: "50% 20%",
        // markers: true,
      },
      xPercent: -30
    })
 
  },


 
  "(max-width: 799px)": function () {
 
    // HOME TEXT SLIDING LEFT 
    gsap.to(".scrollLeft", {
      scrollTrigger: {
        trigger: ".scrollLeft",
        scrub: 1,
        start: "50% 90%",
        end: "100% 0",
        pin: true,
        markers: true,
      },
      x: -1300
    })
 
    // PHOTOS SLIDING
    gsap.to(".Dev", {
      scrollTrigger: {
        trigger: ".Dev",
        scrub: 1,
        start: "50% 70%",
        end: "50% 20%",
        // markers: true,
      },
      xPercent: -76
    })
 
    gsap.from(".Mkt", {
      scrollTrigger: {
        trigger: '.Mkt',
        scrub: 1,
        start: "50% 70%",
        end: "50% 20%",
        // markers: true,
      },
      xPercent: -76
    })
 }
 
});
Link to comment
Share on other sites

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

It's very hard to understand what the issue is from code snippets alone. When you post a demo - could you also explain what you mean by 'the animation still bugs'

You are animating elements and using the same element as the trigger which can cause buggy behaviour, it's best not to animate the trigger element! I often use containing elements as triggers instead.

Also - maybe this post will help you with best practises.
 

 

  • 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...