[{"id":"e5145fe4-17d2-47d9-92d9-3ceb29f54bfa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Overview","styles":{}}],"children":[]},{"id":"97a6ac61-1b55-4a8c-9a35-4ae579520c2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"gsap.matchMedia()","styles":{"code":true}},{"type":"text","text":" is a responsive animation utility in GSAP (GreenSock Animation Platform) created by GreenSock.\n\nIt allows developers to create ","styles":{}},{"type":"text","text":"different animations based on screen size or media queries","styles":{"bold":true}},{"type":"text","text":", similar to CSS media queries.","styles":{}}],"children":[]},{"id":"9babf414-48a1-46b9-a32b-8d0703f19094","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes it easy to build ","styles":{}},{"type":"text","text":"responsive animation systems","styles":{"bold":true}},{"type":"text","text":" that adapt to:","styles":{}}],"children":[]},{"id":"54dcc23e-d513-4f7a-8386-db243c3b3e30","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"desktop layouts","styles":{}}],"children":[]},{"id":"06800ac3-ab00-492f-949f-7c19db70359b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"tablet layouts","styles":{}}],"children":[]},{"id":"24c166c9-5141-4788-9ca3-16cf8ad096ce","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"mobile devices","styles":{}}],"children":[]},{"id":"d7301f35-a130-4711-87ae-22519bcca5ab","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"orientation changes","styles":{}}],"children":[]},{"id":"a1fe2182-f5a1-4bdd-b03b-1c0eb58a0a74","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"user preferences","styles":{}}],"children":[]},{"id":"bc1c02a4-df3e-41c0-a334-aaf5b1844f4d","type":"divider","props":{},"children":[]},{"id":"85a80489-e8c4-4acc-ab8f-fbe38663ea47","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Why Use ","styles":{}},{"type":"text","text":"matchMedia","styles":{"code":true}}],"children":[]},{"id":"3f9b5f41-5024-49aa-aa59-b5d74f66e43c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Responsive layouts often require ","styles":{}},{"type":"text","text":"different animation logic","styles":{"bold":true}},{"type":"text","text":" depending on the viewport.","styles":{}}],"children":[]},{"id":"6d83ca7f-1cc4-4c49-b09e-3368e8cc8ed9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For example:","styles":{}}],"children":[]},{"id":"c5381508-e6a5-413d-ae18-7ba62f4d1d20","type":"procode","props":{"code":"Desktop → horizontal animation\nMobile → vertical animation","language":"javascript","filename":"","files":"[{\"id\":\"tmgtw1av4\",\"name\":\"code\",\"code\":\"Desktop → horizontal animation\\nMobile → vertical animation\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9f5f047-a6c8-4535-8fdd-568cb74fbe09","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Instead of writing complex resize logic, ","styles":{}},{"type":"text","text":"matchMedia()","styles":{"code":true}},{"type":"text","text":" automatically:","styles":{}}],"children":[]},{"id":"9c011c79-32fe-4028-bb33-aa44104f373d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"activates animations when a query matches","styles":{}}],"children":[]},{"id":"28dec76a-f636-4455-a0c3-8d3ba55d2910","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"removes animations when the query no longer applies","styles":{}}],"children":[]},{"id":"90c9db6f-166e-4d9e-9608-a8eebfcdbf7f","type":"divider","props":{},"children":[]},{"id":"9620cc20-a009-4412-bfb7-2376ab4fd75a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Basic Syntax","styles":{}}],"children":[]},{"id":"25b95e07-8243-4f3b-adcf-90ae32c26305","type":"procode","props":{"code":"const mm = gsap.matchMedia()\n\nmm.add(\"(media query)\", () => {\n \n // animations here\n \n})","language":"javascript","filename":"","files":"[{\"id\":\"spnppiku0\",\"name\":\"code\",\"code\":\"const mm = gsap.matchMedia()\\n\\nmm.add(\\\"(media query)\\\", () => {\\n \\n // animations here\\n \\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1cfd2849-a3a1-4a94-b1f4-7c2319729c6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"56362ecb-4c08-481c-9001-e955076c9d20","type":"procode","props":{"code":"mm.add(\"(min-width: 800px)\", () => {\n \n gsap.to(\".box\",{x:400})\n \n})","language":"javascript","filename":"","files":"[{\"id\":\"bp24pcukb\",\"name\":\"code\",\"code\":\"mm.add(\\\"(min-width: 800px)\\\", () => {\\n \\n gsap.to(\\\".box\\\",{x:400})\\n \\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41d8fa78-77eb-42c1-8c66-abf9053f0841","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation only runs when the viewport is ","styles":{}},{"type":"text","text":"800px or wider","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8001052a-16a5-45ea-b137-63b1ba770a2f","type":"divider","props":{},"children":[]},{"id":"70ad7dbc-ef27-4a87-9879-f7814474dbe2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Basic Example","styles":{}}],"children":[]},{"id":"5d2462e1-22c6-4922-a658-8967d022096d","type":"procode","props":{"code":"\n\n\n\n\n\n\n\n\n\n\n

\n\n\n\n\n","language":"javascript","filename":"","files":"[{\"id\":\"z1rmknviv\",\"name\":\"code\",\"code\":\"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

\\n\\n\\n\\n\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86afb55f-b09a-4324-914f-ccdb3632d16c","type":"divider","props":{},"children":[]},{"id":"20817a3d-ae59-45d5-a2c9-db3347e866b1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Result","styles":{}}],"children":[]},{"id":"2f8a4b29-b627-4319-a9e0-29c0093b4637","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Different animations run depending on screen size:","styles":{}}],"children":[]},{"id":"22711187-5ff5-4b21-b91d-4bfab8744ba0","type":"procode","props":{"code":"Desktop → box moves horizontally\nMobile → box moves vertically","language":"javascript","filename":"","files":"[{\"id\":\"gprq7751h\",\"name\":\"code\",\"code\":\"Desktop → box moves horizontally\\nMobile → box moves vertically\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"54a9093c-ceea-46bb-b49c-1ac2bcd4eda3","type":"divider","props":{},"children":[]},{"id":"989cdce2-bd0b-4fc5-a050-921e147d324d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Multiple Media Queries","styles":{}}],"children":[]},{"id":"8429fa74-6302-4079-b998-07279ea4eb0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can define several responsive animation groups.","styles":{}}],"children":[]},{"id":"ef5e63fb-df46-43e5-8eb3-1c5e57c1620a","type":"procode","props":{"code":"const mm = gsap.matchMedia()\n\nmm.add(\"(min-width:1024px)\", () => {\n\ngsap.to(\".panel\",{x:500})\n\n})\n\nmm.add(\"(max-width:1023px)\", () => {\n\ngsap.to(\".panel\",{y:300})\n\n})","language":"javascript","filename":"","files":"[{\"id\":\"v8vksg9cj\",\"name\":\"code\",\"code\":\"const mm = gsap.matchMedia()\\n\\nmm.add(\\\"(min-width:1024px)\\\", () => {\\n\\ngsap.to(\\\".panel\\\",{x:500})\\n\\n})\\n\\nmm.add(\\\"(max-width:1023px)\\\", () => {\\n\\ngsap.to(\\\".panel\\\",{y:300})\\n\\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1044d0d-2f47-4d3e-a0a2-0fde1cd38913","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each query controls its own animation logic.","styles":{}}],"children":[]},{"id":"bab7a1a5-9be2-4ae8-97e4-f7e4e805448c","type":"divider","props":{},"children":[]},{"id":"2fdeb45f-a144-4d29-bd80-cbe937048f2d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Using With ScrollTrigger","styles":{}}],"children":[]},{"id":"366fc168-20ff-49bc-8a28-745eaaa317ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"matchMedia()","styles":{"code":true}},{"type":"text","text":" works especially well with GSAP ScrollTrigger.","styles":{}}],"children":[]},{"id":"59f670f2-b7df-47c4-a14a-289db279e4dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"6fb2c191-871e-449d-ab8b-6ec715a644fa","type":"procode","props":{"code":"mm.add(\"(min-width: 800px)\", () => {\n\ngsap.to(\".box\",{\n\nscrollTrigger:{\ntrigger:\".box\",\nstart:\"top center\",\nend:\"bottom top\",\nscrub:true\n},\n\nx:400\n\n})\n\n})","language":"javascript","filename":"","files":"[{\"id\":\"neon0uh5q\",\"name\":\"code\",\"code\":\"mm.add(\\\"(min-width: 800px)\\\", () => {\\n\\ngsap.to(\\\".box\\\",{\\n\\nscrollTrigger:{\\ntrigger:\\\".box\\\",\\nstart:\\\"top center\\\",\\nend:\\\"bottom top\\\",\\nscrub:true\\n},\\n\\nx:400\\n\\n})\\n\\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e73a611a-6c87-4172-8e6f-35aec941a6e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This enables ","styles":{}},{"type":"text","text":"responsive scroll animations","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3c723850-1d2c-4dc8-b12d-2618c1426814","type":"divider","props":{},"children":[]},{"id":"1727ee49-0500-497d-9656-8ad6173dcbf6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Responsive Animation Object Syntax","styles":{}}],"children":[]},{"id":"07fbc6e7-1743-474a-bbfa-b4b2a1a53451","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"GSAP also supports grouping multiple queries in one call.","styles":{}}],"children":[]},{"id":"63399357-5a54-42ce-863d-5ea392a244c6","type":"procode","props":{"code":"mm.add({\n\n\"(min-width: 1024px)\": () => {\n\ngsap.to(\".box\",{x:400})\n\n},\n\n\"(max-width: 1023px)\": () => {\n\ngsap.to(\".box\",{y:200})\n\n}\n\n})","language":"javascript","filename":"","files":"[{\"id\":\"10dnq33dh\",\"name\":\"code\",\"code\":\"mm.add({\\n\\n\\\"(min-width: 1024px)\\\": () => {\\n\\ngsap.to(\\\".box\\\",{x:400})\\n\\n},\\n\\n\\\"(max-width: 1023px)\\\": () => {\\n\\ngsap.to(\\\".box\\\",{y:200})\\n\\n}\\n\\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01228beb-967d-417f-954d-ab334a0888db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This structure keeps responsive logic organized.","styles":{}}],"children":[]},{"id":"66512028-cdb5-448e-95e2-0c550d969109","type":"divider","props":{},"children":[]},{"id":"77a12aed-5c9a-4f44-b8dc-7e2b17b7bacd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Cleanup Behavior","styles":{}}],"children":[]},{"id":"1aedff4f-9e94-422a-a196-61230ec48c94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When a media query stops matching:","styles":{}}],"children":[]},{"id":"872237b7-65b0-41c5-9da6-aa8e4280fbcd","type":"procode","props":{"code":"Animations created inside that query are automatically reverted","language":"javascript","filename":"","files":"[{\"id\":\"9h58hu8hw\",\"name\":\"code\",\"code\":\"Animations created inside that query are automatically reverted\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf26ecea-98f2-4325-ac18-ee4f41f84e73","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This prevents issues such as:","styles":{}}],"children":[]},{"id":"66b42705-05ba-4460-b1d1-be946071fef4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"duplicate animations","styles":{}}],"children":[]},{"id":"f1c4f902-4cd6-4d41-b966-0b756371d14f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"memory leaks","styles":{}}],"children":[]},{"id":"6583ec1a-7c00-4199-8cf2-b5bc23be6ef6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"incorrect layout states","styles":{}}],"children":[]},{"id":"8d6f8de5-1e50-4ef3-95c9-2d311b1a7762","type":"divider","props":{},"children":[]},{"id":"fbb44ffc-9ac7-49a7-b8f4-e5db03e6b91e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Example — Responsive Scroll Animation","styles":{}}],"children":[]},{"id":"8f253f2b-51a1-4403-93e4-0f45861f5c5d","type":"procode","props":{"code":"const mm = gsap.matchMedia()\n\nmm.add({\n\n\"(min-width: 900px)\": () => {\n\ngsap.to(\".card\",{\n\nscrollTrigger:{\ntrigger:\".card\",\nstart:\"top center\",\nscrub:true\n},\n\nx:400\n\n})\n\n},\n\n\"(max-width: 899px)\": () => {\n\ngsap.to(\".card\",{\n\nscrollTrigger:{\ntrigger:\".card\",\nstart:\"top center\",\nscrub:true\n},\n\ny:200\n\n})\n\n}\n\n})","language":"javascript","filename":"","files":"[{\"id\":\"q9amv3yeb\",\"name\":\"code\",\"code\":\"const mm = gsap.matchMedia()\\n\\nmm.add({\\n\\n\\\"(min-width: 900px)\\\": () => {\\n\\ngsap.to(\\\".card\\\",{\\n\\nscrollTrigger:{\\ntrigger:\\\".card\\\",\\nstart:\\\"top center\\\",\\nscrub:true\\n},\\n\\nx:400\\n\\n})\\n\\n},\\n\\n\\\"(max-width: 899px)\\\": () => {\\n\\ngsap.to(\\\".card\\\",{\\n\\nscrollTrigger:{\\ntrigger:\\\".card\\\",\\nstart:\\\"top center\\\",\\nscrub:true\\n},\\n\\ny:200\\n\\n})\\n\\n}\\n\\n})\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c656ccc5-d23c-423e-abf0-e5477627b58b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Desktop scroll animation moves ","styles":{}},{"type":"text","text":"horizontally","styles":{"bold":true}},{"type":"text","text":", while mobile scroll animation moves ","styles":{}},{"type":"text","text":"vertically","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"fac51ee4-02a7-4e3e-8a54-f99ba121db0f","type":"divider","props":{},"children":[]},{"id":"72892f9f-84e1-43ff-b21f-1b73c60a8734","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Best Practices","styles":{}}],"children":[]},{"id":"d2ae8a95-cb5a-41dd-9900-155e478a0be7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Keep Queries Organized","styles":{}}],"children":[]},{"id":"e2f361d4-1117-4e9c-9cd9-94a9d54d6dd6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Group related responsive animations together.","styles":{}}],"children":[]},{"id":"cbf5b5a8-92d5-4700-b3c0-af26ceaeac14","type":"divider","props":{},"children":[]},{"id":"c8d1df13-5d82-4a09-982b-c62108bd810d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"matchMedia()","styles":{"code":true}},{"type":"text","text":" for ScrollTrigger","styles":{}}],"children":[]},{"id":"f311f319-f2b7-455f-a887-26f7310c2efd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"ScrollTrigger animations should be responsive to avoid layout issues.","styles":{}}],"children":[]},{"id":"3ed04788-ae53-4fd3-9ca1-ffe56021c1b3","type":"divider","props":{},"children":[]},{"id":"cfa6884a-779a-43ac-98fe-78c979e591cd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Avoid Manual Resize Logic","styles":{}}],"children":[]},{"id":"426d6b1d-60a7-4cf9-876d-39ff2e86e0e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"matchMedia()","styles":{"code":true}},{"type":"text","text":" automatically manages animation lifecycle.","styles":{}}],"children":[]},{"id":"ab6d2624-70e8-4c1b-abde-526e2ff73401","type":"divider","props":{},"children":[]},{"id":"a9cf68bc-ba16-481d-842d-d6df563c75d1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Use Mobile-First Queries","styles":{}}],"children":[]},{"id":"3dea04b7-0f9e-48b7-860b-943b4906bd71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"af3c42bb-feb2-43df-ac13-7c57c6f94871","type":"procode","props":{"code":"\"(min-width:768px)\"","language":"javascript","filename":"","files":"[{\"id\":\"vmuhe4he2\",\"name\":\"code\",\"code\":\"\\\"(min-width:768px)\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e69af67-b929-4370-a076-3dcf07325745","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This matches common responsive design patterns.","styles":{}}],"children":[]},{"id":"79ce4e4e-c882-48d9-a290-799e26a85a10","type":"divider","props":{},"children":[]},{"id":"6c0de369-58c0-4c01-a18b-52c08b18318c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Common Use Cases","styles":{}}],"children":[]},{"id":"8d74dab0-d553-49f6-8099-46c6681e037f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"gsap.matchMedia()","styles":{"code":true}},{"type":"text","text":" is commonly used for:","styles":{}}],"children":[]},{"id":"33054dd5-bac0-4c88-bb75-cd1ea927087f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"responsive scroll animations","styles":{}}],"children":[]},{"id":"4d450cd0-2170-4e5e-8e44-54711b88912f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"mobile vs desktop animation differences","styles":{}}],"children":[]},{"id":"c7c6300b-4ed8-436d-b233-8a4f8f1976fb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"responsive parallax effects","styles":{}}],"children":[]},{"id":"64a1231a-4de1-4257-a910-8b7bbc4f798d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"layout-specific animation logic","styles":{}}],"children":[]},{"id":"48a34f4d-400c-478b-825e-2c4b5a1b63f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"orientation-based animations","styles":{}}],"children":[]},{"id":"9f740193-458a-4bd2-8af3-b2b779f53110","type":"divider","props":{},"children":[]},{"id":"07841738-8d75-4807-97d8-f1a9018c77b8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Browser Support","styles":{}}],"children":[]},{"id":"aaf4cfbd-905d-4b3a-b101-c062cc6c7301","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"matchMedia()","styles":{"code":true}},{"type":"text","text":" relies on the standard ","styles":{}},{"type":"text","text":"CSS media query API","styles":{"bold":true}},{"type":"text","text":", supported by all modern browsers.","styles":{}}],"children":[]},{"id":"2a70a2a9-829e-4600-851c-803ad1c85a57","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Supported browsers:","styles":{}}],"children":[]},{"id":"76b540a2-537d-492d-b9c9-a6bf461498f6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Chrome","styles":{}}],"children":[]},{"id":"59114a86-d6cf-4f87-a5f1-d0f2442ca7a0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Firefox","styles":{}}],"children":[]},{"id":"565ffb81-cdfb-4b3f-b5a2-c9185857eda2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Safari","styles":{}}],"children":[]},{"id":"032b084f-2dcf-4913-b6aa-d554503c59c3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Edge","styles":{}}],"children":[]},{"id":"dfc119cd-29a9-4ed5-bfc0-3a16710b21ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]