Better Media Queries / Breakpoints

I'd love to see more powerful media queries:

  • set breakpoints per animation (instead of global)

  • possibility to add custom media queries per animation (ie. a 'custom-query' field where we can put in a complete media query syntax)

This would help immensely in fine tuning animations that might not work properly on funky viewport aspect ratios and helps with devices that do viewport scaling.

For example, I currently have an animation that works perfectly, but not once the viewport height is 65vw or less. This is the case on many smaller laptops. With a custom query I could exclude these devices via:
@media only screen and (max-height: 65vw) {โ€ฆ}

3
2 replies