Animation options
Animation targets allow you to specify element (or multiple elements) to animate using simple selector syntax. af-options lets you specify options for the animation.
Animation targets — af-target
By default, when you add any animation to the element, it’s presumed that animation will be applied to the element itself. But you can also use af-target attribute to specify which element(s) to animate. Use any valid CSS selector, including & symbol to refer to the element itself, combined with other valid CSS selectors, like & > div or .box or & ul li. Or specify entirely different element to animate. Some examples:
| Target value | Description |
|---|---|
& | (Default, can be omitted)Animates the element itself |
& > div | Animates all direct child div elements inside the element |
.box | Animates all elements with class box |
& ul li | Animates all li elements inside ul elements inside the element |
#my-id | Animates element with id my-id |
This can be useful for example when you want to create a staggered animation, or when you want to assign similar animations to a set of elements defined with some CSS class.
Animation options — af-options
af-options provides an easy way to set animation options for any type of animation.
Animation options is the best place to provide options like duration, delay, stagger, easing, yoyo etc. Depending on the animation type, they’ll be added to: from animation parameters if you only have from animation, to animation parameters if you have only to or from and to animations, or as entire animation options when you have keyframes animation. You can also provide all those options inside af-from or af-to attributes directly — but it’s there to have a more unified way to set them, that’s separate from the animation itself.
af-options is responsive, so you can provide different options for different breakpoints by adding breakpoint suffix to the attribute name. E.g. af-options-md will apply different options to viewports with md breakpoint.
Some of the most commonly used options are:
| Option | Example value | Description |
|---|---|---|
delay | delay: 0.5 | Delay before the animation starts (in seconds) |
duration | duration: 0.5 | Duration of the animation in seconds |
ease | ease: power2.inOut | Easing function to use |
repeat | repeat: 2 | Number of times to repeat the animation |
repeatDelay | repeatDelay: 0.5 | Delay between repeats (in seconds) |
stagger | stagger: 0.5 | Delay between animations (in seconds) |
startAt | startAt: { x: 120 } | Starting values for animated properties |
yoyo | yoyo: true | Reverses animation direction |