Digital Team

Hi Zach, thanks for the welcome, i will try put a demo together and come back. Its not the comma unfortunately, that was just a stripped back example done in the WYSIWYG. However I'm thinking i need to store the timelines styles/settings before allowing the reduced motion setting to override.

Hi, does any one have any examples of a Timeline that uses ScrollTrigger.matchMedia and prefers-reduced-motion? Im having an issue where i have multiple timelines on the page, but when reduced motion is toggled, the timeline its affecting seems to lose its position on the page and knock other timelines out of sync. I'm not changing any values of the timeline yet, so seems to be related to the re-creation of the timeline. useEffect(() => { ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { if(Timeline.current) Timeline.current.kill(); SplashTween('desktop'); }, "(min-width: 1024px) and (prefers-reduced-motion: reduce)": function () { if(Timeline.current) Timeline.current.kill(); // set true to tell tween to use reducedMotion SplashTween('desktop', true); } }); return () => { if(Timeline.current) Timeline.current.kill(); }; }, []);