# Animating a component to Bounce up & down the screen

**URL:** <https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 15, 2023, 5:34pm UTC](https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235 "2023-09-15T17:34:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wendy\_Minai1](https://avatars.discourse-cdn.com/v4/letter/w/cdc98d/32.png) [@Wendy\_Minai1](https://forum.inductiveautomation.com/u/Wendy_Minai1)\
**Post date:** [September 15, 2023, 5:34pm UTC](https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235/1 "2023-09-15T17:34:35Z")

</div>

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???

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [September 15, 2023, 6:39pm UTC](https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235/2 "2023-09-15T18:39:59Z")

</div>

This exchange resource should have it. Check out bounce.

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2155/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 16, 2023, 1:34am UTC](https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235/3 "2023-09-16T01:34:32Z")

</div>

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

```auto
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.

> **[Using CSS animations - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)**
>
> CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the...

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [September 16, 2023, 1:52am UTC](https://forum.inductiveautomation.com/t/animating-a-component-to-bounce-up-down-the-screen/79235/4 "2023-09-16T01:52:33Z")

</div>

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

```auto
/* 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);
  }
}

```