Keyframes animation
Keyframe animations allow you to define a sequence of animation steps that will be played one after another. You can use 3 different types of keyframes animations.
How it works
AF supports all 3 types of keyframes animations that GSAP does, offering simplified syntax for defining them. It’s highly recommended to check out the GSAP docs | Keyframes to get more info about them.
All 3 types are defined using af-keyframes attribute and different type of parameters:
Simple array-based keyframes
Provide any number of animatable properties, each property is an array of values between which the element will animate. Arrays don’t need to have same number of elements.
<div af-keyframes="x: [-50, 50, 50, -50, -50], y: [-50, -50, 50, 50, -50]"></div>If you provide af-options attribute, it will be considered as options for the whole animation — you can also use properties like easeEach there to specify easing that will be applied to every keyframe.
Percentage-based keyframes
Sorta like in CSS — you provide any number of percentage keyframes, and inside them — any number of animatable properties. No need to quote the percentages, btw!
<div af-keyframes="0%: { x: -50 }, 50%: { x: 50 }, 100%: { x: -50 }"></div>If you provide af-options attribute, it’s gonna be considered as options for the whole animation. You can provide invividual eases or alike inside each keyframe too, or use easeEach property to specify easing that will be applied to every keyframe.
Object-based keyframes
Pass any number of objects, comma-separated, each object could have any number of animatable properties.
<div af-keyframes="{scaleX: 0, scaleY: 0}, {scaleX: 1.5, scaleY: 1}, {scaleX: 1, scaleY: 0.75}"></div>If you provide af-options attribute, it’s gonna be considered as options for the whole animation. You can provide invividual eases or alike inside each keyframe too, or use easeEach property to specify easing that will be applied to every keyframe.