Jump to content
Search Community

Laggy ScrollTrigger animations, attempting to re-create with toggleClass

growmybusiness test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi there!

 

So I'm creating a website with some basic text animations (to note, ScrollSmoother is also being used) and I've had some people comment that some pages are a bit laggy.

 

I've assumed that's because most text has the animation in question applied, and their browser is struggling to keep up.

 

So I've tried to implement an alternative that instead of using GSAP to animate these simple values, I'd do it with CSS and the toggleClass parameter for the ScrollTrigger.

 

While I've got this mostly working, I am A. unsure how performant the alternative is going to be, and B. it doesn't work the way I'd particularly like it to. For example, the currently un-commented option in the CodePen uses the stagger parameter to add a slight delay to the children of the trigger. But the key factor is that the parent element is the trigger and all immediate children will animate sequentially. The CSS alternative, doesn't do this as each individual child is the trigger, in order  to create the staggered effect. This however means that there are some points where the first element will animate in (e.g. the title, in my example) and there will be a blank space below (where the paragraph is, but hasn't animated in). Example below.

 

This

image.png.d743841a1d1f529a04c2e32506af67ef.png

 

As opposed to

image.png.710c44965f91716fd1f6433cc5545478.png

 

I hope this makes sense. If anyone has any ideas or solutions as to what I could do to maintain the initial animation (GSAP) but without incurring any lag on different machines/devices that would be much appreciated!

 

Thanks,

Ben Elwood

See the Pen KKRRbqP by benjaminelwoods (@benjaminelwoods) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

The only reason you could be having performance issues is because your site has other elements that are causing them. Animating solid white text using translations with GSAP shouldn't cause any problems. Have you tried with integers instead of percentages. It seems a bit far fetched IMO but perhaps the whole parsing could be the problem. I don't see any performance issue in the codepen you provide, but yet again, I'm confident that this is not how the real life project looks like.

 

To create a staggered animation you could use the onEnter and onEnterBack callbacks and set up a timer to apply the classes to each element and the onLeave and onLeaveBack callbacks to remove the class from them without a timer.

const addClass = (targets) => {
  targets.forEach((target, index) => {
    setTimeout(() => {
      target.classList.add("yourClass");
    }, index * 50); // <- set amount of time for stagger
  });
};

const removeClass = (targets) => {
  targets.forEach((target, index) => {
    target.classList.remove("yourClass");
  });
};

Also you can use GSAP toArray utility in order to loop just through the parents and then select the child elements:

gsap.utils.toArray(".animate").forEach(el => {
  const children = gsap.utils.toArray(el.children);
  ScrollTrigger.create({
    trigger: el,
    start: "center bottom-=5%",
    markers: true,
    toggleClass: 'forwards',
  })
});

Finally have you pushed a version with the CSS animations and got better performance? That would be the first step in order to narrow down things and try a different approach and do all the work of creating staggered animations with CSS. As you can see it can be a bit of extra work, but is better to be completely sure about it first IMHO.

 

Happy Tweening!

Link to comment
Share on other sites

23 hours ago, Rodrigo said:

Hi,

 

The only reason you could be having performance issues is because your site has other elements that are causing them. Animating solid white text using translations with GSAP shouldn't cause any problems. Have you tried with integers instead of percentages. It seems a bit far fetched IMO but perhaps the whole parsing could be the problem. I don't see any performance issue in the codepen you provide, but yet again, I'm confident that this is not how the real life project looks like.

 

To create a staggered animation you could use the onEnter and onEnterBack callbacks and set up a timer to apply the classes to each element and the onLeave and onLeaveBack callbacks to remove the class from them without a timer.

const addClass = (targets) => {
  targets.forEach((target, index) => {
    setTimeout(() => {
      target.classList.add("yourClass");
    }, index * 50); // <- set amount of time for stagger
  });
};

const removeClass = (targets) => {
  targets.forEach((target, index) => {
    target.classList.remove("yourClass");
  });
};

Also you can use GSAP toArray utility in order to loop just through the parents and then select the child elements:

gsap.utils.toArray(".animate").forEach(el => {
  const children = gsap.utils.toArray(el.children);
  ScrollTrigger.create({
    trigger: el,
    start: "center bottom-=5%",
    markers: true,
    toggleClass: 'forwards',
  })
});

Finally have you pushed a version with the CSS animations and got better performance? That would be the first step in order to narrow down things and try a different approach and do all the work of creating staggered animations with CSS. As you can see it can be a bit of extra work, but is better to be completely sure about it first IMHO.

 

Happy Tweening!

Thanks Rodrigo! Using those functions you supplied seem to have done the trick!

 

Really appreciate your help :)

 

- Ben

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