Articles in this section

Animating In-App Messages with CSS

Animated In-app

With Iterable's In-App Template Editor, you can create in-app animations using simple CSS. There are a variety of ways of presenting the in-app and in this example, we will use an elliptic pop-up.

TIP

Iterable also provides default animations for showing and hiding in-app messages. It's best not to use custom CSS animations and these default animations at the same time. To learn more, read Creating In-App Templates.

# In this article

# Creating the template

In order to use custom CSS inside of an Iterable in-app, you must create a template via the WYSIWYG editor. If you are very uncomfortable with HTML, then you can build your in-app in the Beefree editor and export it to HTML for upload.

# Adding animations

You will need to add two parts of code to the template in order to achieve the animations.

  1. The keyframe reference:

    @keyframes slide-in-elliptic-bottom-fwd {
  0% {
    -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
    transform: translateY(600px) rotateX(30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -200px;
    transform-origin: 50% -200px;
    opacity: 1;
  }
}

  2. The animation code:

    .modal-content {
  background-color: #ffffff;
  margin: auto;
  border: 0;
  width: 85%;
  border-radius: 8px;
  max-width: 320px;
  position: relative;
  animation: slide-in-elliptic-bottom-fwd 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}

# Full code example

If you are having trouble getting your in-app to animate, try adding the pop-up below, customizing it as necessary:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><!--     <link href="style.css" rel="stylesheet" type="text/css" />  -->
    <style type="text/css">body {
      font-family: Arial, sans-serif;
      }
      h1{
        color:#232323;
      }
      h2{
        color:#232323;
      }
      p{
        color: #4a4a4a;
        margin-top:-12px;
      }
      .modal {
        display: yes;
        position: fixed;
        z-index: 1;
        padding-top: 10%;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.7);
      }
      /* ----------------------------------------------
      * Generated by Animista on 2019-6-19 17:23:47
      * w: http://animista.net, t: @cssanimista
      * ---------------------------------------------- */
      /**
      * ----------------------------------------
      * animation slide-in-elliptic-bottom-fwd
      * ----------------------------------------
      */
      @keyframes slide-in-elliptic-bottom-fwd {
        0% {
          -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
          transform: translateY(600px) rotateX(30deg) scale(0);
          -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) rotateX(0) scale(1);
          transform: translateY(0) rotateX(0) scale(1);
          -webkit-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
          opacity: 1;
        }
      }
      /* Modal Content */
      .modal-content {
        background-color: #ffffff;
        margin: auto;
        border: 0;
        width: 85%;
        border-radius: 8px;
        max-width: 320px;
        position: relative;
        animation: slide-in-elliptic-bottom-fwd 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation-iteration-count: 1;
        animation-delay: 0.5s;
      }
      .image-container {
        position: relative;
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      /* The Close Button */
      .image-container .close {
        color: #9f9f9f;
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 40px;
        font-weight: light;
        background-color: transparent;
        border:none;
        text-decoration:none;
      }
      .contenttext{
        padding-left:7.5%;
        padding-right:7.5%;
        padding-top: 0px;
        text-align: center;
      }
      .cta{
        width:100%;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 24px;
      }
      .cta .btn{
        height:40px;
        background-color: #ed8623;
        border:0;
        border-radius: 40px;
        text-align: center;
        min-width: 120px;
        color: #ffffff;
        font-size: 0.875em;
        font-family: Arial, sans-serif;
      }
      .outside{
        margin-top: 24px;
        font-size:.875em;
        text-align: center
      }
      .outside .dismiss{
        color: #ffffff;
        background-color: transparent;
        border:none;
      }
    </style>
  </head>
  <body>
    <div class="modal" id="myModal"><!-- Modal content -->
      <div class="modal-content">
        <div class="image-container">
          <br />
          <br />
          &nbsp;
          <div style="text-align:center"><img alt="BGimage" style="max-width:180px;" width="240" src="https://iterable.com/wp-content/uploads/2016/12/Iterable_Logo_transparent-tight.png" />
          </div>
          <a class="close" href="itbl://">×</a>
        </div>
        <div class="btn">
          <div class="contenttext">
            <h1><span style="color:#003e7d;">INTRODUCING
              <br />
              ANIMATIONS</span>
            </h1>
            <p>{{firstName}}, tracking your in-app
              <br />
              is as easy as adding this code.
            </p>
          </div>
          <div class="cta">
            <button class="btn">Try It Now!
            </button>
            <br />
            &nbsp;
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

# Further reading

User guides:

Developer documentation:

Related articles