Search the Community

Hey guys, I am happy to be here and use your amazing tools for my upcoming personal website. That being said, I need your advice. What would you say would be best practices when dealing with multiple reveal animations on scrolling? I've found that mobile performance (on Chrome, since Firefox seems to perform beautifully) is pretty bad when it comes to the way my reveal animations trigger. They feel stuttery and somewhat low-fps. I've tried slowly scrolling to avoid overriding them by dragging the screen (to see if multiple animations firing at once could be the cause), but the choppy animation effect is pretty much the same even if only one animation triggers. For reference, I've set up my reveal animations using attributes. I place certain attributes on certain elements, and a switch statement detects the type of animation that needs to be fired for each element. Here's more or less how this code is setup. Maybe you have some pointers on how would be best to setup something like this? function loadGSAPAnimations() { let selector = "[data-reveal]"; // Base selector for elements to animate // Query the DOM once for each modified selector let itemsToAnimate = document.querySelectorAll(selector); itemsToAnimate.forEach((itemFound) => { const elementTimeline = gsap.timeline({ delay: itemFound.dataset.delay || 0, // If "data-delay" attribute is present, adjust value defaults: { duration: 1, ease: "power4.out" }, }), animationType = itemFound.dataset.reveal; switch (animationType) { case "multi-element-reveal": const childElements = itemFound.querySelectorAll(childSelector); gsap.set(childElements, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( childElements, { opacity: 1, y: 0, stagger: 0.2, ease: "power4.out", onComplete: () => { gsap.set(childElements, { willChange: "auto" }); }, }, "+=0.3" ); break; case "element-reveal": gsap.set(itemFound, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( itemFound, { opacity: 1, y: 0, duration: 1, ease: "power4.out", stagger: 0.15, onComplete: () => { gsap.set(itemFound, { willChange: "auto" }); }, }, "+=0.3" ); break; case "title-reveal": let elementText = new SplitType(itemFound, { types: "lines", lineClass: "title-line", tagName: "span", }); gsap.set(elementText.lines, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( elementText.lines, { opacity: 1, y: 0, duration: 1, stagger: 0.15, ease: "power4.out", onComplete: () => { gsap.set(elementText.lines, { willChange: "auto" }); elementText.revert(); }, }, "+=0.3" ); break; case "image-reveal": const image = itemFound.querySelector("img"); const innerWrapper = image.closest(".image-animation-wrapper"); gsap.set(innerWrapper, { scale: 1.15, "--reveal-scale": 1, force3D: true, willChange: "scale, transform, translateY", }); elementTimeline.to( innerWrapper, { "--reveal-scale": 0, scale: 1, duration: 1.5, ease: "power4.out", onComplete: () => { gsap.set(innerWrapper, { willChange: "auto" }); }, }, "+=0.3" ); break; } //Controls the distance from the screen when the item gets revealed on scroll const revealOffset = itemFound.dataset.offset || 84; // Create the ScrollTrigger instance ScrollTrigger.create({ trigger: itemFound, animation: elementTimeline, start: `top ${revealOffset}%`, end: "bottom 35%", refreshPriority: -1, }); }); }

In my Tweenlite (1.16.1) animations, I am seeing a few dropped frames at the very beginning of the animation. I am ensuring the tween is starting on a new animation frame... so in theory, all the JS/Layout/Paint to create the element should be completed before I start the animation. I am also seeing that is the case in the Chrome dev tools profiler. Is there a setting on Tweenlite that doesn't start the animation or the clock until the CPU spike is gone? I am checked out lagSmoothing(), but that just smooths out the gap. I actually want the animation to wait. Any thoughts? Thank you!