grow. Posted October 4, 2022 Share Posted October 4, 2022 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 As opposed to 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 More sharing options...
Solution Rodrigo Posted October 4, 2022 Solution Share Posted October 4, 2022 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 More sharing options...
grow. Posted October 5, 2022 Author Share Posted October 5, 2022 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now