Create Movement with Kinetic Code

Litmus Personalize Tags can be used within CSS to add 'movement' to email, for example in a carousel.

It is possible to use Litmus Personalize live images within CSS to create movement in the HTML.

Litmus Personalize images behave the same way as normal images in the code, so they will do whatever you command them to do! Therefore it is possible to use them in kinetic code, for example in a carousel.

It is also possible to create a 'kinetic tag'. A kinetic tag is a tag where animation/interactivity is delegated to the email client using CSS3 techniques. Theoretically you can create an animation by making the Litmus Personalize tag a little more complex by adding the CSS required. (Content Automation templates built with the repeated property are perfect for Kinetic Tags). It's worth keeping in mind that the challenge with kinetic email, at present, is support. At this point we aren't able to create kinetic tags for customers but you can create one if your CSS is up to scratch.

Here is an example of a Litmus Personalize tag scrolling.

.viewport {
  height: 220px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.viewport > div {
  height: 220px;
  width: 1200px;
  background: url(https://s3.amazonaws.com/elasticbeanstalk-us-east-1-955968379092/Images/kinoWeatherForecastBanner.png);
  background-size: 1200px 220px;
  position: absolute;
  top: 0;
  left: 0;
  /*height: 220px;*/
  transform: translate3d(0, 0, 0);
}
.viewport .scrolling-image {
  animation: moveSlideshow 20s linear infinite;
}

@keyframes moveSlideshow {
  /*100% { 
    transform: translateX(-200px);  
  }*/
  0% { transform: translateX(0); }
  5% { transform: translateX(0); }
  10%{ transform: translateX(-120px); }
  15% { transform: translateX(-120px); }
  20%{ transform: translateX(-240px); }
  25% { transform: translateX(-240px); }
  30%{ transform: translateX(-360px); }
  35% { transform: translateX(-360px); }
  40%{ transform: translateX(-480px); }
  45% { transform: translateX(-480px); }
  50% { transform: translateX(-600px); }
  55% { transform: translateX(-600px); }
  60%{ transform: translateX(-480px); }
  65% { transform: translateX(-480px); }
  70%{ transform: translateX(-360px); }
  75% { transform: translateX(-360px); }
  80%{ transform: translateX(-240px); }
  85% { transform: translateX(-240px); }
  90%{ transform: translateX(-120px); }
  95% { transform: translateX(-120px); }
  100% { transform: translateX(0); }
}

The kinetic tag would be made of the HTML+CSS style.

The first step would be to create a static image with repeated blocks (twice the size and twice as many tweets as needed) and then use the CSS to create the movement.