Reduced Motion in timeline

[TypicalUser1312]

Can you guys help me adding reduced motion in timeline. 

https://codesandbox.io/s/misty-forest-2ptl32?file=/src/App.js

[GSAP Helper]

Hm, can you elaborate a bit on what you mean by "adding reduced motion in timeline"?

 

Are you asking how to change your timeline if the user has prefers-reduced-motion: reduce?  If so, check out gsap.matchMedia(). 

 

If you still need help, here are some tips that will increase your chance of getting a solid answer:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

I noticed you're using React. You should definitely be using gsap.context() - it's your new best friend in React because it makes cleanup so easy. Your demo is not doing proper cleanup. I would strongly recommend reading this article:

 

[TypicalUser1312]

So i want to disable animations in timeline while prefers-reduced-motion: reduced. I dont know how to combine match media with timeline correctly. If u can check the link and help me with that i will be awsome 

[mvaneijgen]

Hi @TypicalUser1312 have you seen the awesome Greensock YouTube channel?  https://www.youtube.com/c/GreenSockLearning/videos there is a 1 minute video that explains everything you need to know about MatchMedia it even goes over a reduced motion use case!