Animate an element through an opacity change

Within an anims() call, itself passed to any anims argument, the anim_opacity() function can be used to express an animation where the target element undergoes a change in opacity with time.

anim_opacity(opacity = NULL, easing_fn = NULL, initial = FALSE)

Arguments

opacity	The opacity value of the element at the keyframe time (given as the LHS value in the anims() call).
easing_fn	The timing or easing function to use for the animation. If not provided, the linear() timing function will be used (which is doesn't use any easing in the animation, just a linear movement). The other timing and easing functions are: step_start(), step_end(), ease_in(), ease_out(), and ease_in_out().
initial	Should this opacity value be the initial opacity value of the element? If so, use TRUE and any value provided to opacity will be disregarded.

Examples

# Basic animation of an element's
# opacity value (moving to a new
# `opacity` value of `0`)
SVG(width = 300, height = 300) %>%
  svg_rect(
    x = 50, y = 50,
    width = 50, height = 50,
    attrs = svg_attrs_pres(
      stroke = "magenta",
      fill = "lightblue"
    ),
    anims = anims(
      2.0 ~ anim_opacity(opacity = 0)
    )
  )
#> <svg width="300" height="300">
#>   <style>
#>     @keyframes anim_opacity_000001 {
#>       0% {
#>         opacity: 1;
#>         animation-timing-function: linear();
#>       }
#>       100% {
#>         opacity: 0;
#>         animation-timing-function: linear();
#>       }
#>     }
#>   </style>
#>   <g style="animation: 2s linear infinite both anim_opacity_000001;">
#>     <rect x="50" y="50" width="50" height="50" stroke="magenta" fill="lightblue"/>
#>   </g>
#> </svg>