From-to animation

Tween animations are the most common type of animations, that allow you to animate between two states of an element. You can animate pretty much any CSS property — same as with native GSAP.

Animation targets

By default, animations are applied to the element itself. If you want to create a staggered animation, animate different element, etc — use af-target attribute to specify animation target(s).
Animation targets

How it works

From-to animations, or tween animations, is the simplest (yet powerful) type of animation. It’s a basic animation that blends two states of an element — from one state to another. You can define them using af-from and af-to attributes. af-from is direct analogy to gsap.from(), af-to is analogy to gsap.to(), and when you provide both af-from and af-to attributes, it’s the same as gsap.fromTo().

af-from

af-from attribute specifies the starting state of the element. It can be any animatable property using any units and variables — including CSS variables and JS variables / template literals. If you don’t provide af-to attribute, animation will animate to the current state of the element on the page.

af-to

af-to attribute specifies the ending state of the element. It can be any animatable property using any units and variables — including CSS variables and JS variables / template literals. If you don’t provide af-from attribute, starting state will be the current state of the element on the page.

Both af-from and af-to

If you provide both af-from and af-to attributes, animation will animate from the af-from state to the af-to state. If you also provide af-options attribute, it will be added to af-to animation parameters.

Examples

Simple fade-in and scale-in (af-from only)
Start fully transparent (autoAlpha: 0) and scaled 3x, and fade in to current state (autoAlpha: 1).

Fade-in and rotate in 1.5 sec, with yoyo and repeat
Use current state as starting point, fade in and rotate in 1.5 sec, then reverse direction and repeat.

Timeline animation with multiple shapes, using both af-from and af-to
Multiple shapes starting at different positions in the timeline, then moving to state specified in af-to.