Easing

Easing defines how values change over time — whether smooth, snappy, bouncy, or elastic.
Animatry includes a full set of built-in easing functions and supports parameterized and custom types.

Using Easing

You can pass easing as a string like "powerIn(2)", "bounceOut", or use a custom function.
If an unknown easing name is provided, Animatry will warn and default to linear.

animatry.to('.box', {
  x: 300,
  duration: 1.5,
  ease: 'powerInOut(2)'
})

Available Easing Types

• none(), linear()
• powerIn(n), powerOut(n), powerInOut(n)
• bounceIn(), bounceOut(), bounceInOut()
• elasticIn(f), elasticOut(f), elasticInOut(f)
• backIn(), backOut(), backInOut()
• steps(n)
• cubicBezier(p1x, p1y, p2x, p2y)

Bounce / Back / Elastic

These easings provide springy or overshooting motion.
They can be used as-is or customized with parameters.

animatry.to('.box', {
  y: -100,
  duration: 1,
  ease: 'bounceOut'
})

Cubic Bezier

You can use a custom easing curve with cubicBezier(x1, y1, x2, y2).
This gives you full control over the animation curve.

animatry.to('.box', {
  x: 300,
  duration: 1,
  ease: 'cubicBezier(0.4, 0, 0.2, 1)' // ease-in-out
})

Custom Functions

You can also pass a custom easing function directly instead of a string.

animatry.to('.box', {
  x: 200,
  duration: 1,
  ease: (t) => t * t * t // easeInCubic
})