Breakpointless

Building without PX breakpoints is vital for accessibility and design control

In this lesson, we'll cover alternativeness to PX breakpoints and everything you need to know to build breakpointless in Lumos.

Using GSAP With Container Queries

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/flowtricks/script@v1.0.4/match-container.js"></script>
<script>
document.querySelectorAll(".hero_section").forEach(function (section) {
  const heading = section.querySelector(".hero_heading");
  heading.observeContainer("(width < 40em)", (match) => {
    if (match) {
      gsap.to(heading, { color: "red" });
    } else {
      gsap.to(heading, { color: "green" });
    }
  });
});
</script>