Cuberto

@GreenSock Thank you very much for your help! I would like to take this opportunity to ask you. A little off topic, I hope you don’t mind. For some animations with CSS transformations, we explicitly set will-change: transform to create a composite layer that will be processed on the GPU and eliminate jitter, especially on text. Of course, after performing the transformations, will-change must be returned to the auto in order to free up memory. I do it like this: const tl = new gsap.timeline(); tl.set(elements, { willChange: 'transform', }, 0); tl.fromTo(elements, { y: '110%', scaleY: 1.5, transformOrigin: 'top top', }, { y: '0%', scaleY: 1, transformOrigin: 'top top', duration: 2, stagger: {amount: 0.3}, ease: 'expo.out', }, 0); tl.set(elements, { willChange: 'auto', }); return tl; Some developers I know do it like this: const tl = new gsap.timeline(); const wc = [...elements, ...moreElements]; tl.set(wc, { willChange: 'transform', }, 0); tl.fromTo(elements, { y: '110%', scaleY: 1.5, transformOrigin: 'top top', }, { y: '0%', scaleY: 1, transformOrigin: 'top top', duration: 2, stagger: {amount: 0.1}, ease: 'expo.out', }, 0); tl.fromTo(moreElements, { y: '110%', }, { y: '0%', duration: 2, stagger: {amount: 0.3}, ease: 'expo.out', }, 0.2); tl.set(wc, { willChange: 'auto', }); return tl; Unfortunately, I did not find a built-in mechanism in GSAP to automate this routine process. There is a Force3D property, but it’s not quite the same. It would be very cool if GSAP could do this automatically, for example: tl.from(elements, { y: '110%', scaleY: 1.5, duration: 2, stagger: {amount: 0.3}, ease: 'expo.out', autoWillChange: true, // or force3D: 'will-change' }); Here are some videos where you can see the difference when using will-change. The difference is clearly visible at the “We would love to talk!” caption. No will-change: https://www.dropbox.com/scl/fi/sau2hmz055zuylq67pqsq/no-will-change.mp4?rlkey=4buyngxk359nxioxyc3l4i07a&dl=0 Will-change is set: https://www.dropbox.com/scl/fi/8fkxxh6j6w79fn9bcjdy0/will-change-set.mp4?rlkey=ycv5aq4qir6vpzvznn8frdur7&dl=0 Force3D is true: https://www.dropbox.com/scl/fi/ww2ienyi4kl6067xz4t5u/force3D-true.mp4?rlkey=ssx678lh215pfyk73t3nc8xgj&dl=0 Once again, sorry for being off-topic, I probably should have posted this as a future request.

Thanks @GreenSock for the quick response and fix!👍 It works! Fixed demо: https://j4detdwi8u.demo.cubdev.com/fixed.html

Hello! First of all, I want to say thank you to GSAP team for this wonderful tool that we have been using for many years ❤️ Recently I've found a bug related to ScrollTrigger.batch and ScrollTrigger's with "once: true" option. It can be simply reproduced by opening the page below, scrolling to the middle or end of the page, and then clicking Refresh in your browser. Looking at the console you can see: Uncaught TypeError: Cannot read properties of undefined (reading 'end') at Te.refresh (ScrollTrigger.min.js:10:25526) at ScrollTrigger.init (ScrollTrigger.min.js:10:32732) at new ScrollTrigger (ScrollTrigger.min.js:10:36936) at ne.create (ScrollTrigger.min.js:10:37248) at ScrollTrigger.min.js:10:38361 at Array.forEach (<anonymous>) at ne.batch (ScrollTrigger.min.js:10:38289) at HTMLDocument.<anonymous> (minimal.html:142:20) I can’t show it on CodePen because the scroll is reset in the iframe after the page refreshed. I'm not sure when this appeared, but on the latest GSAP versions 3.12.4 and 3.12.5 the bug is present. Minimal demо: https://j4detdwi8u.demo.cubdev.com/ Super minimal demо: https://j4detdwi8u.demo.cubdev.com/minimal.html Possible workaround: https://j4detdwi8u.demo.cubdev.com/workaround.html Env: Chrome 122.0.6261.129 Win64 Firefox 122.0 Win64 Chrome 122.0.6261.129 Mac ARM64 This cannot be reproduced in Safari 17.0 Mac ARM64 Kind Regards, Artem, Cuberto