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