Animating a component to Bounce up & down the screen

Ignition
1

This is probably a dum question, But I once saw an IU video where the component had been animated to bounce up and down the screen. Who knows where this video is and please can you share the link with me???

2

This exchange resource should have it. Check out bounce.

Edit, don't know about any video, but this resource will have what you need.

3

The perspective style classes offer some solid basics for animating things, but if it's not enough you can use the transition css property.
Basically, you need to have 2 states for a component, usually through bindings.
This can be position, size, opacity, color...
Then you add transition: {the property that changes} {transition time} to the component's styles.

For example, you want a text field to fade in only when a selection was made in a dropdown.
Add an opacity property to the text field, put an expression binding on it that would look like

if (isNull({dropdown.value}), 0, 100)

Then add the style transition: opcacity 500ms to make it go from 0 to 100 in 500ms.
You can also use transition: all 500ms if you have several properties that you want to transition at the same time.

I often use it to resize containers smoothly depending on their contents.

There's also the keyframe solution if you're comfortable with css. It's much more powerful but will require you to whip out the css stylesheet.

4

Bounce style (add to stylesheet). Add a label then set class to bounce

/* Bounce */
.psc-bounce {
  animation: bounce 2s linear infinite;
  transform-origin: center bottom;
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}