ScrollTrigger.matchMedia and prefers-reduced-motion

[Digital Team]

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();
    };

  }, []);

 

[ZachSaucier]

Hey Mista Ben and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership!

 

In the code that you provided you're missing a comma after the first matchMedia key-value pair (i.e. after the first }). Maybe that's the issue? 

 

It'd really help if you made a minimal demo of the issue.

[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.

  

[vagresockxul]

@Mista Ben, do you found a solution? I created a Codepen:

See the Pen RwpJOaP by vacoxudelpen (@vacoxudelpen) on CodePen

• 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.