vagresockxul

Wow, as simple as good. ? This indeed helps a lot. My thoughts were overcomplicated. The only think I had to add was the batchMax configuration for ScrollTrigger.batch() to prevent the behavior similar to my delays solution. Thanks for the amazing support.

My first try was to add delay. But this is not the same as stagger. If I load a long page with a lot of reveal elements further below, I have to wait until the delayed animation has run to this point. It's hard to put into a demo, but I tried: https://codepen.io/vacoxudelpen/pen/PopBaYK

Hi, I currently try to combine this two examples: ScrollTrigger.batch() with dynamic added elements ❗ Oddly, the forum software append the codepen to the end of the post. https://codepen.io/GreenSock/pen/eYZBMLO Source: Reveal animation with different directions (to top/left/right) https://codepen.io/GreenSock/pen/pojzxwZ The main issue for me is: that I can't define the animation directions within a batch if I use a forEach, I lost the staggered benefit from ScrollTrigger.batch() How to solve this? Best regards

@Mista Ben, do you found a solution? I created a Codepen: https://codepen.io/vacoxudelpen/pen/RwpJOaP Per default the boxes are orange For @media (prefers-reduced-motion: reduce) the boxes turn green For @media (min-width: 1020px) and (prefers-reduced-motion: no-preference) the boxes turn red The latter one is used within ScrollTrigger.matchMedia() to enable the animation. I testet it with the Windows 10 settings, as descripted here at MDN. As expected, the red boxes get animated, the green ones not.

Thanks for the quick response. When will this fix be released? Currently I have to workaround it with gsap.set(box, {clearProps: 'all'}); within a max-width media query.. I appreciate your feedback and try if this approach will work within the project context.

Hi, I have an unexpected behavior with ScrollTrigger.saveStyles(). (for me as newcomer) The Codepen shows a very simplified version of my problem. The idea: * The animation is only attached on devices with larger screens. So I use ScrollTrigger.matchMedia(). * When the animation is active, additional styles will be overridden the CSS fallback with gsap.set(). In the Codepen example the box should be only colored red. * On devices with smaller screens the animation should not be loaded or on viewport change destroyed. What happend: On large devices the boxes stay orange. If ScrollTrigger.saveStyles() is enabled, it will remove the styles from gsap.set(), when executing the gsap.to() including ScrollTrigger. What I expect: On large devices the boxes get red. Like if I comment out ScrollTrigger.saveStyles(). And when changing the viewport, the boxes return to their fallback state (orange). What went wrong? Best regards