Skip to content
AF | Animation Framework

Responsive animations

Adjust your animations to different viewports by using responsive suffixes. It’s fast and use native GSAP’s matchMedia().

Responsive animations

You can add a breakpoint suffix to any animation attribute AF has, except af-target. For example, if you have af-from="x: 100" attribute, you can also specify af-from-md="x: 200" to animate differently on viewports with md breakpoint. You can have as much breakpoint suffixes for elements as you want. There are also a few rules about how they are applied:

  • If you don’t specify any breakpoint suffix, animation will be applied to all viewports.
  • If you specify only attribute with breakpoint suffix, but no attribute without suffix (e.g. default), animation will only be applied to that viewport.
  • If you specify default and one or more suffixes, attributes are deep merged with defaults, with breakpoint values taking precedence (e.g. if you specify af-options="duration: 1" and af-options-md="duration: 2", animation will have duration: 2 on viewports with md breakpoint). Also, changes will be propagated to smaller viewports from larger ones, e.g. if you specify parameter for md breakpoint, it will be applied to md but also to sm.

In this example, animation will start from x: 100 and have duration: 1 on all viewports, and from x: 200 and have duration: 2 on md and smaller viewports.

<div af-from="x: 100" af-from-md="x: 200" af-options="duration: 1" af-options-md="duration: 2"></div>

In this example, keyframe animations will be the same for all viewports except sm, and entirely different on sm. Then, all viewports that are larger than md will have duration: 1 because it’s the default GSAP value, and md and sm viewports will have duration: 2:

<div af-keyframes="0%: { x: 100 }, 100%: { x: 200 }" af-keyframes-sm="x: [0, 100], y: [0, 100]" af-options-md="duration: 2"></div>

Breakpoint suffixes

By default, AF is bundled with breakpoints that are similar to ones that TailwindCSS has:

BreakpointSuffix
smwidth less than 640px
mdwidth between 641px and 768px
lgwidth between 769px and 1024px
xlwidth between 1025px and 1280px
xxlwidth greater than 1281px

You can also add your own breakpoints, but you need to do it before initializing AF. Check out the Configuration docs to find out more about it.

Examples


Responsive animation
Stretch the bar to 90% of the screen width on sm and to 60% on larger viewports (click HTML tab to hide the code, so viewport will become wider).