## ----include = FALSE----------------------------------------------------------
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

## ----minimal------------------------------------------------------------------
library(animejs)

svg_src <- '
<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <circle data-animejs-id="c1" cx="50"  cy="100" r="20" fill="#4e79a7"/>
  <circle data-animejs-id="c2" cx="120" cy="100" r="20" fill="#f28e2b"/>
  <circle data-animejs-id="c3" cx="190" cy="100" r="20" fill="#e15759"/>
</svg>
'

anime_timeline(
  duration = 800,
  ease = anime_easing_elastic(),
  loop = TRUE
) |>
  anime_add(
    selector = anime_target_css("circle"),
    props = list(
      translateY = anime_from_to(-80, 0),
      opacity = anime_from_to(0, 1)
    ),
    stagger = anime_stagger(150, from = "first")
  ) |>
  anime_add(
    selector = anime_target_id("c2"),
    props = list(r = anime_from_to(20, 40)),
    offset = "+=200"
  ) |>
  anime_playback(controls = TRUE) |>
  anime_render(svg = svg_src, width = "360px")

## ----timeline-----------------------------------------------------------------
tl <- anime_timeline(
  duration = 1000,
  ease = anime_easing("Cubic", "inOut"),
  loop = TRUE
)

## ----from_to, eval = FALSE----------------------------------------------------
# anime_from_to(0, 1) # opacity: 0 → 1
# anime_from_to(0, 100, "px") # translateX: "0px" → "100px"

## ----keyframes, eval = FALSE--------------------------------------------------
# # Bare numeric keyframes
# anime_keyframes(0, 1, 0.5)
# 
# # List-based keyframes with per-keyframe easing
# anime_keyframes(
#   list(to = 0),
#   list(to = 1, ease = "outQuad", duration = 400),
#   list(to = 0.5, ease = "inCubic")
# )

## ----stagger, eval = FALSE----------------------------------------------------
# anime_add(
#   tl,
#   selector = ".bar",
#   props = list(scaleY = anime_from_to(0, 1)),
#   stagger = anime_stagger(80, from = "center")
# )

## ----playback, eval = FALSE---------------------------------------------------
# tl |>
#   anime_playback(loop = TRUE, alternate = TRUE, controls = TRUE) |>
#   anime_render(svg = svg_src)

## ----events, eval = FALSE-----------------------------------------------------
# tl |>
#   anime_on("onComplete", "myOnCompleteHandler") |>
#   anime_render(svg = svg_src)

## ----save, eval = FALSE-------------------------------------------------------
# widget <- anime_render(tl, svg = svg_src)
# htmlwidgets::saveWidget(widget, "animation.html", selfcontained = TRUE)