Animation

Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.

To animate an element, wrap it in <wa-animation> and set an animation name. The animation will not start until you add the play attribute. Refer to the properties table for a list of all animation options.

cls("animation-overview"),
Animation(
  _.name     := "bounce",
  _.duration := 2000,
  _.play     := true
)(
  div(cls("box"))
),
Animation(
  _.name     := "jello",
  _.duration := 2000,
  _.play     := true
)(
  div(cls("box"))
),
Animation(
  _.name     := "heartBeat",
  _.duration := 2000,
  _.play     := true
)(
  div(cls("box"))
),
Animation(
  _.name     := "flip",
  _.duration := 2000,
  _.play     := true
)(
  div(cls("box"))
)

cls("animation-overview"),Animation(  _.name     := "bounce",  _.duration := 2000,  _.play     := true)(  div(cls("box"))),Animation(  _.name     := "jello",  _.duration := 2000,  _.play     := true)(  div(cls("box"))),Animation(  _.name     := "heartBeat",  _.duration := 2000,  _.play     := true)(  div(cls("box"))),Animation(  _.name     := "flip",  _.duration := 2000,  _.play     := true)(  div(cls("box")))

.animation-overview .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: var(--wa-color-brand-fill-loud);
  margin: 1.5rem;
}

.animation-overview .box {  display: inline-block;  width: 100px;  height: 100px;  background-color: var(--wa-color-brand-fill-loud);  margin: 1.5rem;}

The animation will only be applied to the first child element found in <wa-animation>.

Examples

Animations & Easings

This example demonstrates all of the baked-in animations and easings. Animations are based on those found in the popular Animate.css library.

val animationNames = WebAwesome.getAnimationNames()
val easingNames    = WebAwesome.getEasingNames()

val animationNameVar = Var("bounce")
val easingNameVar    = Var("easeInOut")
val playbackRateVar  = Var("1")

div(
  cls("animation-sandbox"),
  Animation(
    _.name <-- animationNameVar,
    _.easing <-- easingNameVar,
    _.duration := 2000,
    _.play     := true
  )(
    div(cls("box"))
  ),
  div(
    cls("controls"),
    Select(
      _.label := "Animation",
      _.value <-- animationNameVar,
      _.onInput.mapToValue --> animationNameVar
    )(
      animationNames.map(name => UOption(_.value := name)(name))
    ),
    Select(
      _.label := "Easing",
      _.value <-- easingNameVar,
      _.onInput.mapToValue --> easingNameVar
    )(
      easingNames.map(name => UOption(_.value := name)(name))
    ),
    Input(
      _.label := "Playback Rate",
      _.`type`.number,
      _.min  := "0",
      _.max  := "2",
      _.step := "0.25",
      _.value <-- playbackRateVar,
      _.onInput.mapToValue --> playbackRateVar
    )()
  )
)

val animationNames = WebAwesome.getAnimationNames()val easingNames    = WebAwesome.getEasingNames()val animationNameVar = Var("bounce")val easingNameVar    = Var("easeInOut")val playbackRateVar  = Var("1")div(  cls("animation-sandbox"),  Animation(    _.name <-- animationNameVar,    _.easing <-- easingNameVar,    _.duration := 2000,    _.play     := true  )(    div(cls("box"))  ),  div(    cls("controls"),    Select(      _.label := "Animation",      _.value <-- animationNameVar,      _.onInput.mapToValue --> animationNameVar    )(      animationNames.map(name => UOption(_.value := name)(name))    ),    Select(      _.label := "Easing",      _.value <-- easingNameVar,      _.onInput.mapToValue --> easingNameVar    )(      easingNames.map(name => UOption(_.value := name)(name))    ),    Input(      _.label := "Playback Rate",      _.`type`.number,      _.min  := "0",      _.max  := "2",      _.step := "0.25",      _.value <-- playbackRateVar,      _.onInput.mapToValue --> playbackRateVar    )()  ))

.animation-sandbox .box {
  width: 100px;
  height: 100px;
  background-color: var(--wa-color-brand-fill-loud);
}

.animation-sandbox .controls {
  max-width: 300px;
  margin-top: 2rem;
}

.animation-sandbox .controls wa-select {
  margin-bottom: 1rem;
}

.animation-sandbox .box {  width: 100px;  height: 100px;  background-color: var(--wa-color-brand-fill-loud);}.animation-sandbox .controls {  max-width: 300px;  margin-top: 2rem;}.animation-sandbox .controls wa-select {  margin-bottom: 1rem;}

Using Intersection Observer

Use an Intersection Observer to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport.

import org.scalajs.dom.IntersectionObserver

val box = div(cls("box"))
val animation = Animation(
  _.name := "jackInTheBox",
  _.duration := 2000,
  _.iterations := 1
)(
  box
)

val observer = new IntersectionObserver((entries, _) => {
  if (entries(0).isIntersecting) {
    animation.ref.play = true;
  } else {
    animation.ref.play = false;
  }
})

observer.observe(box.ref)

div(
  cls("animation-scroll"),
  animation
)

import org.scalajs.dom.IntersectionObserverval box = div(cls("box"))val animation = Animation(  _.name := "jackInTheBox",  _.duration := 2000,  _.iterations := 1)(  box)val observer = new IntersectionObserver((entries, _) => {  if (entries(0).isIntersecting) {    animation.ref.play = true;  } else {    animation.ref.play = false;  }})observer.observe(box.ref)div(  cls("animation-scroll"),  animation)

.animation-scroll .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: var(--wa-color-brand-fill-loud);
}

.animation-scroll .box {  display: inline-block;  width: 100px;  height: 100px;  background-color: var(--wa-color-brand-fill-loud);}

Examples

Animations & Easings

Using Intersection Observer

On this page